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 <[email protected]>
spiral-project · Oct 19, 2021 · 97447c9 · 97447c9
1 parent 6f87e64
commit 97447c9
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 15 deletions.
diff --git 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
@@ -84,13 +84,17 @@ <h3 class="modal-title">{{ _('Add a bill') }}</h3>
     </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,15 +150,15 @@ <h3 class="modal-title">{{ _('Add a bill') }}</h3>
 
 {% 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>
   {% 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>
+  <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 %}