style: improve mobile layout of Gearberg

Author: TobiasGleiter

Makefile

@@ -14,7 +14,7 @@ confirm:
 ## run/web: run the web application with live reload
 .PHONY: run/web
 run/web:
-	reflex -s -r '\.(go|tmpl|js)$$' -- go run -tags sqlite ./cmd/web serve --max-orgs=2 -log-level=debug
+	reflex -s -r '\.(go|tmpl|js)$$' -- go run -tags sqlite ./cmd/web serve -log-level=debug
 
 ## run/www: run the web application with live reload
 .PHONY: run/www

internal/assets/dist/index.css

@@ -6562,18 +6562,9 @@
   .h-10 {
     height: calc(var(--spacing) * 10);
   }
-  .h-12 {
-    height: calc(var(--spacing) * 12);
-  }
-  .h-14 {
-    height: calc(var(--spacing) * 14);
-  }
   .h-16 {
     height: calc(var(--spacing) * 16);
   }
-  .h-24 {
-    height: calc(var(--spacing) * 24);
-  }
   .h-auto {
     height: auto;
   }
@@ -6747,9 +6738,6 @@
   .w-6 {
     width: calc(var(--spacing) * 6);
   }
-  .w-12 {
-    width: calc(var(--spacing) * 12);
-  }
   .w-16 {
     width: calc(var(--spacing) * 16);
   }
@@ -7037,9 +7025,6 @@
   .flex-row {
     flex-direction: row;
   }
-  .flex-nowrap {
-    flex-wrap: nowrap;
-  }
   .flex-wrap {
     flex-wrap: wrap;
   }
@@ -8223,6 +8208,9 @@
   .py-1\.5 {
     padding-block: calc(var(--spacing) * 1.5);
   }
+  .py-2 {
+    padding-block: calc(var(--spacing) * 2);
+  }
   .py-3 {
     padding-block: calc(var(--spacing) * 3);
   }
@@ -9991,6 +9979,21 @@
       }
     }
   }
+  .sm\:flex-row {
+    @media (width >= 40rem) {
+      flex-direction: row;
+    }
+  }
+  .sm\:items-center {
+    @media (width >= 40rem) {
+      align-items: center;
+    }
+  }
+  .sm\:justify-between {
+    @media (width >= 40rem) {
+      justify-content: space-between;
+    }
+  }
   .md\:col-span-2 {
     @media (width >= 48rem) {
       grid-column: span 2 / span 2;
@@ -10001,11 +10004,51 @@
       grid-column: span 4 / span 4;
     }
   }
+  .md\:mx-auto {
+    @media (width >= 48rem) {
+      margin-inline: auto;
+    }
+  }
   .md\:flex {
     @media (width >= 48rem) {
       display: flex;
     }
   }
+  .md\:hidden {
+    @media (width >= 48rem) {
+      display: none;
+    }
+  }
+  .md\:inline {
+    @media (width >= 48rem) {
+      display: inline;
+    }
+  }
+  .md\:h-14 {
+    @media (width >= 48rem) {
+      height: calc(var(--spacing) * 14);
+    }
+  }
+  .md\:h-24 {
+    @media (width >= 48rem) {
+      height: calc(var(--spacing) * 24);
+    }
+  }
+  .md\:w-auto {
+    @media (width >= 48rem) {
+      width: auto;
+    }
+  }
+  .md\:w-xs {
+    @media (width >= 48rem) {
+      width: var(--container-xs);
+    }
+  }
+  .md\:flex-none {
+    @media (width >= 48rem) {
+      flex: none;
+    }
+  }
   .md\:grid-cols-2 {
     @media (width >= 48rem) {
       grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -10016,6 +10059,11 @@
       grid-template-columns: repeat(4, minmax(0, 1fr));
     }
   }
+  .md\:flex-nowrap {
+    @media (width >= 48rem) {
+      flex-wrap: nowrap;
+    }
+  }
   .lg\:drawer-open {
     @media (width >= 64rem) {
       @layer daisyui.l1.l2.l3 {

internal/templates/components/equipment-header.tmpl

@@ -16,7 +16,10 @@
         </div>
       </div>
       <div class="dropdown dropdown-end">
-        <div tabindex="0" role="button" class="btn btn-ghost">More ▾</div>
+        <div tabindex="0" role="button" class="btn btn-ghost">
+          <span class="md:hidden w-4 h-4">{{ template "dot-menu-icon" . }}</span>
+          <span class="hidden md:inline">More ▾</span>
+        </div>
         <ul tabindex="0" class="dropdown-content menu bg-base-100 rounded-box shadow-sm border border-base-200 w-40 p-1 z-10">
           <li>
             <button

internal/templates/layouts/settings.tmpl

@@ -3,13 +3,13 @@
   <div class="drawer lg:drawer-open min-h-[calc(100vh-4rem)]">
     <input id="settings-drawer" type="checkbox" class="drawer-toggle" />
     <div class="drawer-content flex flex-col max-w-5xl mx-auto w-full">
-      <div class="flex items-center gap-2 px-4 py-3 border-b border-base-300 lg:hidden">
+      <div class="flex items-center gap-2 py-3 border-b border-base-300 lg:hidden">
         <label for="settings-drawer" class="btn btn-ghost drawer-button">
           {{ template "menu-icon" . }}
           Settings
         </label>
       </div>
-      <main class="flex-1 p-8">{{ template "page" . }}</main>
+      <main class="flex-1 p-4">{{ template "page" . }}</main>
     </div>
     <div class="drawer-side z-10">
       <label for="settings-drawer" aria-label="close sidebar" class="drawer-overlay"></label>

internal/templates/pages/equipment/index.tmpl

@@ -2,7 +2,7 @@
 
 {{ define "page" }}
 <div class="w-full bg-base-200 border-b border-base-300">
-  <div class="max-w-5xl mx-auto px-4 h-24 flex items-center justify-between">
+  <div class="max-w-5xl md:mx-auto px-4 py-3 md:h-24 flex flex-row items-center justify-between gap-2">
     <div>
       <h3>All Items</h3>
       <div class="text-sm text-base-content/50 font-mono">
@@ -11,9 +11,12 @@
         <span>{{ len .Data.Categories }} categories</span>
       </div>
     </div>
-    <div class="flex gap-2">
+    <div class="flex gap-2 shrink-0">
       <div class="dropdown dropdown-end">
-        <div tabindex="0" role="button" class="btn btn-ghost">More ▾</div>
+        <div tabindex="0" role="button" class="btn btn-ghost">
+          <span class="md:hidden w-4 h-4">{{ template "dot-menu-icon" . }}</span>
+          <span class="hidden md:inline">More ▾</span>
+        </div>
         <ul tabindex="0" class="dropdown-content menu bg-base-100 rounded-box z-1 w-48 p-2 shadow border border-base-300">
           <li>
             <a href="{{ .Data.PrintURL }}" target="_blank">
@@ -35,18 +38,21 @@
           </li>
         </ul>
       </div>
-      <a class="btn btn-primary" href="/orgs/{{ .Data.OrgID }}/equipment/new">+ Add Item</a>
+      <a class="btn btn-primary" href="/orgs/{{ .Data.OrgID }}/equipment/new">
+        <span class="md:hidden">+</span>
+        <span class="hidden md:inline">+ Add Item</span>
+      </a>
     </div>
   </div>
 </div>
 <div class="w-full bg-base-100 border-b border-base-200">
-  <div class="max-w-5xl mx-auto px-4 h-14 flex gap-1 items-center overflow-x-auto scrollbar-none">
-    <form method="get" action="/orgs/{{ .Data.OrgID }}/equipment" id="filter-form" data-auto-submit class="flex items-center gap-1 flex-nowrap">
-      <label class="input input-sm w-xs shrink-0">
+  <div class="max-w-5xl mx-auto px-4 py-2 md:h-14 flex items-center">
+    <form method="get" action="/orgs/{{ .Data.OrgID }}/equipment" id="filter-form" data-auto-submit class="flex items-center gap-1 flex-wrap md:flex-nowrap w-full">
+      <label class="input w-full md:w-xs md:flex-none">
         <span class="flex text-secondary opacity-50 [&>svg]:w-4 [&>svg]:h-4">{{ template "search-icon" . }}</span>
         <input type="search" name="q" placeholder="Search" {{ if $.Data.Query }}value="{{ $.Data.Query }}"{{ end }} />
       </label>
-      <select name="category" class="select select-sm">
+      <select name="category" class="select w-full md:w-auto">
         <option value="">All categories</option>
         {{ range .Data.Categories }}
         <option value="{{ .Name }}" {{ if eq $.Data.Category .Name }}selected{{ end }}>{{ .Name }}</option>
@@ -63,15 +69,14 @@
         <tr>
           <th></th>
           <th>NAME</th>
-          <th class="text-right">CATEGORY</th>
           <th class="text-right">STOCK</th>
         </tr>
       </thead>
       <tbody>
         {{ range .Data.Inventories }}
         <tr>
           <td class="w-16 items-center">
-            <div class="w-12 h-12 rounded-md border-2 border-base-200 overflow-hidden flex items-center justify-center">
+             <div class="w-16 h-16 bg-base-200 rounded-lg border-dashed border-2 border-base-300 overflow-hidden flex items-center justify-center">
               {{ if .ImageURL }}
               <button type="button" class="cursor-pointer w-full h-full" data-modal-target="photo-viewer-dialog" data-photo-src="{{ .ImageURL }}">
                 <img src="{{ .ImageURL }}" alt="{{ .Name }}" class="w-full h-full object-contain" />
@@ -88,13 +93,9 @@
             <div class="flex items-center gap-1.5">
               <span class="text-xs text-secondary">{{ .Type.Label }}</span>
               {{ if eq .Kind 2 }}<span class="text-xs text-secondary">• Combination</span>{{ end }}
+              <span class="text-xs text-secondary">• <a href="/orgs/{{ $.Data.OrgID }}/settings/equipment-categories/{{ .CategoryID }}" class="link link-hover">{{ .CategoryName }}</a></span>
             </div>
           </td>
-          <td>
-            <span class="inline-flex items-center gap-1.5">
-              <a href="/orgs/{{ $.Data.OrgID }}/settings/equipment-categories/{{ .CategoryID }}" class="link link-hover">{{ .CategoryName }}</a>
-            </span>
-          </td>
           <td class="w-4 text-right">
             {{ if eq .Type.Label "Serialized" }}
               <a href="/orgs/{{ $.Data.OrgID }}/equipment/{{ .ID }}/units" class="link link-hover">{{ .TotalStock }}</a>