From a0d13e4081ca0e88e86953f583d64717b2264ac1 Mon Sep 17 00:00:00 2001
From: Glandos <bugs-github@antipoul.fr>
Date: Tue, 14 Dec 2021 22:51:06 +0100
Subject: [PATCH] Top pagination and new bill button are sticky (#956)

---
 ihatemoney/static/css/main.css       | 15 +++++++--------
 ihatemoney/templates/list_bills.html | 21 +++------------------
 2 files changed, 10 insertions(+), 26 deletions(-)

diff --git a/ihatemoney/static/css/main.css b/ihatemoney/static/css/main.css
index 5964c50a..4c61fbea 100644
--- a/ihatemoney/static/css/main.css
+++ b/ihatemoney/static/css/main.css
@@ -283,14 +283,6 @@ footer .footer-left {
   }
 }
 
-#new-bill {
-  margin-top: 30px;
-}
-
-#pagination-top {
-  margin-top: 30px;
-}
-
 /* Avoid text color flickering when it loose focus as the modal appears */
 .btn-primary[data-toggle="modal"] {
   color: #fff;
@@ -334,6 +326,13 @@ footer .footer-left {
   flex-basis: auto;
 }
 
+#bill-toolbar {
+  position: sticky;
+  top: 4em;
+  z-index: 1;
+  background-color: rgba(255, 255, 255, 0.75);
+}
+
 @media (min-width: 768px) {
   .split_bills,
   #table_overflow.statistics {
diff --git a/ihatemoney/templates/list_bills.html b/ihatemoney/templates/list_bills.html
index 5ef22736..dda16f2e 100644
--- a/ihatemoney/templates/list_bills.html
+++ b/ihatemoney/templates/list_bills.html
@@ -76,9 +76,9 @@
             </div>
         </div>
     </div>
-<div class="d-flex flex-wrap-reverse w-100">
+<div class="d-flex flex-wrap w-100 pt-2 mt-2" id="bill-toolbar">
 {% if bills.pages > 1 %}
-<ul class="pagination mr-2" id="pagination-top">
+<ul class="pagination mr-2 mb-0 pb-2 flex-wrap" 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 %}
@@ -90,7 +90,7 @@
   <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 %}
-<span id="new-bill" class="ml-auto" {% if not g.project.members %} data-toggle="tooltip" title="{{_('You should start by adding participants')}}" {% endif %}>
+<span id="new-bill" class="ml-auto pb-2" {% if not g.project.members %} data-toggle="tooltip" title="{{_('You should start by adding participants')}}" {% endif %}>
     <a href="{{ url_for('.add_bill') }}" class="btn btn-primary {% if not g.project.members %} disabled {% endif %}" data-toggle="modal" data-keyboard="false" data-target="#bill-form">
         <i class="icon icon-white before-text">{{ static_include("images/plus.svg") | safe }}</i>
         {{ _("Add a new bill") }}
@@ -146,21 +146,6 @@
         {% endfor %}
         </tbody>
         </table>
-
-{% if bills.pages > 1 %}
-<ul class="pagination w-100">
-  <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 %}
-
     {% else %}
         <div class="py-3 d-flex justify-content-center empty-bill">
         <div class="card d-inline-flex p-2">