Refactoring du modele de pagination du prive #2822 :

- memes conventions de classe que pour les modeles du public
- on affiche un simple '+' avec un title 'Tout afficher' pour l'option tout afficher
- on limite a 5 liens car c'est bien suffisant
- on ajuste les styles

ecrire/public/fonctions.php

@@ -211,7 +211,7 @@ function filtre_pagination_dist(
 		define('_PAGINATION_NOMBRE_LIENS_MAX', 10);
 	}
 	if (!defined('_PAGINATION_NOMBRE_LIENS_MAX_ECRIRE')) {
-		define('_PAGINATION_NOMBRE_LIENS_MAX_ECRIRE', 10);
+		define('_PAGINATION_NOMBRE_LIENS_MAX_ECRIRE', 5);
 	}
 
 

prive/modeles/pagination_prive.html

@@ -5,41 +5,33 @@
 #SET{pages,#GET{premiere}|range{#GET{derniere}}}
 #SET{sep,#ENV{separateur,' | '}}
 <B_pages>
-	[<span
-  class='label'>(#ENV{label,''})</span>][
+	[<span class="pagination-label"><span class="label">(#ENV{label})</span></span>]
+	<ul class="pagination-items">
+		[<li class="pagination-item"><a
+			href='[(#ENV{url}|parametre_url{#ENV{debut},''}|ancre_url{#ENV{ancre}})]'
+			class='pagination-lien lien_pagination'
+			rel='nofollow'>(#GET{premiere}|>{1}|?{0})</a></li><li
+			class="pagination-item tbc disabled"><span class="pagination-lien">...</span></li>]
 
-	(#SET{item, #ENV{page_courante}|moins{2}|mult{#ENV{pas}} })
-
-	]<span
-	class="pages">[<a
-	href='[(#ENV{url}|parametre_url{#ENV{debut},''})]##ENV{ancre}'
-	class='lien_pagination'
-	rel='nofollow'>(#GET{premiere}|>{1}|?{0})</a><span
-	class="tbc">[<span
-	class='sep'>(#GET*{sep})</span>]...[<span
-	class='sep'>(#GET*{sep})</span>]</span
-
-		>]<BOUCLE_pages(POUR){tableau #GET{pages}}>[
+		<BOUCLE_pages(POUR){tableau #GET{pages}}>[
 		(#SET{item, #VALEUR|moins{1}|mult{#ENV{pas}} })
-		][(#ENV{url}
+		][<li class="pagination-item[(#VALEUR|=={#ENV{page_courante}}|oui)on active]">(#ENV{url}
 		|parametre_url{#ENV{debut},#GET{item}|?{#GET{item}}}
 		|ancre_url{#ENV{ancre}}
-		|lien_ou_expose{#GET{item},#VALEUR|=={#ENV{page_courante}},lien_pagination,'',nofollow})][<span
-		class='sep'>(#VALEUR|<{#GET{derniere}}|?{#GET{sep}})</span
-		>]</BOUCLE_pages>[<span
+		|lien_ou_expose{#GET{item},#VALEUR|=={#ENV{page_courante}}|?{span.pagination-lien},pagination-lien lien_pagination,'',nofollow})</li>]
+		</BOUCLE_pages>
+
+		[<li class="pagination-item tbc disabled"><span class="pagination-lien">...</span></li>
+		<li class="pagination-item"><a
+		href='[(#ENV{url}|parametre_url{#ENV{debut},#ENV{nombre_pages}|moins{1}|mult{#ENV{pas}}}|ancre_url{#ENV{ancre}})]'
+		class='pagination-lien lien_pagination'
+		rel='nofollow'>(#GET{derniere}|<{#ENV{nombre_pages}}|?{#ENV{nombre_pages}|moins{1}|mult{#ENV{pas}}})</a></li>]
 
-	class="tbc">[<span
-	class='sep'>(#GET*{sep})</span>]...[<span
-	class='sep'>(#GET*{sep})</span>]</span><a
-	href='[(#ENV{url}|parametre_url{#ENV{debut},#ENV{nombre_pages}|moins{1}|mult{#ENV{pas}}})]##ENV{ancre}'
-	class='lien_pagination'
-	rel='nofollow'>(#GET{derniere}|<{#ENV{nombre_pages}}|?{#ENV{nombre_pages}|moins{1}|mult{#ENV{pas}}})</a>]</span>[
-	(#ENV{nombre_pages}|moins{1}|mult{#ENV{pas}}|<{1000}|oui)[
-	(#SET{item, #ENV{page_courante}|mult{#ENV{pas}} })
-	][<span
-	class="all[(#ENV{page_courante}|=={0}|oui)disabled]">[<span
-	class='sep'>(#GET*{sep})</span>](#ENV{url}
-	|parametre_url{#ENV{debut},-1}
-	|ancre_url{#ENV{ancre}}
-	|lien_ou_expose{<:lien_tout_afficher:>,#ENV{page_courante}|=={0},lien_pagination,'',nofollow})</span>]]
+		[<li class="pagination-item all[(#ENV{page_courante}|=={0}|oui)on active]">(#ENV{url}
+			|parametre_url{#ENV{debut},-1}
+			|ancre_url{#ENV{ancre}}
+			|lien_ou_expose{+,#ENV{page_courante}|=={0}|?{span.pagination-lien},pagination-lien lien_pagination,'',nofollow}
+		  |inserer_attribut{title,<:lien_tout_afficher:>}
+		)</li>]
+	</ul>
 </B_pages>
\ No newline at end of file

prive/themes/spip/lists.css.html

@@ -126,9 +126,24 @@
 
 .tri, .pagination {background:#eee;border-top:1px solid #ddd;border-bottom:1px solid #ddd; margin: 0;padding:2px 0; /*font-size: 11px;*/ font-weight: bold; text-align: #ENV{right}; white-space: nowrap;margin-top:1em; }
 .tri {text-align:#ENV{left};}
-.tri .on, .pagination .on { background:#ccc;padding:2px 3px;color:#fff; }
+.tri .on { background:#ccc;padding:2px 3px;color:#fff; }
 .tri img, .pagination img {vertical-align:bottom;}
 
+.pagination .pagination-items {list-style: none;display: flex;flex-direction: row; justify-content: flex-end}
+.pagination .pagination-item {  margin: 0; flex-basis: 2em; display: flex;align-items: center; font-size: 0.9em}
+.pagination .pagination_precedent_suivant .pagination-item { flex-basis: auto;}
+.pagination .pagination-item + .pagination-item {  margin-left: 0.15em }
+.pagination .pagination-lien { display:block; flex-basis: 100%; background: #f0f0f0; border:1px solid #ccc; text-decoration: none; padding:0.15em .30em; border-radius:.15em;text-align: center}
+.pagination .on .pagination-lien,
+.pagination a.pagination-lien:hover,
+.pagination a.pagination-lien:focus,
+.pagination a.pagination-lien:active { background: #ENV{foncee}; border-color: #ENV{foncee}; color: #fff; }
+.pagination .on .pagination-lien {font-weight: bold;}
+.pagination .pagination_precedent_suivant .disabled {visibility: hidden}
+.pagination .pagination-item.disabled {}
+.pagination .pagination-item.disabled .pagination-lien {color:#aaa; font-weight: normal;border-color: #ddd;}
+
+
 .pagination + .tri, .tri + .pagination {border-top:0;margin-top:0;}
 .pagination + .liste_items, .tri + .liste_items {border-top:0;margin-top:0;}
 .liste_items + .tri, .liste_items + .pagination {margin-top:-1em;margin-bottom:1em;}