responsive friendly ui fixes

basicmachines-co · Oct 16, 2024 · 9fe5248 · 9fe5248
1 parent b01eab1
commit 9fe5248
Show file tree

Hide file tree

Showing 8 changed files with 18 additions and 15 deletions.
diff --git a/web/components/Pagination.jinja b/web/components/Pagination.jinja
@@ -17,9 +17,8 @@
     </p>
   </div>
   <!-- Dropdown to select page size -->
-  <!-- Navigation buttons for previous/next pages -->
-  <div class="flex flex-1 justify-between sm:justify-end">
-    <div class="gap-2">
+  <div class="flex flex-col sm:flex-row flex-1 justify-between sm:justify-end space-y-2 sm:space-y-0 sm:space-x-2">
+    <div class="flex items-center space-x-2">
       <span class="text-sm text-gray-700 dark:text-gray-200">Rows per page:</span>
       <!-- note: Sadly, the Select component does not play well with htmx -->
       <select
@@ -34,6 +33,9 @@
         <option value="25" {% if page.page_size == 25 %}selected{% endif %}>25</option>
         <option value="50" {% if page.page_size == 50 %}selected{% endif %}>50</option>
       </select>
+    </div>
+    <!-- Navigation buttons for previous/next pages -->
+    <div class="flex justify-between sm:justify-end space-x-2">
       <Button
         hx-get={{ page.previous_page }}
           hx-target="#user_list"

diff --git a/web/components/ui/CardContent.jinja b/web/components/ui/CardContent.jinja
@@ -1,4 +1,4 @@
 {# def
     className: str = ""
 #}
-<div class="{{ className }} p-6 pt-0" {{ attrs.render() }}>{{ content }}</div>
+<div class="{{ className }} py-6 px-4 md:px-6 pt-0" {{ attrs.render() }}>{{ content }}</div>
diff --git a/web/components/ui/CardFooter.jinja b/web/components/ui/CardFooter.jinja
@@ -1,4 +1,4 @@
 {# def
     className: str = ""
 #}
-<div class="{{ className }} flex items-center p-6 pt-0" {{ attrs.render() }}>{{ content }}</div>
+<div class="{{ className }} flex items-center p-2 md:p-6 pt-0" {{ attrs.render() }}>{{ content }}</div>
diff --git a/web/components/ui/CardHeader.jinja b/web/components/ui/CardHeader.jinja
@@ -1,4 +1,4 @@
 {# def
     className: str = ""
 #}
-<div class="{{ className }} flex flex-col space-y-2 p-6" {{ attrs.render() }}>{{ content }}</div>
+<div class="{{ className }} flex flex-col space-y-2 py-6 px-4 md:px-6" {{ attrs.render() }}>{{ content }}</div>
diff --git a/web/components/ui/DescriptionDetails.jinja b/web/components/ui/DescriptionDetails.jinja
@@ -2,7 +2,7 @@
   className: str = ""
 #}
 <dd
-  class="mt-1 text-sm leading-6 text-gray-700 dark:text-gray-200 sm:col-span-2 sm:mt-0" {{ className }}
+  class="text-sm leading-6 text-gray-700 dark:text-gray-200 sm:col-span-2" {{ className }}
   {{ attrs.render() }}
 >
   {{ content }}

diff --git a/web/components/ui/DialogFooter.jinja b/web/components/ui/DialogFooter.jinja
@@ -2,6 +2,6 @@
     className: str = "",
 #}
 <!-- DialogFooter -->
-<div class="{{ className }} flex flex-col-reverse pt-2 sm:flex-row sm:justify-end sm:space-x-2">
+<div class="{{ className }} flex flex-col-reverse pt-2 sm:flex-row sm:justify-end gap-2">
   {{ content }}
 </div>
diff --git a/web/components/user/UserDetailView.jinja b/web/components/user/UserDetailView.jinja
@@ -2,33 +2,34 @@
   user,
   hx_swap_oob: bool = False
 #}
+{% set class="py-6 grid grid-cols-3 gap-2 sm:gap-4" %}
 <section id="user_detail">
   <DescriptionList>
-    <div class="py-6 sm:grid sm:grid-cols-3 sm:gap-4">
+    <div class="{{ class }}">
       <DescriptionTerm>
         Full Name
       </DescriptionTerm>
       <DescriptionDetails id="full_name">
         {{ user.full_name }}
       </DescriptionDetails>
     </div>
-    <div class="py-6 sm:grid sm:grid-cols-3 sm:gap-4">
+    <div class="{{ class }}">
       <DescriptionTerm>
         Email address
       </DescriptionTerm>
       <DescriptionDetails id="email">
         {{ user.email }}
       </DescriptionDetails>
     </div>
-    <div class="py-6 sm:grid sm:grid-cols-3 sm:gap-4">
+    <div class="{{ class }}">
       <DescriptionTerm>
         Status
       </DescriptionTerm>
       <DescriptionDetails id="status">
         <Badge>{{ user.status | capitalize }}</Badge>
       </DescriptionDetails>
     </div>
-    <div class="py-6 sm:grid sm:grid-cols-3 sm:gap-4">
+    <div class="{{ class }}">
       <DescriptionTerm>
         Role
       </DescriptionTerm>

diff --git a/web/layouts/AuthLayout.jinja b/web/layouts/AuthLayout.jinja
@@ -7,16 +7,16 @@
       <!-- Left-aligned section for logo and menu links -->
       <div class="flex">
         <!-- Right-aligned section for dark mode toggle and profile dropdown -->
-        <div class="hidden sm:ml-6 sm:flex sm:items-center">
+        <div class="sm:ml-6 sm:flex sm:items-center">
           <ModeToggle />
         </div>
       </div>
     </div>
     <main>
       <!-- centered on page -->
-      <div class="mx-auto max-w-7xl p-8 sm:px-6 lg:px-8">
+      <div class="mx-auto max-w-7xl md:p-8 sm:px-6 lg:px-8">
         <!-- heading -->
-        <div class="min-h-full flex items-center justify-center px-6 lg:px-8 py-12">
+        <div class="min-h-full flex items-center justify-center px-6 py-4 lg:px-8 lg:py-12">
           <SquareTerminal className="h-12 w-12" />
         </div>
         <!-- notification popup placeholder -->