From f1849eccf0ac059228084db898c37abfc663987a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Th=C3=A9o=20Marchal?= <me@theomarchal.com>
Date: Wed, 3 Aug 2022 18:17:38 +0200
Subject: [PATCH] Better pagination (multi-sync)

fixes #19
---
 explorer.html         | 3 ++-
 exposition.html       | 3 ++-
 scripts/pagination.js | 6 ++++++
 styles/main.css       | 8 ++++----
 styles/pagination.css | 4 ++++
 5 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/explorer.html b/explorer.html
index c306cd8..af9f5b7 100644
--- a/explorer.html
+++ b/explorer.html
@@ -140,8 +140,9 @@
             <img class="style-select list" src="styles/icons/list.svg" alt="liste">
         </div>
         <div id="gallery">
-            <div id="pagination" style="display:table; text-align:center; margin:auto;"></div>
+            <div id="pagination"></div>
             <div class="gallery"></div>
+            <div id="pagination-sec"></div>
         </div>
         <table>
             <thead>
diff --git a/exposition.html b/exposition.html
index 7663efc..aa536ed 100644
--- a/exposition.html
+++ b/exposition.html
@@ -44,8 +44,9 @@
             <p>Cette section présente une sélection de tableaux représentatifs de l'&oelig;uvre de Ginou. La section <a href="explorer.html">Explorer</a> permet de tous les consulter.</p>
             <p>Pour voir un tableau en haute résolution ainsi que ses informations, veuillez cliquer sur celui-ci.</p>
         </div>
-        <div id="pagination" style="display:table; text-align:center; margin:auto;"></div>
+        <div id="pagination"></div>
         <div class="gallery"></div>
+        <div id="pagination-sec"></div>
     </article>
 </body>
 </html>
\ No newline at end of file
diff --git a/scripts/pagination.js b/scripts/pagination.js
index fdd7da8..a6e4e56 100644
--- a/scripts/pagination.js
+++ b/scripts/pagination.js
@@ -20,6 +20,12 @@ function paginationInit(data, paintingList, explorer)
         callback: function (response, pagination)
         {
             currentPage = pagination.pageNumber;
+
+            // fix to have two synced pagination bars
+            var paginationClone = $("#pagination > *").clone(true);
+            $("#pagination-sec").empty();
+            paginationClone.appendTo("#pagination-sec");
+
             // url handling
             if (explorer)
             {
diff --git a/styles/main.css b/styles/main.css
index bba8930..90b1d2c 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -247,15 +247,15 @@ article.main .bio-img {
     }
 }
 
-
-/* Exposition */
-
-article #pagination {
+#pagination, #pagination-sec {
     display:table;
     text-align:center;
     margin:auto;
 }
 
+
+/* Exposition */
+
 article .gallery .gallery-item.active {
     display:initial;
 }
diff --git a/styles/pagination.css b/styles/pagination.css
index 67c9f4b..bcfc063 100644
--- a/styles/pagination.css
+++ b/styles/pagination.css
@@ -4,6 +4,10 @@
     line-height:0.2rem;
 }
 
+.paginationjs.paginationjs-theme-ginou .paginationjs-pages li:last-child {
+    border-right: 1px solid #187795;
+}
+
 .paginationjs.paginationjs-theme-ginou .paginationjs-go-input > input[type="text"], .paginationjs.paginationjs-theme-ginou .paginationjs-pages li {
     border-color:#187795;
 }