From d84b67c46023147d26e96443ab10cfbc1c34580b Mon Sep 17 00:00:00 2001
From: Lukas Kucharczyk <lukas@kucharczyk.xyz>
Date: Fri, 9 Aug 2024 11:47:10 +0200
Subject: [PATCH] improve pagination

---
 common/input.css                             |  6 +++
 games/purchaseviews.py                       |  2 +-
 games/static/base.css                        | 49 ++++++++++++++++++++
 games/templates/base.html                    |  2 +-
 games/templates/components/simple_table.html | 10 ++--
 games/templates/components/table_row.html    |  6 ++-
 games/templates/components/table_td.html     |  2 +-
 games/templates/list_purchases.html          |  4 +-
 8 files changed, 70 insertions(+), 11 deletions(-)

diff --git a/common/input.css b/common/input.css
index 41edc14..75e4442 100644
--- a/common/input.css
+++ b/common/input.css
@@ -70,9 +70,15 @@ 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;
   }
diff --git a/games/purchaseviews.py b/games/purchaseviews.py
index 0f68a5b..a268d3d 100644
--- a/games/purchaseviews.py
+++ b/games/purchaseviews.py
@@ -15,7 +15,7 @@ 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)
+    paginator = Paginator(Purchase.objects.order_by("-date_purchased"), 10)
     page_number = request.GET.get("page", 1)
     page_obj = paginator.get_page(page_number)
     purchases = page_obj.object_list
diff --git a/games/static/base.css b/games/static/base.css
index 75bea80..fef6550 100644
--- a/games/static/base.css
+++ b/games/static/base.css
@@ -1523,6 +1523,18 @@ input:checked + .toggle-bg {
   max-width: 20rem;
 }
 
+.max-w-screen-sm {
+  max-width: 640px;
+}
+
+.max-w-screen-xl {
+  max-width: 1280px;
+}
+
+.max-w-screen-2xl {
+  max-width: 1536px;
+}
+
 .flex-1 {
   flex: 1 1 0%;
 }
@@ -1603,6 +1615,10 @@ input:checked + .toggle-bg {
   grid-template-columns: repeat(7, minmax(0, 1fr));
 }
 
+.flex-row {
+  flex-direction: row;
+}
+
 .flex-col {
   flex-direction: column;
 }
@@ -1687,6 +1703,14 @@ input:checked + .toggle-bg {
   white-space: nowrap;
 }
 
+.overflow-ellipsis {
+  text-overflow: ellipsis;
+}
+
+.text-ellipsis {
+  text-overflow: ellipsis;
+}
+
 .whitespace-nowrap {
   white-space: nowrap;
 }
@@ -1833,6 +1857,10 @@ input:checked + .toggle-bg {
   padding: 1rem;
 }
 
+.p-6 {
+  padding: 1.5rem;
+}
+
 .px-2 {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
@@ -1911,6 +1939,10 @@ input:checked + .toggle-bg {
   padding-top: 2rem;
 }
 
+.pb-4 {
+  padding-bottom: 1rem;
+}
+
 .text-left {
   text-align: left;
 }
@@ -2160,6 +2192,10 @@ input:checked + .toggle-bg {
   max-width: 20ch;
 }
 
+.max-w-30char {
+  max-width: 30ch;
+}
+
 .\[a-zA-Z\:\\-\] {
   a-z-a--z: \-;
 }
@@ -2419,6 +2455,14 @@ textarea:disabled:is(.dark *) {
   }  
 } */
 
+.last\:border-b:last-child {
+  border-bottom-width: 1px;
+}
+
+.last\:border-b-0:last-child {
+  border-bottom-width: 0px;
+}
+
 .odd\:bg-white:nth-child(odd) {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
@@ -2752,6 +2796,11 @@ textarea:disabled:is(.dark *) {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+.dark\:text-gray-600:is(.dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(75 85 99 / 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));
diff --git a/games/templates/base.html b/games/templates/base.html
index edc6e7d..ee17f8d 100644
--- a/games/templates/base.html
+++ b/games/templates/base.html
@@ -109,7 +109,7 @@
                     </div>
                 </div>
             </nav>
-            <div class="flex flex-1 dark:bg-gray-800 justify-center pt-8 pb-16">
+            <div class="flex flex-1 flex-col dark:bg-gray-800 pt-8">
                 {% block content %}
                     No content here.
                 {% endblock content %}
diff --git a/games/templates/components/simple_table.html b/games/templates/components/simple_table.html
index c412e79..8dd49df 100644
--- a/games/templates/components/simple_table.html
+++ b/games/templates/components/simple_table.html
@@ -12,9 +12,9 @@
             {% endfor %}
         </tbody>
     </table>
-    <nav class="flex items-center flex-column flex-wrap md:flex-row justify-between pt-4"
+    <nav class="flex items-center flex-column flex-wrap md:flex-row justify-between px-6 py-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>
+        <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>
         <ul class="inline-flex -space-x-px rtl:space-x-reverse text-sm h-8">
             <li>
                 {% if page_obj.has_previous %}
@@ -22,7 +22,7 @@
                        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>
+                       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-600">Previous</a>
                 {% endif %}
                 {% for page in elided_page_range %}
                     <li>
@@ -31,7 +31,7 @@
                                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>
+                               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-600">{{ page }}</a>
                         {% endif %}
                     </li>
                 {% endfor %}
@@ -40,7 +40,7 @@
                        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-500 bg-white border border-gray-300 rounded-e-lg dark:bg-gray-900 dark:border-gray-700 dark:text-gray-400">Next</a>
+                       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-600">Next</a>
                 {% endif %}
             </li>
         </ul>
diff --git a/games/templates/components/table_row.html b/games/templates/components/table_row.html
index 049c402..b5ae622 100644
--- a/games/templates/components/table_row.html
+++ b/games/templates/components/table_row.html
@@ -2,7 +2,9 @@
 {% 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">{{ td }}</th>
+            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">
+            <span title="{{ td }}">{{ td }}</span>
+        </th>
     {% else %}
         {% #table_td %}
         {{ td }}
@@ -10,6 +12,6 @@
     {% endif %}
 {% endfor %}
 {% endfragment %}
-<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">
+<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">
     {{ children|default:default_content }}
 </tr>
diff --git a/games/templates/components/table_td.html b/games/templates/components/table_td.html
index e4d7271..78cd369 100644
--- a/games/templates/components/table_td.html
+++ b/games/templates/components/table_td.html
@@ -1 +1 @@
-<td class="px-6 py-4">{{ children }}</td>
+<td class="px-6 py-4 min-w-20-char max-w-20-char">{{ children }}</td>
diff --git a/games/templates/list_purchases.html b/games/templates/list_purchases.html
index 67cdc3c..89fc4e8 100644
--- a/games/templates/list_purchases.html
+++ b/games/templates/list_purchases.html
@@ -4,5 +4,7 @@
     {{ title }}
 {% endblock title %}
 {% block content %}
-    {% simple_table columns=data.columns rows=data.rows page_obj=page_obj elided_page_range=elided_page_range %}
+    <div class="max-w-screen-2xl min-w-screen-2xl self-center">
+        {% simple_table columns=data.columns rows=data.rows page_obj=page_obj elided_page_range=elided_page_range %}
+    </div>
 {% endblock content %}