only overflow table, not paginator, improve styling
Django CI/CD / test (push) Successful in 1m5s Details
Django CI/CD / build-and-push (push) Has been skipped Details

This commit is contained in:
Lukáš Kucharczyk 2024-08-09 12:42:54 +02:00
parent 496c99ccf1
commit c15eaca205
Signed by: lukas
SSH Key Fingerprint: SHA256:vMuSwvwAvcT6htVAioMP7rzzwMQNi3roESyhv+nAxeg
3 changed files with 59 additions and 19 deletions

View File

@ -1829,6 +1829,16 @@ input:checked + .toggle-bg {
background-color: rgb(255 255 255 / 0.5); 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 { .p-1 {
padding: 0.25rem; padding: 0.25rem;
} }
@ -2067,6 +2077,16 @@ input:checked + .toggle-bg {
color: rgb(250 202 21 / var(--tw-text-opacity)); 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 { .underline {
text-decoration-line: underline; text-decoration-line: underline;
} }
@ -2761,6 +2781,11 @@ textarea:disabled:is(.dark *) {
color: rgb(255 255 255 / var(--tw-text-opacity)); 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) { .odd\:dark\:bg-gray-900:is(.dark *):nth-child(odd) {
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
background-color: rgb(17 24 39 / var(--tw-bg-opacity)); background-color: rgb(17 24 39 / var(--tw-bg-opacity));
@ -2863,6 +2888,10 @@ textarea:disabled:is(.dark *) {
max-width: 36rem; max-width: 36rem;
} }
.sm\:max-w-screen-sm {
max-width: 640px;
}
.sm\:rounded-lg { .sm\:rounded-lg {
border-radius: 0.5rem; border-radius: 0.5rem;
} }
@ -2910,6 +2939,10 @@ textarea:disabled:is(.dark *) {
width: auto; width: auto;
} }
.md\:max-w-screen-md {
max-width: 768px;
}
.md\:flex-row { .md\:flex-row {
flex-direction: 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"] *) { .rtl\:rotate-180:where([dir="rtl"], [dir="rtl"] *) {
--tw-rotate: 180deg; --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)); 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));

View File

@ -1,5 +1,5 @@
<div class="relative overflow-x-auto shadow-md sm:rounded-lg" <div class="shadow-md sm:rounded-lg" hx-boost="false">
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"> <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>
@ -12,8 +12,9 @@
{% endfor %} {% endfor %}
</tbody> </tbody>
</table> </table>
</div>
{% if page_obj %} {% 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"> 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> <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"> <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> 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 %} {% else %}
<a aria-current="page" <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 %} {% endif %}
{% for page in elided_page_range %} {% for page in elided_page_range %}
<li> <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> 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 %} {% else %}
<a aria-current="page" <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 %} {% endif %}
</li> </li>
{% endfor %} {% 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> 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 %} {% else %}
<a aria-current="page" <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 %} {% endif %}
</li> </li>
</ul> </ul>

View File

@ -4,7 +4,7 @@
{{ title }} {{ title }}
{% endblock title %} {% endblock title %}
{% block content %} {% 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 %} {% simple_table columns=data.columns rows=data.rows page_obj=page_obj elided_page_range=elided_page_range %}
</div> </div>
{% endblock content %} {% endblock content %}