Eviter les listes de pagination trop longues

templates/videotheque/_liste_footer.html.twig

@@ -1,17 +1,29 @@
 {% if pagination is defined %}
 <nav aria-label="pagination">
     {% set param = app.request.attributes.get('_route_params')['id'] ?? '' %}
+    {% set pages = pagination.getPages() %}
+    {% set currentPage = pagination.getCurrentPage() %}
     <ul class="pagination">
-        <li class="page-item {{ pagination.getCurrentPage() > 1 ?: 'disabled' }}">
+        {# <li class="page-item">
             <a
                 class="page-link"
-                href="{{ path(app.request.attributes.get('_route'), app.request.query|merge({'id': param, 'page': pagination.getCurrentPage() - 1})) }}"
+                href="{{ path(app.request.attributes.get('_route'), app.request.query|merge({'id': param, 'page': 1})) }}"
             >
-                {{ "Previous" | trans }}
+                {{ "First" | trans }}
+            </a>
+        </li> #}
+        <li class="page-item {{ currentPage > 1 ?: 'disabled' }}">
+            <a
+                class="page-link"
+                aria-label="Previous"
+                href="{{ path(app.request.attributes.get('_route'), app.request.query|merge({'id': param, 'page': currentPage - 1})) }}"
+            >
+                <span aria-hidden="true">&laquo;</span>
             </a>
         </li>
-        {% for i in 1..pagination.getPages() %}
-        <li class="page-item {{ pagination.getCurrentPage() is not same as i ?: 'active'}}">
+        {% for i in 1..pages %}
+        {% if (currentPage - i < 3  and currentPage - i > -3) or (i == 1) or (i == pages) %}
+        <li class="page-item {{ currentPage is not same as i ?: 'active'}}">
             <a
                 class="page-link"
                 href="{{ path(app.request.attributes.get('_route'), app.request.query|merge({'id': param, 'page': i} )) }}"
@@ -19,14 +31,27 @@
                 {{ i }}
             </a>
         </li>
+        {% elseif currentPage - i == 3 or currentPage - i == -3 %}
+            <li class="page-item mx-2">...</li> 
+        {% endif %}
         {% endfor %}
-        <li class="page-item {{ pagination.getCurrentPage() < pagination.getPages() ?: 'disabled' }}">
+        <li class="page-item {{ currentPage < pages ?: 'disabled' }}">
             <a
-                class="page-link" href="{{ path(app.request.attributes.get('_route'), app.request.query|merge({'id': param, 'page': pagination.getCurrentPage() + 1})) }}"
+                aria-label="Next"
+                class="page-link"
+                href="{{ path(app.request.attributes.get('_route'), app.request.query|merge({'id': param, 'page': currentPage + 1})) }}"
             >
-                {{ "Next" | trans }}
+                <span aria-hidden="true">&raquo;</span>
             </a>
         </li>
+        {# <li class="page-item">
+            <a
+                class="page-link"
+                href="{{ path(app.request.attributes.get('_route'), app.request.query|merge({'id': param, 'page': pages})) }}"
+            >
+                {{ "Last" | trans }}
+            </a>
+        </li> #}
     </ul>
 </nav>
 <div class="mb-6"></div>

templates/videotheque/liste_vignettes.html.twig

@@ -17,9 +17,11 @@
 		{% for film in listeFilms %}
 		<article class="card border-primary mb-4" data-controller="collapser" data-auteur="{{ film.authered.nomComplet }}">
 			<div class="card-header d-flex justify-content-between">
-				<h3 class="card-title"><a class="" href="{{ path('videotheque_voirfilm', {'id': film.id}) }}"><span data-bs-toggle="tooltip" data-placement="right" title="{{ film.information }}">{{ film.titre }}</span></a>
-					
-				</h3>
+				<h4 class="card-title">
+					<a class="" href="{{ path('videotheque_voirfilm', {'id': film.id}) }}">
+						<span data-bs-toggle="tooltip" data-placement="right" title="{{ film.information }}">{{ film.titre }}</span>
+					</a>	
+				</h4>
 				<div class="d-flex">
 					{% if is_granted('IS_AUTHENTICATED_REMEMBERED') %}
 						<div class="me-3">

translations/messages.fr.yaml

@@ -23,6 +23,8 @@ Content: Contenu de la page
 edit_page: Editer la page
 Previous: Précédente
 Next: Suivante
+First: "<<"
+Last: ">>"
 
 Username: Nom d'utilisateur
 Prenom: Prénom