common/input.css

@@ -70,15 +70,9 @@ form label {
 }
 
 @layer utilities {
-  .min-w-20char {
-    min-width: 20ch;
-  }
   .max-w-20char {
     max-width: 20ch;
   }
-  .min-w-30char {
-    min-width: 30ch;
-  }
   .max-w-30char {
     max-width: 30ch;
   }

games/purchaseviews.py

@@ -15,24 +15,15 @@ from games.views import dateformat
 @login_required
 def list_purchases(request: HttpRequest) -> HttpResponse:
     context: dict[Any, Any] = {}
+    paginator = Paginator(Purchase.objects.order_by("created_at"), 10)
     page_number = request.GET.get("page", 1)
-    limit = request.GET.get("limit", 10)
+    page_obj = paginator.get_page(page_number)
-    purchases = Purchase.objects.order_by("-date_purchased")
+    purchases = page_obj.object_list
-    page_obj = None
-    if int(limit) != 0:
-        paginator = Paginator(Purchase.objects.order_by("-date_purchased"), limit)
-        page_obj = paginator.get_page(page_number)
-        purchases = page_obj.object_list
-
     context = {
         "title": "Manage purchases",
-        "page_obj": page_obj or None,
+        "page_obj": page_obj,
-        "elided_page_range": (
+        "elided_page_range": page_obj.paginator.get_elided_page_range(
-            page_obj.paginator.get_elided_page_range(
+            page_number, on_each_side=1, on_ends=1
-                page_number, on_each_side=1, on_ends=1
-            )
-            if page_obj
-            else None
         ),
         "data": {
             "columns": [

games/static/base.css

@@ -1511,10 +1511,6 @@ input:checked + .toggle-bg {
   max-width: 20rem;
 }
 
-.max-w-screen-2xl {
-  max-width: 1536px;
-}
-
 .max-w-screen-lg {
   max-width: 1024px;
 }
@@ -1691,10 +1687,6 @@ input:checked + .toggle-bg {
   white-space: nowrap;
 }
 
-.text-ellipsis {
-  text-overflow: ellipsis;
-}
-
 .whitespace-nowrap {
   white-space: nowrap;
 }
@@ -1829,16 +1821,6 @@ input:checked + .toggle-bg {
   background-color: rgb(255 255 255 / 0.5);
 }
 
-.bg-gray-300 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(209 213 219 / var(--tw-bg-opacity));
-}
-
-.bg-gray-400 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(156 163 175 / var(--tw-bg-opacity));
-}
-
 .p-1 {
   padding: 0.25rem;
 }
@@ -1901,6 +1883,10 @@ input:checked + .toggle-bg {
   padding-bottom: 1rem;
 }
 
+.pb-16 {
+  padding-bottom: 4rem;
+}
+
 .pl-3 {
   padding-left: 0.75rem;
 }
@@ -1917,6 +1903,10 @@ input:checked + .toggle-bg {
   padding-top: 0.5rem;
 }
 
+.pt-4 {
+  padding-top: 1rem;
+}
+
 .pt-8 {
   padding-top: 2rem;
 }
@@ -2077,16 +2067,6 @@ input:checked + .toggle-bg {
   color: rgb(250 202 21 / var(--tw-text-opacity));
 }
 
-.text-gray-300 {
-  --tw-text-opacity: 1;
-  color: rgb(209 213 219 / var(--tw-text-opacity));
-}
-
-.text-gray-100 {
-  --tw-text-opacity: 1;
-  color: rgb(243 244 246 / var(--tw-text-opacity));
-}
-
 .underline {
   text-decoration-line: underline;
 }
@@ -2180,10 +2160,6 @@ input:checked + .toggle-bg {
   max-width: 20ch;
 }
 
-.max-w-30char {
-  max-width: 30ch;
-}
-
 .\[a-zA-Z\:\\-\] {
   a-z-a--z: \-;
 }
@@ -2756,11 +2732,6 @@ textarea:disabled:is(.dark *) {
   color: rgb(107 114 128 / var(--tw-text-opacity));
 }
 
-.dark\:text-gray-600:is(.dark *) {
-  --tw-text-opacity: 1;
-  color: rgb(75 85 99 / var(--tw-text-opacity));
-}
-
 .dark\:text-slate-400:is(.dark *) {
   --tw-text-opacity: 1;
   color: rgb(148 163 184 / var(--tw-text-opacity));
@@ -2781,11 +2752,6 @@ textarea:disabled:is(.dark *) {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
-.dark\:text-gray-200:is(.dark *) {
-  --tw-text-opacity: 1;
-  color: rgb(229 231 235 / var(--tw-text-opacity));
-}
-
 .odd\:dark\:bg-gray-900:is(.dark *):nth-child(odd) {
   --tw-bg-opacity: 1;
   background-color: rgb(17 24 39 / var(--tw-bg-opacity));
@@ -2861,11 +2827,6 @@ textarea:disabled:is(.dark *) {
   --tw-ring-color: rgb(63 131 248 / var(--tw-ring-opacity));
 }
 
-.dark\:focus\:ring-gray-700:focus:is(.dark *) {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(55 65 81 / var(--tw-ring-opacity));
-}
-
 .dark\:focus\:ring-green-500:focus:is(.dark *) {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(14 159 110 / var(--tw-ring-opacity));
@@ -2888,10 +2849,6 @@ textarea:disabled:is(.dark *) {
     max-width: 36rem;
   }
 
-  .sm\:max-w-screen-sm {
-    max-width: 640px;
-  }
-
   .sm\:rounded-lg {
     border-radius: 0.5rem;
   }
@@ -2939,10 +2896,6 @@ textarea:disabled:is(.dark *) {
     width: auto;
   }
 
-  .md\:max-w-screen-md {
-    max-width: 768px;
-  }
-
   .md\:flex-row {
     flex-direction: row;
   }
@@ -2972,12 +2925,6 @@ textarea:disabled:is(.dark *) {
   }
 }
 
-@media (min-width: 1536px) {
-  .\32xl\:max-w-screen-2xl {
-    max-width: 1536px;
-  }
-}
-
 .rtl\:rotate-180:where([dir="rtl"], [dir="rtl"] *) {
   --tw-rotate: 180deg;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));

games/templates/base.html

@@ -16,16 +16,8 @@
         {% django_htmx_script %}
         <link rel="stylesheet" href="{% static 'base.css' %}" />
         <script src="https://cdn.jsdelivr.net/npm/flowbite@2.4.1/dist/flowbite.min.js"></script>
-        <script>
-        // On page load or when changing themes, best to add inline in `head` to avoid FOUC
-        if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
-            document.documentElement.classList.add('dark');
-        } else {
-            document.documentElement.classList.remove('dark')
-        }
-        </script>
     </head>
-    <body hx-indicator="#indicator">
+    <body class="dark" hx-indicator="#indicator">
         <img id="indicator"
              src="{% static 'icons/loading.png' %}"
              class="absolute right-3 top-3 animate-spin htmx-indicator"
@@ -47,25 +39,6 @@
                     </a>
                     <div class="w-full md:block md:w-auto">
                         <ul class="flex flex-col md:flex-row p-4 mt-4 dark:text-white">
-                            <button id="theme-toggle"
-                                    type="button"
-                                    class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5">
-                                <svg id="theme-toggle-dark-icon"
-                                     class="hidden w-5 h-5"
-                                     fill="currentColor"
-                                     viewBox="0 0 20 20"
-                                     xmlns="http://www.w3.org/2000/svg">
-                                    <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
-                                </svg>
-                                <svg id="theme-toggle-light-icon"
-                                     class="hidden w-5 h-5"
-                                     fill="currentColor"
-                                     viewBox="0 0 20 20"
-                                     xmlns="http://www.w3.org/2000/svg">
-                                    <path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" fill-rule="evenodd" clip-rule="evenodd">
-                                    </path>
-                                </svg>
-                            </button>
                             <li class="relative group">
                                 {% if user.is_authenticated %}
                                     <a class="block py-2 pl-3 pr-4 hover:underline"
@@ -124,8 +97,7 @@
                                     </li>
                                     <li>
                                         <a class="block py-2 pl-3 pr-4 hover:underline"
-                                           href="{% url 'list_sessions' %}">All
+                                           href="{% url 'list_sessions' %}">All Sessions</a>
-                                        Sessions</a>
                                     </li>
                                     <li>
                                         <a class="block py-2 pl-3 pr-4 hover:underline"
@@ -137,58 +109,15 @@
                     </div>
                 </div>
             </nav>
-            <div class="flex flex-1 flex-col dark:bg-gray-800 pt-8">
+            <div class="flex flex-1 dark:bg-gray-800 justify-center pt-8 pb-16">
                 {% block content %}
                     No content here.
                 {% endblock content %}
             </div>
             {% load version %}
-            <span class="fixed left-2 bottom-2 text-xs text-slate-300 dark:text-slate-600">{% version %} ({% version_date
+            <span class="fixed left-2 bottom-2 text-xs text-slate-300 dark:text-slate-600">{% version %} ({% version_date %})</span>
-            %})</span>
         </div>
         {% block scripts %}
         {% endblock scripts %}
-        <script>
-        var themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon');
-        var themeToggleLightIcon = document.getElementById('theme-toggle-light-icon');
-
-        // Change the icons inside the button based on previous settings
-        if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
-            themeToggleLightIcon.classList.remove('hidden');
-        } else {
-            themeToggleDarkIcon.classList.remove('hidden');
-        }
-
-        var themeToggleBtn = document.getElementById('theme-toggle');
-
-        themeToggleBtn.addEventListener('click', function () {
-
-            // toggle icons inside button
-            themeToggleDarkIcon.classList.toggle('hidden');
-            themeToggleLightIcon.classList.toggle('hidden');
-
-            // if set via local storage previously
-            if (localStorage.getItem('color-theme')) {
-                if (localStorage.getItem('color-theme') === 'light') {
-                    document.documentElement.classList.add('dark');
-                    localStorage.setItem('color-theme', 'dark');
-                } else {
-                    document.documentElement.classList.remove('dark');
-                    localStorage.setItem('color-theme', 'light');
-                }
-
-                // if NOT set via local storage previously
-            } else {
-                if (document.documentElement.classList.contains('dark')) {
-                    document.documentElement.classList.remove('dark');
-                    localStorage.setItem('color-theme', 'light');
-                } else {
-                    document.documentElement.classList.add('dark');
-                    localStorage.setItem('color-theme', 'dark');
-                }
-            }
-
-        });
-        </script>
     </body>
 </html>

games/templates/components/simple_table.html

@@ -1,51 +1,48 @@
-<div class="shadow-md sm:rounded-lg" hx-boost="false">
+<div class="relative overflow-x-auto shadow-md sm:rounded-lg"
-    <div class="relative overflow-x-auto">
+     hx-boost="false">
-        <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
+    <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
-            <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
+        <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
-                <tr>
+            <tr>
-                    {% for column in columns %}<th scope="col" class="px-6 py-3">{{ column }}</th>{% endfor %}
+                {% for column in columns %}<th scope="col" class="px-6 py-3">{{ column }}</th>{% endfor %}
-                </tr>
+            </tr>
-            </thead>
+        </thead>
-            <tbody>
+        <tbody>
-                {% for row in rows %}
+            {% for row in rows %}
-                    {% table_row data=row %}
+                {% table_row data=row %}
+            {% endfor %}
+        </tbody>
+    </table>
+    <nav class="flex items-center flex-column flex-wrap md:flex-row justify-between pt-4"
+         aria-label="Table navigation">
+        <span class="text-sm font-normal text-gray-500 dark:text-gray-400 mb-4 md:mb-0 block w-full md:inline md:w-auto">Showing <span class="font-semibold text-gray-900 dark:text-white">{{ page_obj.paginator.page_range.start }}-{{ page_obj.paginator.page_range.stop }}</span> of <span class="font-semibold text-gray-900 dark:text-white">{{ page_obj.paginator.count }}</span></span>
+        <ul class="inline-flex -space-x-px rtl:space-x-reverse text-sm h-8">
+            <li>
+                {% if page_obj.has_previous %}
+                    <a href="?page={{ page_obj.previous_page_number }}"
+                       class="flex items-center justify-center px-3 h-8 ms-0 leading-tight text-gray-500 bg-white border border-gray-300 rounded-s-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">Previous</a>
+                {% else %}
+                    <a aria-current="page"
+                       class="cursor-not-allowed flex items-center justify-center px-3 h-8 leading-tight text-gray-500 bg-white border border-gray-300 rounded-s-lg dark:bg-gray-900 dark:border-gray-700 dark:text-gray-400">Previous</a>
+                {% endif %}
+                {% for page in elided_page_range %}
+                    <li>
+                        {% if page != page_obj.number %}
+                            <a href="?page={{ page }}"
+                               class="flex items-center justify-center px-3 h-8 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">{{ page }}</a>
+                        {% else %}
+                            <a aria-current="page"
+                               class="cursor-not-allowed flex items-center justify-center px-3 h-8 leading-tight text-gray-500 bg-white border border-gray-300 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-400">{{ page }}</a>
+                        {% endif %}
+                    </li>
                 {% endfor %}
-            </tbody>
+                {% if page_obj.has_next %}
-        </table>
+                    <a href="?page={{ page_obj.next_page_number }}"
-    </div>
+                       class="flex items-center justify-center px-3 h-8 leading-tight text-gray-500 bg-white border border-gray-300 rounded-e-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">Next</a>
-    {% if page_obj %}
+                {% else %}
-        <nav class="flex items-center flex-column md:flex-row justify-between px-6 py-4"
+                    <a aria-current="page"
-             aria-label="Table navigation">
+                       class="cursor-not-allowed flex items-center justify-center px-3 h-8 leading-tight text-gray-500 bg-white border border-gray-300 rounded-e-lg dark:bg-gray-900 dark:border-gray-700 dark:text-gray-400">Next</a>
-            <span class="text-sm font-normal text-gray-500 dark:text-gray-400 mb-4 md:mb-0 block w-full md:inline md:w-auto">Showing <span class="font-semibold text-gray-900 dark:text-white">{{ page_obj.start_index }}</span>—<span class="font-semibold text-gray-900 dark:text-white">{{ page_obj.end_index }}</span> of <span class="font-semibold text-gray-900 dark:text-white">{{ page_obj.paginator.count }}</span></span>
+                {% endif %}
-            <ul class="inline-flex -space-x-px rtl:space-x-reverse text-sm h-8">
+            </li>
-                <li>
+        </ul>
-                    {% if page_obj.has_previous %}
+    </nav>
-                        <a href="?page={{ page_obj.previous_page_number }}"
-                           class="flex items-center justify-center px-3 h-8 ms-0 leading-tight text-gray-500 bg-white border border-gray-300 rounded-s-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">Previous</a>
-                    {% else %}
-                        <a aria-current="page"
-                           class="cursor-not-allowed flex items-center justify-center px-3 h-8 leading-tight text-gray-300 bg-white border border-gray-300 rounded-s-lg dark:bg-gray-800 dark:border-gray-700 dark:text-gray-600">Previous</a>
-                    {% endif %}
-                    {% for page in elided_page_range %}
-                        <li>
-                            {% if page != page_obj.number %}
-                                <a href="?page={{ page }}"
-                                   class="flex items-center justify-center px-3 h-8 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">{{ page }}</a>
-                            {% else %}
-                                <a aria-current="page"
-                                   class="cursor-not-allowed flex items-center justify-center px-3 h-8 leading-tight text-white border bg-gray-400 border-gray-300 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-200">{{ page }}</a>
-                            {% endif %}
-                        </li>
-                    {% endfor %}
-                    {% if page_obj.has_next %}
-                        <a href="?page={{ page_obj.next_page_number }}"
-                           class="flex items-center justify-center px-3 h-8 leading-tight text-gray-500 bg-white border border-gray-300 rounded-e-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">Next</a>
-                    {% else %}
-                        <a aria-current="page"
-                           class="cursor-not-allowed flex items-center justify-center px-3 h-8 leading-tight text-gray-300 bg-white border border-gray-300 rounded-e-lg dark:bg-gray-800 dark:border-gray-700 dark:text-gray-600">Next</a>
-                    {% endif %}
-                </li>
-            </ul>
-        </nav>
-    {% endif %}
 </div>

games/templates/components/table_row.html

@@ -2,9 +2,7 @@
 {% for td in data %}
     {% if forloop.first %}
         <th scope="row"
-            class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white min-w-30-char max-w-30char text-ellipsis overflow-hidden">
+            class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">{{ td }}</th>
-            <span title="{{ td }}">{{ td }}</span>
-        </th>
     {% else %}
         {% #table_td %}
         {{ td }}
@@ -12,6 +10,6 @@
     {% endif %}
 {% endfor %}
 {% endfragment %}
-<tr class="odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 border-b">
+<tr class="odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800 border-b dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 border-b">
     {{ children|default:default_content }}
 </tr>

games/templates/components/table_td.html

@@ -1 +1 @@
-<td class="px-6 py-4 min-w-20-char max-w-20-char">{{ children }}</td>
+<td class="px-6 py-4">{{ children }}</td>

games/templates/list_purchases.html

@@ -4,7 +4,5 @@
     {{ title }}
 {% endblock title %}
 {% block content %}
-    <div class="2xl:max-w-screen-2xl md:max-w-screen-md sm:max-w-screen-sm self-center">
+    {% simple_table columns=data.columns rows=data.rows page_obj=page_obj elided_page_range=elided_page_range %}
-        {% simple_table columns=data.columns rows=data.rows page_obj=page_obj elided_page_range=elided_page_range %}
-    </div>
 {% endblock content %}