paginacja i poprawki uxowe

This commit is contained in:
Mateusz Gruszczyński
2025-08-15 10:01:05 +02:00
parent 4f40bb06b3
commit b61c262179
7 changed files with 200 additions and 90 deletions

View File

@@ -4,7 +4,7 @@
<div class="d-flex justify-content-between align-items-center flex-wrap mb-4">
<h2 class="mb-2">🛠️ Edytuj listę #{{ list.id }}</h2>
<a href="{{ url_for('admin_panel') }}" class="btn btn-outline-secondary">← Powrót</a>
<a href="{{ url_for('admin_panel') }}" class="btn btn-outline-secondary">← Powrót do panelu</a>
</div>
<div class="card bg-dark text-white mb-5">

View File

@@ -4,7 +4,7 @@
<div class="d-flex justify-content-between align-items-center flex-wrap mb-4">
<h2 class="mb-2">🛍️ Produkty i sugestie</h2>
<a href="/admin" class="btn btn-outline-secondary">← Powrót do panelu</a>
<a href="{{ url_for('admin_panel') }}" class="btn btn-outline-secondary">← Powrót do panelu</a>
</div>
<div class="card bg-dark text-white mb-5">
@@ -16,7 +16,7 @@
<span class="badge bg-info">{{ items|length }} produktów</span>
</div>
<div class="card-body p-0">
<table class="table table-dark table-striped align-middle m-0">
<table class="table table-dark table-striped align-middle sortable">
<thead>
<tr>
<th>ID</th>
@@ -85,7 +85,7 @@
</div>
<div class="card-body p-0">
{% set item_names = items | map(attribute='name') | map('lower') | list %}
<table class="table table-dark table-striped align-middle m-0">
<table class="table table-dark table-striped align-middle sortable">
<thead>
<tr>
<th>ID</th>
@@ -117,6 +117,34 @@
</div>
</div>
<div class="d-flex justify-content-between align-items-center mt-4">
<form method="get" class="d-flex align-items-center">
<label for="per_page" class="me-2">🔢 Pozycji na stronę:</label>
<select id="per_page" name="per_page" class="form-select form-select-sm me-2" onchange="this.form.submit()">
<option value="25" {% if per_page==100 %}selected{% endif %}>100</option>
<option value="50" {% if per_page==200 %}selected{% endif %}>200</option>
<option value="100" {% if per_page==300 %}selected{% endif %}>300</option>
</select>
<input type="hidden" name="page" value="{{ page }}">
</form>
<nav aria-label="Nawigacja stron">
<ul class="pagination pagination-dark mb-0">
<li class="page-item {% if page <= 1 %}disabled{% endif %}">
<a class="page-link" href="?{{ query_string }}{% if query_string %}&{% endif %}page={{ page - 1 }}">«</a>
</li>
{% for p in range(1, total_pages + 1) %}
<li class="page-item {% if p == page %}active{% endif %}">
<a class="page-link" href="?{{ query_string }}{% if query_string %}&{% endif %}page={{ p }}">{{ p }}</a>
</li>
{% endfor %}
<li class="page-item {% if page >= total_pages %}disabled{% endif %}">
<a class="page-link" href="?{{ query_string }}{% if query_string %}&{% endif %}page={{ page + 1 }}">»</a>
</li>
</ul>
</nav>
</div>
<!-- Modal podglądu produktów -->
<div class="modal fade" id="productPreviewModal" tabindex="-1" aria-labelledby="previewModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-scrollable">

View File

@@ -81,6 +81,37 @@
</div>
</form>
<div class="d-flex justify-content-between align-items-center mt-4">
<form method="get" class="d-flex align-items-center">
<label for="per_page" class="me-2">🔢 Pozycji na stronę:</label>
<select id="per_page" name="per_page" class="form-select form-select-sm me-2" onchange="this.form.submit()">
<option value="25" {% if per_page==25 %}selected{% endif %}>25</option>
<option value="50" {% if per_page==50 %}selected{% endif %}>50</option>
<option value="100" {% if per_page==100 %}selected{% endif %}>100</option>
</select>
<input type="hidden" name="page" value="{{ page }}">
</form>
<nav aria-label="Nawigacja stron">
<ul class="pagination pagination-dark mb-0">
<li class="page-item {% if page <= 1 %}disabled{% endif %}">
<a class="page-link"
href="?{{ query_string }}{% if query_string %}&{% endif %}page={{ page - 1 }}">«</a>
</li>
{% for p in range(1, total_pages + 1) %}
<li class="page-item {% if p == page %}active{% endif %}">
<a class="page-link" href="?{{ query_string }}{% if query_string %}&{% endif %}page={{ p }}">{{ p }}</a>
</li>
{% endfor %}
<li class="page-item {% if page >= total_pages %}disabled{% endif %}">
<a class="page-link"
href="?{{ query_string }}{% if query_string %}&{% endif %}page={{ page + 1 }}">»</a>
</li>
</ul>
</nav>
</div>
<!-- Modal podglądu produktów -->
<div class="modal fade" id="productPreviewModal" tabindex="-1" aria-labelledby="previewModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-scrollable">

View File

@@ -8,7 +8,7 @@
<a href="{{ url_for('recalculate_filesizes_all') }}" class="btn btn-outline-primary me-2">
Przelicz rozmiary plików
</a>
<a href="/admin" class="btn btn-outline-secondary">← Powrót do panelu</a>
<a href="{{ url_for('admin_panel') }}" class="btn btn-outline-secondary">← Powrót do panelu</a>
</div>
</div>
@@ -66,36 +66,34 @@
</div>
</div>
<nav aria-label="Nawigacja stron">
<ul class="pagination pagination-dark justify-content-center">
<div class="d-flex justify-content-between align-items-center mt-4">
<form method="get" class="d-flex align-items-center">
<label for="per_page" class="me-2">🔢 Pozycji na stronę:</label>
<select id="per_page" name="per_page" class="form-select form-select-sm me-2" onchange="this.form.submit()">
<option value="25" {% if per_page==25 %}selected{% endif %}>25</option>
<option value="50" {% if per_page==50 %}selected{% endif %}>50</option>
<option value="100" {% if per_page==100 %}selected{% endif %}>100</option>
</select>
<input type="hidden" name="page" value="{{ page }}">
</form>
{# Poprzednia strona #}
<li class="page-item {% if page <= 1 %}disabled{% endif %}">
<a class="page-link"
href="{{ url_for('admin_receipts', id=id) }}?{{ query_string }}{% if query_string %}&{% endif %}page={{ page-1 }}">
« Poprzednia
</a>
</li>
<nav aria-label="Nawigacja stron">
<ul class="pagination pagination-dark mb-0">
<li class="page-item {% if page <= 1 %}disabled{% endif %}">
<a class="page-link" href="?{{ query_string }}{% if query_string %}&{% endif %}page={{ page - 1 }}">«</a>
</li>
{% for p in range(1, total_pages + 1) %}
<li class="page-item {% if p == page %}active{% endif %}">
<a class="page-link" href="?{{ query_string }}{% if query_string %}&{% endif %}page={{ p }}">{{ p }}</a>
</li>
{% endfor %}
<li class="page-item {% if page >= total_pages %}disabled{% endif %}">
<a class="page-link" href="?{{ query_string }}{% if query_string %}&{% endif %}page={{ page + 1 }}">»</a>
</li>
</ul>
</nav>
</div>
{# Numery stron #}
{% for p in range(1, total_pages + 1) %}
<li class="page-item {% if p == page %}active{% endif %}">
<a class="page-link"
href="{{ url_for('admin_receipts', id=id) }}?{{ query_string }}{% if query_string %}&{% endif %}page={{ p }}">
{{ p }}
</a>
</li>
{% endfor %}
{# Następna strona #}
<li class="page-item {% if page >= total_pages %}disabled{% endif %}">
<a class="page-link"
href="{{ url_for('admin_receipts', id=id) }}?{{ query_string }}{% if query_string %}&{% endif %}page={{ page+1 }}">
Następna »
</a>
</li>
</ul>
</nav>
{% if orphan_files and request.path.endswith('/all') %}
<hr class="my-4">

View File

@@ -4,7 +4,7 @@
<div class="d-flex justify-content-between align-items-center flex-wrap mb-4">
<h2 class="mb-2">👥 Zarządzanie użytkownikami</h2>
<a href="/admin" class="btn btn-outline-secondary">← Powrót do panelu</a>
<a href="{{ url_for('admin_panel') }}" class="btn btn-outline-secondary">← Powrót do panelu</a>
</div>
<!-- Formularz dodawania nowego użytkownika -->