Pagination des articles d'un groupe

content/groupe.html

@@ -51,8 +51,11 @@
 
 <h3 class="mt-4 mb-3">Dernières nouvelles</h3>
 
+<B_a_la_une>
+#ANCRE_PAGINATION
+<div class="pagination pagination_top">#PAGINATION{page_precedent_suivant}</div>
 <div class="row liste-articles">
-	<BOUCLE_a_la_une(ARTICLES){id_rubrique=#CONFIG{balint/id_rub_articles}}{id_groupe IN #GET{groupes}}{0,6}{! par date}>
+	<BOUCLE_a_la_une(ARTICLES){id_rubrique=#CONFIG{balint/id_rub_articles}}{id_groupe IN #GET{groupes}}{! par date}{pagination 2}>
 		<div class="col-md-6 col-lg-4 mt-4 mt-lg-0">
 			<INCLURE{fond=inclure/bloc_article, env, id_article}/>
 		</div>
@@ -61,4 +64,7 @@
 	<//B_a_la_une>
 </div>
 
+<div class="pagination">#PAGINATION{page_precedent_suivant}</div>
+</B_a_la_une>
+
 </section>

css/_sq_balint.scss

@@ -33,6 +33,42 @@ img{
 	height: auto;
 }
 
+/* pagination */
+
+.pagination{
+	display: flex;
+	justify-content: flex-end;
+	align-items: center;
+	margin-bottom: 1.5rem;
+}
+
+.pagination {
+	.prev, .next {
+		line-height:100%
+	}
+	.disabled {
+		display: none;
+	}
+}
+.pagination {
+
+	strong, .lien_pagination {
+		background-color: $fond-footer;
+		padding: 0.5rem 1rem;
+		border-radius: 0.2rem;
+	} strong{
+		cursor:initial;
+		color: $page-active;
+	}
+	.lien_pagination{
+		color: $light;
+	}
+	.sep{
+		display: inline-block;
+		width: 0.5rem;
+	}
+}
+
 /* breadcrumb */
 .breadcrumb{
 	//background: #e8ebf8;
@@ -387,7 +423,7 @@ body{
 /************************ PAGE ASSOCIATION ****************************/
 /**********************************************************************/
 
-#menu-association, #menu-groupes{
+#menu-association, #menu-groupes, #menu-methode{
 	background: $couleur-liens;
 	margin: 1rem 0;
 	border-radius: 0.2rem;
@@ -396,6 +432,9 @@ body{
 		color: $page-active;
 		font-weight: bold;
 	}
+	ul{
+		width: 100%;
+	}
 	li{
 		padding: 0.5rem;
 		a{

css/mon_site.css

@@ -11906,6 +11906,45 @@ img {
   height: auto;
 }
 
+/* pagination */
+.pagination {
+  display: -webkit-box;
+  display: flex;
+  -webkit-box-pack: end;
+          justify-content: flex-end;
+  -webkit-box-align: center;
+          align-items: center;
+  margin-bottom: 1.5rem;
+}
+
+.pagination .prev, .pagination .next {
+  line-height: 100%;
+}
+
+.pagination .disabled {
+  display: none;
+}
+
+.pagination strong, .pagination .lien_pagination {
+  background-color: #464ba3;
+  padding: 0.5rem 1rem;
+  border-radius: 0.2rem;
+}
+
+.pagination strong {
+  cursor: initial;
+  color: #ffdb70;
+}
+
+.pagination .lien_pagination {
+  color: #f8f9fa;
+}
+
+.pagination .sep {
+  display: inline-block;
+  width: 0.5rem;
+}
+
 /* breadcrumb */
 .breadcrumb {
   padding: 0;
@@ -12323,31 +12362,35 @@ body {
 /**********************************************************************/
 /************************ PAGE ASSOCIATION ****************************/
 /**********************************************************************/
-#menu-association, #menu-groupes {
+#menu-association, #menu-groupes, #menu-methode {
   background: #f67638;
   margin: 1rem 0;
   border-radius: 0.2rem;
   padding: 0;
 }
 
-#menu-association .active a, #menu-groupes .active a {
+#menu-association .active a, #menu-groupes .active a, #menu-methode .active a {
   color: #ffdb70;
   font-weight: bold;
 }
 
-#menu-association li, #menu-groupes li {
+#menu-association ul, #menu-groupes ul, #menu-methode ul {
+  width: 100%;
+}
+
+#menu-association li, #menu-groupes li, #menu-methode li {
   padding: 0.5rem;
 }
 
-#menu-association li a, #menu-groupes li a {
+#menu-association li a, #menu-groupes li a, #menu-methode li a {
   color: white;
 }
 
-#menu-association li:not(:last-of-type), #menu-groupes li:not(:last-of-type) {
+#menu-association li:not(:last-of-type), #menu-groupes li:not(:last-of-type), #menu-methode li:not(:last-of-type) {
   border-bottom: solid 1px #f8f9fa;
 }
 
-#menu-association .navbar-toggler, #menu-groupes .navbar-toggler {
+#menu-association .navbar-toggler, #menu-groupes .navbar-toggler, #menu-methode .navbar-toggler {
   border: none;
   color: white;
   width: 100%;

modeles/pagination_page_precedent_suivant.html

@@ -0,0 +1,52 @@
+#ENV*{bloc_ancre}
+#SET{bornes,#ENV{page_courante}|bornes_pagination{#ENV{nombre_pages},10}}
+#SET{premiere, #GET{bornes}|reset}
+#SET{derniere, #GET{bornes}|end}
+#SET{pages,#GET{premiere}|range{#GET{derniere}}}
+#SET{sep,#ENV{separateur,'   '}}
+<B_pages>
+	[<span
+  class='label'>(#ENV{label,''})</span>][
+
+	(#SET{item, #ENV{page_courante}|moins{2}|mult{#ENV{pas}} })
+
+	][<span
+	class="prev[(#ENV{page_courante}|<={1}|oui)disabled]">(#ENV{url}
+	|parametre_url{#ENV{debut},#GET{item}|?{#GET{item}}}
+	|ancre_url{#ENV{ancre}}
+	|lien_ou_expose{#ENV{label_precedent, &lt; },#ENV{page_courante}|<={1},'lien_pagination','',nofollow}
+	|inserer_attribut{rel,prev}
+	)[<span
+	class='sep'>(#GET*{sep})</span>]</span>]<span
+	class="pages">[<a
+	href='[(#ENV{url}|parametre_url{#ENV{debut},''})]##ENV{ancre}'
+	class='lien_pagination'
+	rel='nofollow'>(#GET{premiere}|>{1}|?{1})</a><span
+	class="tbc">[<span
+	class='sep'>(#GET*{sep})</span>]...[<span
+	class='sep'>(#GET*{sep})</span>]</span
+
+		>]<BOUCLE_pages(POUR){tableau #GET{pages}}>[
+		(#SET{item, #VALEUR|moins{1}|mult{#ENV{pas}} })
+		][(#ENV{url}
+		|parametre_url{#ENV{debut},#GET{item}|?{#GET{item}}}
+		|ancre_url{#ENV{ancre}}
+		|lien_ou_expose{#VALEUR,#VALEUR|=={#ENV{page_courante}},lien_pagination,'',nofollow})][<span
+		class='sep'>(#VALEUR|<{#GET{derniere}}|?{#GET{sep}})</span
+		>]</BOUCLE_pages>[<span
+
+	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}})</a>]</span>[
+	(#SET{item, #ENV{page_courante}|mult{#ENV{pas}} })
+	][<span
+	class="next[(#ENV{page_courante}|>={#ENV{nombre_pages}}|oui)disabled]">[<span class='sep'>(#GET*{sep})</span>](#ENV{url}
+	|parametre_url{#ENV{debut},#GET{item}|?{#GET{item}}}
+	|ancre_url{#ENV{ancre}}
+	|lien_ou_expose{#ENV{label_suivant, &gt; },#ENV{page_courante}|>={#ENV{nombre_pages}},'lien_pagination','',nofollow}
+	|inserer_attribut{rel,next}
+	)</span>]
+</B_pages>