correct pagination

blog/templates/listing.html

@@ -25,6 +25,32 @@
 	box-shadow: 0 4px 12px rgba(0,0,0,0.15);
 }
 
+/* Pagination - Style gris foncé */
+.pagination .page-link {
+	color: #343a40;
+	border-color: #343a40;
+	background-color: white;
+	font-weight: 500;
+}
+
+.pagination .page-link:hover {
+	color: white;
+	background-color: #343a40;
+	border-color: #343a40;
+}
+
+.pagination .page-item.active .page-link {
+	background-color: #343a40;
+	border-color: #343a40;
+	color: white;
+}
+
+.pagination .page-item.disabled .page-link {
+	color: #6c757d;
+	background-color: #e9ecef;
+	border-color: #dee2e6;
+}
+
 .article-row {
 	display: flex;
 	flex-direction: row;
@@ -235,37 +261,91 @@
 	</form>
 	<hr>
 	{% if page.blog_art.paginator.num_pages != 1 %}
-	<p class="card-text">
-	<nav aria-label="...">
-		<ul class="pagination justify-content-center">
+	<nav aria-label="Pagination">
+		<ul class="pagination justify-content-center flex-wrap">
+			<!-- Bouton Précédent -->
 			{% if page.blog_art.has_previous %}
 				<li class="page-item">
-					<a class="page-link" href="?page={{ page.blog_art.previous_page_number }}"> << </a>
+					<a class="page-link" href="?page={{ page.blog_art.previous_page_number }}" aria-label="Précédent">
+						<i class="fas fa-chevron-left"></i>
+					</a>
 				</li>
 			{% else %}
 				<li class="page-item disabled">
-					<span class="page-link"> << </span>
+					<span class="page-link"><i class="fas fa-chevron-left"></i></span>
 				</li>
 			{% endif %}
-			{% for nb_page in page.blog_art.nbpage %}
-				{% if page.blog_art.number == forloop.counter %}
-					<li class="page-item active" aria-current="page"><span class="page-link">{{forloop.counter}}</span></li>
-				{% else %}
-					<li class="page-item"><a class="page-link" href="?page={{forloop.counter}}">{{forloop.counter}}</a></li>
+			
+			<!-- Toujours afficher la page 1 -->
+			{% if page.blog_art.number == 1 %}
+				<li class="page-item active">
+					<span class="page-link">1</span>
+				</li>
+			{% else %}
+				<li class="page-item">
+					<a class="page-link" href="?page=1">1</a>
+				</li>
+			{% endif %}
+			
+			<!-- Ellipse si on est loin du début -->
+			{% if page.blog_art.number > 4 %}
+				<li class="page-item disabled">
+					<span class="page-link">...</span>
+				</li>
+			{% endif %}
+			
+			<!-- Pages autour de la page actuelle -->
+			{% for num in page.blog_art.paginator.page_range %}
+				{% if num > 1 and num < page.blog_art.paginator.num_pages %}
+					{% if num >= page.blog_art.number|add:"-2" and num <= page.blog_art.number|add:"2" %}
+						{% if num == page.blog_art.number %}
+							<li class="page-item active">
+								<span class="page-link">{{ num }}</span>
+							</li>
+						{% else %}
+							<li class="page-item">
+								<a class="page-link" href="?page={{ num }}">{{ num }}</a>
+							</li>
+						{% endif %}
+					{% endif %}
 				{% endif %}
 			{% endfor %}
+			
+			<!-- Ellipse si on est loin de la fin -->
+			{% if page.blog_art.number < page.blog_art.paginator.num_pages|add:"-3" %}
+				<li class="page-item disabled">
+					<span class="page-link">...</span>
+				</li>
+			{% endif %}
+			
+			<!-- Toujours afficher la dernière page (si elle existe et n'est pas 1) -->
+			{% if page.blog_art.paginator.num_pages > 1 %}
+				{% if page.blog_art.number == page.blog_art.paginator.num_pages %}
+					<li class="page-item active">
+						<span class="page-link">{{ page.blog_art.paginator.num_pages }}</span>
+					</li>
+				{% else %}
+					<li class="page-item">
+						<a class="page-link" href="?page={{ page.blog_art.paginator.num_pages }}">{{ page.blog_art.paginator.num_pages }}</a>
+					</li>
+				{% endif %}
+			{% endif %}
+			
+			<!-- Bouton Suivant -->
 			{% if page.blog_art.has_next %}
 				<li class="page-item">
-					<a class="page-link" href="?page={{ page.blog_art.next_page_number }}"> >> </a>
+					<a class="page-link" href="?page={{ page.blog_art.next_page_number }}" aria-label="Suivant">
+						<i class="fas fa-chevron-right"></i>
+					</a>
 				</li>
 			{% else %}
 				<li class="page-item disabled">
-					<span class="page-link"> >> </span>
+					<span class="page-link"><i class="fas fa-chevron-right"></i></span>
 				</li>
 			{% endif %}
 		</ul>
 	</nav>
-	<p>
+	<hr>
 	{% endif %}
 	<p class="card-text">{{page.p_right|safe}}</p>
 	<h4> <i class="fas fa-tags"></i> Les Catégories </h4>