only overflow table, not paginator, improve styling

2024-08-09 12:42:54 +02:00
parent 496c99ccf1
commit c15eaca205
3 changed files with 59 additions and 19 deletions
--- a/games/static/base.css
+++ b/games/static/base.css
@ -1829,6 +1829,16 @@ 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;
 }
@ -2067,6 +2077,16 @@ 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;
 }
@ -2761,6 +2781,11 @@ 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));
@ -2863,6 +2888,10 @@ textarea:disabled:is(.dark *) {
    max-width: 36rem;
  }

+  .sm\:max-w-screen-sm {
+    max-width: 640px;
+  }
+
  .sm\:rounded-lg {
    border-radius: 0.5rem;
  }
@ -2910,6 +2939,10 @@ textarea:disabled:is(.dark *) {
    width: auto;
  }

+  .md\:max-w-screen-md {
+    max-width: 768px;
+  }
+
  .md\:flex-row {
    flex-direction: row;
  }
@ -2939,6 +2972,12 @@ 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));
--- a/games/templates/components/simple_table.html
+++ b/games/templates/components/simple_table.html
@ -1,19 +1,20 @@
-<div class="relative overflow-x-auto shadow-md sm:rounded-lg"
-     hx-boost="false">
-    <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">
-            <tr>
-                {% for column in columns %}<th scope="col" class="px-6 py-3">{{ column }}</th>{% endfor %}
-            </tr>
-        </thead>
-        <tbody>
-            {% for row in rows %}
-                {% table_row data=row %}
-            {% endfor %}
-        </tbody>
-    </table>
+<div class="shadow-md sm:rounded-lg" hx-boost="false">
+    <div class="relative overflow-x-auto">
+        <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">
+                <tr>
+                    {% for column in columns %}<th scope="col" class="px-6 py-3">{{ column }}</th>{% endfor %}
+                </tr>
+            </thead>
+            <tbody>
+                {% for row in rows %}
+                    {% table_row data=row %}
+                {% endfor %}
+            </tbody>
+        </table>
+    </div>
    {% if page_obj %}
-        <nav class="flex items-center flex-column flex-wrap md:flex-row justify-between px-6 py-4"
+        <nav class="flex items-center flex-column 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.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">
@ -23,7 +24,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-600">Previous</a>
+                           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>
@ -32,7 +33,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-600">{{ page }}</a>
+                                   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 %}
@ -41,7 +42,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-600">Next</a>
+                           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>
--- a/games/templates/list_purchases.html
+++ b/games/templates/list_purchases.html
@ -4,7 +4,7 @@
    {{ title }}
 {% endblock title %}
 {% block content %}
-    <div class="max-w-screen-2xl min-w-screen-2xl self-center">
+    <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 %}
    </div>
 {% endblock content %}