Mobile admin menu, card number styling

davegaeddert · davegaeddert · commit 64e00a3f978c · 2024-01-04T12:57:52.000-06:00
diff --git a/bolt-admin/bolt/admin/assets/admin/admin.js b/bolt-admin/bolt/admin/assets/admin/admin.js
@@ -0,0 +1,14 @@
+jQuery(function($) {
+    $("[data-toggle]").on("click", function(e) {
+        e.preventDefault();
+        var targets = $(this).data("toggle").split(",");
+        $.each(targets, function(index, target) {
+            var $target = $(target);
+            if ($target.data("toggle-class")) {
+                $target.toggleClass($target.data("toggle-class"));
+            } else {
+                $target.toggle();
+            }
+        });
+    });
+});
diff --git a/bolt-admin/bolt/admin/cards/base.py b/bolt-admin/bolt/admin/cards/base.py
@@ -16,7 +16,10 @@ class Sizes(Enum):
     size: Sizes = Sizes.SMALL
     # unique_id: str  # Use for tying to dashboards, require it
 
-    title: str = ""
+    # Required fields
+    title: str
+
+    # Optional fields
     slug: str = ""
     description: str = ""
     text: str = ""
diff --git a/bolt-admin/bolt/admin/templates/admin/base.html b/bolt-admin/bolt/admin/templates/admin/base.html
@@ -12,11 +12,12 @@
     </title>
     {% tailwind_css %}
     <link href="{{ asset('admin/admin.css') }}" rel="stylesheet">
-    <script src="{{ asset('admin/chart.js') }}"></script>
     <script src="{{ asset('admin/jquery-3.6.1.slim.min.js') }}"></script>
+    <script src="{{ asset('admin/chart.js') }}" defer></script>
+    <script src="{{ asset('admin/admin.js') }}" defer></script>
 </head>
 <body class="flex min-h-screen text-black bg-stone-900">
-    <div class="fixed flex flex-col justify-between flex-shrink-0 w-64 h-full px-6 pt-6 pb-5">
+    <div id="admin-sidebar" data-toggle-class="hidden" class="fixed flex-col justify-between flex-shrink-0 hidden w-64 h-full px-6 pt-6 pb-5 lg:flex">
         <div>
             <a class="inline-flex items-center font-bold text-stone-300" href="{{ url('admin:index') }}">
                 <svg class="w-5 h-5 mr-2" width="237" height="237" viewBox="0 0 237 237" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -62,9 +63,15 @@
             <a class="hover:text-white hover:underline" href="{{ url('logout') }}">Log out</a>
         </div>
     </div>
-    <div class="flex-grow mt-3 mb-3 ml-64 mr-3 overflow-auto text-black bg-white border-l rounded-lg border-black/10">
-        <div class="flex justify-between px-8 py-4 text-xs border-b border-gray-200">
+    <div id="admin-content" data-toggle-class="fixed ml-64 -mr-64" class="flex-grow overflow-auto text-black bg-white border-l lg:rounded-lg lg:mt-3 lg:mb-3 lg:mr-3 lg:ml-64 border-black/10">
+        <div class="flex justify-between px-4 py-4 text-xs border-b border-gray-200 lg:px-8">
             <div class="flex items-center space-x-2">
+                <button type="button" data-toggle="#admin-sidebar,#admin-content" class="mr-1 lg:hidden">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="w-5 h-5 bi bi-list" viewBox="0 0 16 16">
+                        <path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5"/>
+                    </svg>
+                    <span class="sr-only">Toggle menu</span>
+                </button>
                 <a class="text-stone-500" href="{{ url ('admin:index') }}">Admin</a>
                 {% for parent in parent_view_classes %}
                 <span class="text-stone-400">/</span>
@@ -73,12 +80,12 @@
                 <span class="text-stone-400">/</span>
                 <a class="text-stone-600" href="{{ request.path }}">{{ title }}</a>
             </div>
-            <div>
+            <div class="flex items-center">
                 <a href="/">Back to app</a>
             </div>
         </div>
 
-        <div class="flex items-center justify-between px-8 mt-8">
+        <div class="flex items-center justify-between px-4 mt-8 lg:px-8">
             <div>
             {% block header %}
                 <h1 class="text-2xl font-semibold text-stone-700">
@@ -99,9 +106,9 @@ <h1 class="text-2xl font-semibold text-stone-700">
             </div>
         </div>
 
-        <div class="px-8 py-6">
+        <div class="px-4 py-6 lg:px-8">
             {% if cards %}
-            <div class="grid grid-cols-4 gap-6 mb-6">
+            <div class="grid grid-cols-1 gap-6 mb-6 sm:grid-cols-2 lg:grid-cols-4">
             {% for card in cards %}
                 <admin.Card size=card.size.value>
                     {{ render_card(card)|safe }}
diff --git a/bolt-admin/bolt/admin/templates/admin/cards/base.html b/bolt-admin/bolt/admin/templates/admin/cards/base.html
@@ -1,5 +1,5 @@
 {% block header %}
-<div class="text-sm">{{ title }}</div>
+<div>{{ title }}</div>
 {% if description %}<div class="mt-1 text-xs text-gray-500">{{ description }}</div>{% endif %}
 {% endblock %}
 
diff --git a/bolt-admin/bolt/admin/templates/admin/cards/card.html b/bolt-admin/bolt/admin/templates/admin/cards/card.html
@@ -1,9 +1,9 @@
 {% extends "admin/cards/base.html" %}
 
 {% block content %}
-<div class="mt-3">
+<div class="mt-1">
     {% if number is not none %}
-    <div class="text-4xl">
+    <div class="text-4xl font-bold">
         {{ number }}
     </div>
     {% endif %}
