Skip to content

Commit 02b0b83

Browse files
SpomkySpomky
committed
Add pagination component and integrate it into the entry list; enhance navigation experience
1 parent 4f10941 commit 02b0b83

File tree

2 files changed

+99
-0
lines changed

2 files changed

+99
-0
lines changed

‎templates/components/Pagination.html.twig‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
{% set route = app.request.attributes.get('_route') %}
2+
{% set route_params = app.request.attributes.get('_route_params') %}
3+
{% set params = route_params|merge(app.request.query.all) %}
4+
{% set startPage = currentPage - 2 %}
5+
{% if startPage < 1 %}
6+
{% set startPage = 1 %}
7+
{% endif %}
8+
{% set previous = currentPage - 1 %}
9+
{% set next = currentPage + 1 %}
10+
11+
<nav aria-label="Table navigation" class="w-full mb-4">
12+
<div class="flex flex-col md:flex-row justify-between items-center gap-2">
13+
<span class="text-sm font-normal">
14+
{% trans %}nav.page{% endtrans %} <span class="font-semibold text-gray-900 dark:text-white">{{ currentPage }} {% trans %}nav.of{% endtrans %} {{ totalPages }}</span>.
15+
{{ maxPerPage }} {% trans %}nav.elements.per.page{% endtrans %}
16+
</span>
17+
{% if totalPages > 1 %}
18+
{% if totalPages <= 4 %}
19+
{% set pagesToShow = range(1, totalPages) %}
20+
{% else %}
21+
{% set pagesToShow = [1, 2] %}
22+
{% if currentPage - 1 >= 3 and currentPage - 1 <= totalPages - 2 %}
23+
{% set pagesToShow = pagesToShow|merge([currentPage - 1]) %}
24+
{% endif %}
25+
{% if currentPage >= 3 and currentPage <= totalPages - 2 %}
26+
{% set pagesToShow = pagesToShow|merge([currentPage]) %}
27+
{% endif %}
28+
{% if currentPage + 1 >= 3 and currentPage + 1 <= totalPages - 2 %}
29+
{% set pagesToShow = pagesToShow|merge([currentPage + 1]) %}
30+
{% endif %}
31+
{% set pagesToShow = pagesToShow|merge([totalPages - 1, totalPages]) %}
32+
{% set pagesToShow = pagesToShow|unique|sort %}
33+
{% endif %}
34+
{% set previousPage = null %}
35+
<div class="hidden sm:flex join">
36+
{% if currentPage != 1 %}
37+
<twig:Pagination:Page href="{{ path(route, params|merge({ page:1 })) }}">
38+
<span class="sr-only">{% trans %}nav.begin{% endtrans %}</span>
39+
<twig:ux:icon class="size-[1.2em]" name="cil:arrow-thick-to-left" />
40+
</twig:Pagination:Page>
41+
{% else %}
42+
<twig:Pagination:Page start>
43+
<span class="sr-only">{% trans %}nav.begin{% endtrans %}</span>
44+
<twig:ux:icon class="size-[1.2em]" name="cil:arrow-thick-to-left" />
45+
</twig:Pagination:Page>
46+
{% endif %}
47+
{% if currentPage > 1 %}
48+
<twig:Pagination:Page href="{{ path(route, params|merge({ page: currentPage-1 })) }}">
49+
<span class="sr-only">{% trans %}nav.previous{% endtrans %}</span>
50+
<twig:ux:icon class="size-[1.2em]" name="cil:arrow-thick-left" />
51+
</twig:Pagination:Page>
52+
{% else %}
53+
<twig:Pagination:Page start>
54+
<span class="sr-only">{% trans %}nav.previous{% endtrans %}</span>
55+
<twig:ux:icon class="size-[1.2em]" name="cil:arrow-thick-left" />
56+
</twig:Pagination:Page>
57+
{% endif %}
58+
{% for pageToShow in pagesToShow %}
59+
{% if previousPage is not null and pageToShow - previousPage > 1 %}
60+
<twig:Pagination:Page>&hellip;</twig:Pagination:Page>
61+
{% endif %}
62+
{% if pageToShow == currentPage %}
63+
<twig:Pagination:Page active>
64+
{{ pageToShow }}
65+
</twig:Pagination:Page>
66+
{% else %}
67+
<twig:Pagination:Page href="{{ path(route, params|merge({ page: pageToShow })) }}">
68+
{{ pageToShow }}
69+
</twig:Pagination:Page>
70+
{% endif %}
71+
{% set previousPage = pageToShow %}
72+
{% endfor %}
73+
{% if currentPage < totalPages %}
74+
<twig:Pagination:Page href="{{ path(route, params|merge({ page: currentPage+1 })) }}">
75+
<span class="sr-only">{% trans %}nav.next{% endtrans %}</span>
76+
<twig:ux:icon class="size-[1.2em]" name="cil:arrow-thick-right" />
77+
</twig:Pagination:Page>
78+
{% else %}
79+
<twig:Pagination:Page start>
80+
<span class="sr-only">{% trans %}nav.next{% endtrans %}</span>
81+
<twig:ux:icon class="size-[1.2em]" name="cil:arrow-thick-right" />
82+
</twig:Pagination:Page>
83+
{% endif %}
84+
{% if currentPage != totalPages %}
85+
<twig:Pagination:Page href="{{ path(route, params|merge({ page:totalPages })) }}">
86+
<span class="sr-only">{% trans %}nav.end{% endtrans %}</span>
87+
<twig:ux:icon class="size-[1.2em]" name="cil:arrow-thick-to-right" />
88+
</twig:Pagination:Page>
89+
{% else %}
90+
<twig:Pagination:Page end>
91+
<span class="sr-only">{% trans %}nav.end{% endtrans %}</span>
92+
<twig:ux:icon class="size-[1.2em]" name="cil:arrow-thick-to-right" />
93+
</twig:Pagination:Page>
94+
{% endif %}
95+
</div>
96+
{% endif %}
97+
</div>
98+
</nav>

‎templates/homepage/list.html.twig‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
{% for entry in entries %}
1515
{% include 'components/entry/card.html.twig' with {entry: entry} %}
1616
{% endfor %}
17+
<twig:Pagination totalPages="{{ (entries.count/max_per_page)|round(0,'ceil') }}" currentPage="{{ current_page }}" maxPerPage="{{ max_per_page }}" />
1718
<twig:fab />
1819
</div>
1920
{% endif %}

0 commit comments

Comments
 (0)