Clean up layout

upmaru · Feb 21, 2024 · f7e77e2 · f7e77e2
1 parent d63b5ed
commit f7e77e2
Show file tree

Hide file tree

Showing 2 changed files with 77 additions and 75 deletions.
diff --git a/lib/polar_web/components/layouts/app.html.heex b/lib/polar_web/components/layouts/app.html.heex
@@ -1,33 +1,62 @@
-<nav class="bg-slate-950">
-  <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
-    <div class="flex h-16 items-center justify-between">
-      <div class="flex items-center">
-        <div class="flex-shrink-0">
-          <img class="h-8 w-8" src={~p"/images/opsmaru-logo.png"} alt="OpsMaru" />
+<div class="min-h-full">
+  <nav class="bg-slate-950">
+    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+      <div class="flex h-16 items-center justify-between">
+        <div class="flex items-center">
+          <div class="flex-shrink-0">
+            <img class="h-8 w-8" src={~p"/images/opsmaru-logo.png"} alt="OpsMaru" />
+          </div>
+          <div class="hidden md:block">
+            <div class="ml-10 flex items-baseline space-x-4">
+              <!-- Current: "bg-slate-900 text-white", Default: "text-slate-300 hover:bg-slate-700 hover:text-white" -->
+              <.link
+                href={~p"/"}
+                class="bg-slate-900 text-white rounded-md px-3 py-2 text-sm font-medium"
+                aria-current="page"
+              >
+                <%= gettext("Home") %>
+              </.link>
+            </div>
+          </div>
         </div>
         <div class="hidden md:block">
-          <div class="ml-10 flex items-baseline space-x-4">
-            <!-- Current: "bg-slate-900 text-white", Default: "text-slate-300 hover:bg-slate-700 hover:text-white" -->
-            <.link
-              href={~p"/"}
-              class="bg-slate-900 text-white rounded-md px-3 py-2 text-sm font-medium"
-              aria-current="page"
+          <div class="ml-4 flex items-center md:ml-6">
+            <button
+              type="button"
+              class="relative rounded-full bg-slate-800 p-1 text-slate-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-slate-800"
             >
-              <%= gettext("Home") %>
-            </.link>
+              <span class="absolute -inset-1.5"></span>
+              <span class="sr-only">View notifications</span>
+              <svg
+                class="h-6 w-6"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke-width="1.5"
+                stroke="currentColor"
+                aria-hidden="true"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0"
+                />
+              </svg>
+            </button>
           </div>
         </div>
-      </div>
-      <div class="hidden md:block">
-        <div class="ml-4 flex items-center md:ml-6">
+        <div class="-mr-2 flex md:hidden">
+          <!-- Mobile menu button -->
           <button
             type="button"
-            class="relative rounded-full bg-slate-800 p-1 text-slate-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-slate-800"
+            class="relative inline-flex items-center justify-center rounded-md bg-slate-800 p-2 text-slate-400 hover:bg-slate-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-slate-800"
+            aria-controls="mobile-menu"
+            aria-expanded="false"
           >
-            <span class="absolute -inset-1.5"></span>
-            <span class="sr-only">View notifications</span>
+            <span class="absolute -inset-0.5"></span>
+            <span class="sr-only">Open main menu</span>
+            <!-- Menu open: "hidden", Menu closed: "block" -->
             <svg
-              class="h-6 w-6"
+              class="block h-6 w-6"
               fill="none"
               viewBox="0 0 24 24"
               stroke-width="1.5"
@@ -37,66 +66,39 @@
               <path
                 stroke-linecap="round"
                 stroke-linejoin="round"
-                d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0"
+                d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
               />
             </svg>
+            <!-- Menu open: "block", Menu closed: "hidden" -->
+            <svg
+              class="hidden h-6 w-6"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke-width="1.5"
+              stroke="currentColor"
+              aria-hidden="true"
+            >
+              <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+            </svg>
           </button>
         </div>
       </div>
-      <div class="-mr-2 flex md:hidden">
-        <!-- Mobile menu button -->
-        <button
-          type="button"
-          class="relative inline-flex items-center justify-center rounded-md bg-slate-800 p-2 text-slate-400 hover:bg-slate-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-slate-800"
-          aria-controls="mobile-menu"
-          aria-expanded="false"
+    </div>
+    <!-- Mobile menu, show/hide based on menu state. -->
+    <div class="md:hidden" id="mobile-menu">
+      <div class="space-y-1 px-2 pb-3 pt-2 sm:px-3">
+        <!-- Current: "bg-slate-900 text-white", Default: "text-slate-300 hover:bg-slate-700 hover:text-white" -->
+        <.link
+          href={~p"/"}
+          class="bg-slate-900 text-white rounded-md px-3 py-2 text-sm font-medium"
+          aria-current="page"
         >
-          <span class="absolute -inset-0.5"></span>
-          <span class="sr-only">Open main menu</span>
-          <!-- Menu open: "hidden", Menu closed: "block" -->
-          <svg
-            class="block h-6 w-6"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke-width="1.5"
-            stroke="currentColor"
-            aria-hidden="true"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
-            />
-          </svg>
-          <!-- Menu open: "block", Menu closed: "hidden" -->
-          <svg
-            class="hidden h-6 w-6"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke-width="1.5"
-            stroke="currentColor"
-            aria-hidden="true"
-          >
-            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
-          </svg>
-        </button>
+          <%= gettext("Home") %>
+        </.link>
       </div>
     </div>
-  </div>
-  <!-- Mobile menu, show/hide based on menu state. -->
-  <div class="md:hidden" id="mobile-menu">
-    <div class="space-y-1 px-2 pb-3 pt-2 sm:px-3">
-      <!-- Current: "bg-slate-900 text-white", Default: "text-slate-300 hover:bg-slate-700 hover:text-white" -->
-      <.link
-        href={~p"/"}
-        class="bg-slate-900 text-white rounded-md px-3 py-2 text-sm font-medium"
-        aria-current="page"
-      >
-        <%= gettext("Home") %>
-      </.link>
-    </div>
-  </div>
-</nav>
+  </nav>
+</div>
 <header class="bg-slate-900 shadow">
   <div class="mx-auto max-w-7xl px-4 py-6 sm:px-6 lg:px-8">
     <h1 class="text-2xl font-bold tracking-tight text-slate-50">

diff --git a/lib/polar_web/components/layouts/root.html.heex b/lib/polar_web/components/layouts/root.html.heex
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" class="[scrollbar-gutter:stable]">
+<html lang="en" class="[scrollbar-gutter:stable]" class="h-full">
   <head>
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
@@ -20,7 +20,7 @@
     <script defer phx-track-static type="text/javascript" src={~p"/assets/app.js"}>
     </script>
   </head>
-  <body class="bg-slate-950 min-h-full">
+  <body class="h-full bg-slate-950">
     <%= @inner_content %>
   </body>
 </html>