lukas/timetracker
1
0
Fork 0
Code Issues 27 Pull Requests 4 Actions Packages Projects 1 Releases 20 Wiki Activity

improve pagination

Browse Source
This commit is contained in:
Lukáš Kucharczyk
2024-08-09 11:47:10 +02:00
parent 1c28950b53
commit d84b67c460
8 changed files with 70 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
games/templates/base.html
View File

@ -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 %}

10
games/templates/components/simple_table.html
View File

@ -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>

6
games/templates/components/table_row.html
View File

@ -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>

2
games/templates/components/table_td.html
View File

@ -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>

4
games/templates/list_purchases.html
View File

@ -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 %}