Major redesign #73

Merged
lukas merged 45 commits from manage-purchases into main 2024-09-02 15:47:44 +00:00
4 changed files with 88 additions and 31 deletions
Showing only changes of commit 1c28950b53 - Show all commits

View File

@ -1,6 +1,7 @@
from typing import Any from typing import Any
from django.contrib.auth.decorators import login_required from django.contrib.auth.decorators import login_required
from django.core.paginator import Paginator
from django.db.models.manager import BaseManager from django.db.models.manager import BaseManager
from django.http import HttpRequest, HttpResponse from django.http import HttpRequest, HttpResponse
from django.shortcuts import render from django.shortcuts import render
@ -14,9 +15,16 @@ from games.views import dateformat
@login_required @login_required
def list_purchases(request: HttpRequest) -> HttpResponse: def list_purchases(request: HttpRequest) -> HttpResponse:
context: dict[Any, Any] = {} context: dict[Any, Any] = {}
purchases: BaseManager[Purchase] = Purchase.objects.all()[0:10] paginator = Paginator(Purchase.objects.order_by("created_at"), 10)
page_number = request.GET.get("page", 1)
page_obj = paginator.get_page(page_number)
purchases = page_obj.object_list
context = { context = {
"title": "Manage purchases", "title": "Manage purchases",
"page_obj": page_obj,
"elided_page_range": page_obj.paginator.get_elided_page_range(
page_number, on_each_side=1, on_ends=1
),
"data": { "data": {
"columns": [ "columns": [
"Name", "Name",

View File

@ -1370,6 +1370,10 @@ input:checked + .toggle-bg {
margin-bottom: 0.75rem; margin-bottom: 0.75rem;
} }
.mb-4 {
margin-bottom: 1rem;
}
.mb-8 { .mb-8 {
margin-bottom: 2rem; margin-bottom: 2rem;
} }
@ -1382,6 +1386,10 @@ input:checked + .toggle-bg {
margin-right: 1rem; margin-right: 1rem;
} }
.ms-0 {
margin-inline-start: 0px;
}
.mt-2 { .mt-2 {
margin-top: 0.5rem; margin-top: 0.5rem;
} }
@ -1451,6 +1459,10 @@ input:checked + .toggle-bg {
height: 1.5rem; height: 1.5rem;
} }
.h-8 {
height: 2rem;
}
.h-9 { .h-9 {
height: 2.25rem; height: 2.25rem;
} }
@ -1639,6 +1651,12 @@ input:checked + .toggle-bg {
gap: 1.25rem; gap: 1.25rem;
} }
.-space-x-px > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
margin-right: calc(-1px * var(--tw-space-x-reverse));
margin-left: calc(-1px * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-1 > :not([hidden]) ~ :not([hidden]) { .space-x-1 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0; --tw-space-x-reverse: 0;
margin-right: calc(0.25rem * var(--tw-space-x-reverse)); margin-right: calc(0.25rem * var(--tw-space-x-reverse));
@ -1885,6 +1903,10 @@ input:checked + .toggle-bg {
padding-top: 0.5rem; padding-top: 0.5rem;
} }
.pt-4 {
padding-top: 1rem;
}
.pt-8 { .pt-8 {
padding-top: 2rem; padding-top: 2rem;
} }
@ -1966,6 +1988,10 @@ input:checked + .toggle-bg {
font-weight: 500; font-weight: 500;
} }
.font-normal {
font-weight: 400;
}
.font-semibold { .font-semibold {
font-weight: 600; font-weight: 600;
} }
@ -1982,6 +2008,10 @@ input:checked + .toggle-bg {
line-height: 2.25rem; line-height: 2.25rem;
} }
.leading-tight {
line-height: 1.25;
}
.text-blue-600 { .text-blue-600 {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgb(28 100 242 / var(--tw-text-opacity)); color: rgb(28 100 242 / var(--tw-text-opacity));
@ -2474,6 +2504,11 @@ textarea:disabled:is(.dark *) {
color: rgb(75 85 99 / var(--tw-text-opacity)); color: rgb(75 85 99 / var(--tw-text-opacity));
} }
.hover\:text-gray-700:hover {
--tw-text-opacity: 1;
color: rgb(55 65 81 / var(--tw-text-opacity));
}
.hover\:text-gray-900:hover { .hover\:text-gray-900:hover {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgb(17 24 39 / var(--tw-text-opacity)); color: rgb(17 24 39 / var(--tw-text-opacity));
@ -2845,10 +2880,18 @@ textarea:disabled:is(.dark *) {
} }
@media (min-width: 768px) { @media (min-width: 768px) {
.md\:mb-0 {
margin-bottom: 0px;
}
.md\:block { .md\:block {
display: block; display: block;
} }
.md\:inline {
display: inline;
}
.md\:w-auto { .md\:w-auto {
width: auto; width: auto;
} }
@ -2904,31 +2947,3 @@ textarea:disabled:is(.dark *) {
border-start-end-radius: 0.5rem; border-start-end-radius: 0.5rem;
border-end-end-radius: 0.5rem; border-end-end-radius: 0.5rem;
} }
.\[\&_td\:first-of-type\]\:whitespace-nowrap td:first-of-type {
white-space: nowrap;
}
.\[\&_td\:first-of-type\]\:px-6 td:first-of-type {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
.\[\&_td\:first-of-type\]\:py-4 td:first-of-type {
padding-top: 1rem;
padding-bottom: 1rem;
}
.\[\&_td\:first-of-type\]\:font-medium td:first-of-type {
font-weight: 500;
}
.\[\&_td\:first-of-type\]\:text-gray-900 td:first-of-type {
--tw-text-opacity: 1;
color: rgb(17 24 39 / var(--tw-text-opacity));
}
.\[\&_td\:first-of-type\]\:dark\:text-white:is(.dark *) td:first-of-type {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}

View File

@ -1,4 +1,5 @@
<div class="relative overflow-x-auto"> <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"> <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>
@ -11,4 +12,37 @@
{% endfor %} {% endfor %}
</tbody> </tbody>
</table> </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 %}
{% 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-500 bg-white border border-gray-300 rounded-e-lg dark:bg-gray-900 dark:border-gray-700 dark:text-gray-400">Next</a>
{% endif %}
</li>
</ul>
</nav>
</div> </div>

View File

@ -4,5 +4,5 @@
{{ title }} {{ title }}
{% endblock title %} {% endblock title %}
{% block content %} {% block content %}
{% simple_table columns=data.columns rows=data.rows %} {% simple_table columns=data.columns rows=data.rows page_obj=page_obj elided_page_range=elided_page_range %}
{% endblock content %} {% endblock content %}