sync css on both wasm and docker pages

brehen · Feb 1, 2024 · a0f639c · a0f639c
1 parent 4889dde
commit a0f639c
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 53 deletions.
diff --git a/nebula/nebula_server/templates/pages/docker.rs.html b/nebula/nebula_server/templates/pages/docker.rs.html
@@ -5,55 +5,55 @@
 {% endblock %}
 
 {% block content %}
-  <div class="flex gap-2">
-    <a href="/wasm">
-      <h1 
-        class="text-white bg-slate-800 px-2 py-1 rounded-lg" 
-        style="width:fit-content; margin-left:12px;"
-      >
-        Wasm
-      </h1>
-    </a>
-    <a href="/docker" class="pointer-events-none">
-      <h1 
-        class="px-2 py-1 rounded-lg bg-white text-black" 
-        style="width:fit-content; margin-left:12px;"
-      >
-        Docker
-      </h1>
-    </a>
-  </div>
-  <div class="p-4 gap-8 flex">
-    <div class="space-y-2 flex flex-col">
-      {% for module in images %}
-        <form class='flex' hx-post="/api/docker" hx-target="#results" hx-swap="innerHTML">
-          <input
-            id={{module}}
-            name="input"
-            placeholder={{module}}
-            type="text"
-            class="rounded-l-md"
-          />
+  <div class="">
+    <div class="flex pl-4">
+      <a href="/wasm" >
+        <h1 
+          class="px-2 py-1 bg-white rounded-l-lg border-2 border-blue-200" 
+        >
+          Wasm
+        </h1>
+      </a>
+      <a href="/docker" class="pointer-events-none">
+        <h1 
+          class="px-2 py-1 rounded-r-lg bg-blue-700 text-white border-2 border-blue-200" 
+          style="border-left: none;"
+        >
+          Docker
+        </h1>
+      </a>
+    </div>
+    <div class="p-4 gap-8 flex">
+      <div class="space-y-2 flex flex-col">
+        {% for module in images %}
+          <form class='flex' hx-post="/api/docker" hx-target="#results" hx-swap="innerHTML">
+            <input
+              id={{module}}
+              name="input"
+              placeholder={{module}}
+              type="text"
+              class="rounded-l-md"
+            />
 
-          <input type="text" name="function_name" class="hidden" value="{{module}}" />
-          <input type="text" name="module_type" class="hidden" value="Docker" />
-          <button
-              type="submit"
-              class="w-full rounded-r-md bg-indigo-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
-          >
-            Submit
-          </button>
-        </form>
-      {% endfor %}
-      </div>
-    <div class="w-full bg-white rounded-lg relative overflow-hidden overflow-y-scroll" style="max-height: 100dvh;">
-      <div class="w-full bg-slate-100 p-2 pl-4 rounded-b-lg font-bold">
-        Results
+            <input type="text" name="function_name" class="hidden" value="{{module}}" />
+            <input type="text" name="module_type" class="hidden" value="Docker" />
+            <button
+                type="submit"
+                class="w-full rounded-r-md bg-indigo-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+            >
+              Submit
+            </button>
+          </form>
+        {% endfor %}
       </div>
-      <div class="text-white min-h-[400px] bg-slate-800 w-full h-full overflow-y-scroll p-4" style="max-height: 100dvh;">
-        <div id="results" class="flex flex-col gap-2"></div>
+      <div class="w-full bg-white rounded-lg relative overflow-hidden overflow-y-scroll" style="max-height: 100dvh;">
+        <div class="w-full bg-slate-300 p-2 pl-4 rounded-t-lg font-bold">
+          Results
+        </div>
+        <div class="min-h-[400px] bg-slate-200 w-full h-full overflow-y-scroll p-4" style="max-height: 100dvh;">
+          <div id="results" class="flex flex-col gap-2"></div>
+        </div>
       </div>
     </div>
-  </div>
-  <div hx-get="/api/results" hx-target="#results" hx-swap="innerHTML" hx-trigger="load"></div>
+    <div hx-get="/api/results" hx-target="#results" hx-swap="innerHTML" hx-trigger="load"></div>
 {% endblock %}
diff --git a/nebula/nebula_server/templates/pages/wasm.rs.html b/nebula/nebula_server/templates/pages/wasm.rs.html
@@ -5,19 +5,18 @@
 
 {% block content %}
 <div>
-  <div class="flex gap-2">
+  <div class="flex pl-4">
     <a href="/wasm" class="pointer-events-none">
       <h1 
-        class="px-2 py-1 rounded-lg bg-white text-black" 
-        style="width:fit-content; margin-left:12px;"
+        class="px-2 py-1 rounded-l-lg bg-blue-700 text-white border-2 border-blue-200" 
       >
         Wasm
       </h1>
     </a>
     <a href="/docker">
       <h1 
-        class="text-white bg-slate-800 px-2 py-1 rounded-lg" 
-        style="width:fit-content; margin-left:12px;"
+        class="px-2 py-1 bg-white rounded-r-lg border-2 border-blue-200" 
+        style="border-left: none;"
       >
         Docker
       </h1>
@@ -47,7 +46,7 @@
       {% endfor %}
       </div>
     <div class="w-full bg-white rounded-lg relative overflow-hidden overflow-y-scroll" style="max-height: 100dvh;">
-      <div class="w-full bg-black text-white p-2 pl-4 rounded-t-lg font-bold">
+      <div class="w-full bg-slate-300 p-2 pl-4 rounded-t-lg font-bold">
         Results
       </div>
       <div class="min-h-[400px] bg-slate-200 w-full h-full overflow-y-scroll p-4" style="max-height: 100dvh;">