From 97447c96f54d9b680ae4af235c8c1eaa4b26a0a0 Mon Sep 17 00:00:00 2001
From: zorun <github@bitsofnetworks.org>
Date: Wed, 20 Oct 2021 00:53:50 +0200
Subject: [PATCH] Improve pagination style (#873)

The style for top and bottom pagination was different, and the top part
was confusing.

Also translate bottom pagination text.

Co-authored-by: Baptiste Jonglez <git@bitsofnetworks.org>
---
 ihatemoney/static/css/main.css       |  7 +------
 ihatemoney/templates/list_bills.html | 22 +++++++++++++---------
 2 files changed, 14 insertions(+), 15 deletions(-)

diff --git a/ihatemoney/static/css/main.css b/ihatemoney/static/css/main.css
index d71c9bd3..5b442ab5 100644
--- a/ihatemoney/static/css/main.css
+++ b/ihatemoney/static/css/main.css
@@ -290,15 +290,10 @@ footer .footer-left {
   margin-top: 30px;
 }
 
-#previous-page {
+#pagination-top {
   margin-top: 30px;
 }
 
-#next-page {
-  margin-top: 30px;
-  padding-left: 2em;
-}
-
 /* Avoid text color flickering when it loose focus as the modal appears */
 .btn-primary[data-toggle="modal"] {
   color: #fff;
diff --git a/ihatemoney/templates/list_bills.html b/ihatemoney/templates/list_bills.html
index 0240191f..596e45d1 100644
--- a/ihatemoney/templates/list_bills.html
+++ b/ihatemoney/templates/list_bills.html
@@ -84,13 +84,17 @@
     </div>
 
 {% if bills.pages > 1 %}
-    <span id="previous-page" class="float-left">
-      <a class="btn btn-outline-secondary float-left {% if bills.page == 1 %}disabled{% endif %}" href="{{ url_for('main.list_bills', page=bills.prev_num) }}">&laquo; {{ _("Newer bills") }}</a>
-    </span>
-
-    <span id="next-page" class="float-left">
-      <a class="btn btn-outline-secondary float-left {% if bills.page == bills.pages %}disabled{% endif %}" href="{{ url_for('main.list_bills', page=bills.next_num) }}">{{ _("Older bills") }} &raquo;</a>
-    </span>
+<ul class="pagination" id="pagination-top">
+  <li class="page-item {% if bills.page == 1 %}disabled{% endif %}"><a class="page-link" href="{{ url_for('main.list_bills', page=bills.prev_num) }}">&laquo; {{ _("Newer bills") }}</a></li>
+  {%- for page in bills.iter_pages() %}
+  {% if page %}
+  <li class="page-item {% if page == bills.page %}active{% endif %}"><a class="page-link" href="{{ url_for('main.list_bills', page=page) }}">{{ page }}</a></li>
+  {% else %}
+  <li class="page-item disabled"><span class="ellipsis page-link">…</span></li>
+  {% endif %}
+  {%- endfor %}
+  <li class="page-item {% if bills.page == bills.pages %}disabled{% endif %}"><a class="page-link" href="{{ url_for('main.list_bills', page=bills.next_num) }}">{{ _("Older bills") }} &raquo;</a></li>
+</ul>
 {% endif %}
 
     {% if bills.total > 0 %}
@@ -146,7 +150,7 @@
 
 {% if bills.pages > 1 %}
 <ul class="pagination">
-  <li class="page-item {% if bills.page == 1 %}disabled{% endif %}"><a class="page-link" href="{{ url_for('main.list_bills', page=bills.prev_num) }}">&laquo; Newer bills</a></li>
+  <li class="page-item {% if bills.page == 1 %}disabled{% endif %}"><a class="page-link" href="{{ url_for('main.list_bills', page=bills.prev_num) }}">&laquo; {{ _("Newer bills") }}</a></li>
   {%- for page in bills.iter_pages() %}
   {% if page %}
   <li class="page-item {% if page == bills.page %}active{% endif %}"><a class="page-link" href="{{ url_for('main.list_bills', page=page) }}">{{ page }}</a></li>
@@ -154,7 +158,7 @@
   <li class="page-item disabled"><span class="ellipsis page-link">…</span></li>
   {% endif %}
   {%- endfor %}
-  <li class="page-item {% if bills.page == bills.pages %}disabled{% endif %}"><a class="page-link" href="{{ url_for('main.list_bills', page=bills.next_num) }}">Older bills &raquo;</a></li>
+  <li class="page-item {% if bills.page == bills.pages %}disabled{% endif %}"><a class="page-link" href="{{ url_for('main.list_bills', page=bills.next_num) }}">{{ _("Older bills") }} &raquo;</a></li>
 </ul>
 {% endif %}