Better pagination (multi-sync)

fixes #19

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>

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>

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)
             {

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;
 }

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;
 }