From a175e39eed4bd9ebe918765369f5ad86daebb834 Mon Sep 17 00:00:00 2001
From: dbroqua <contact@darkou.fr>
Date: Wed, 23 Feb 2022 22:46:37 +0100
Subject: [PATCH] Fixed bug in pagination on mobile device

---
 sass/pagination.scss                     | 17 +++++++++++++----
 views/pages/mon-compte/ma-collection.ejs |  6 ++++--
 2 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/sass/pagination.scss b/sass/pagination.scss
index 9e3b83b..07eace3 100644
--- a/sass/pagination.scss
+++ b/sass/pagination.scss
@@ -55,12 +55,12 @@
         }
     }
 
-    .pagination-previous {
+    .pagination-previous-next {
         order: 2;
     }
-    .pagination-next {
-        order: 3;
-    }
+    // .pagination-next {
+    //     order: 3;
+    // }
 
     .pagination-link {
         &.is-current {
@@ -80,4 +80,13 @@
         justify-content: flex-start;
         order: 1;
     }
+
+    @include respond-to("small") {
+        flex-direction: column;
+
+        .pagination-previous-next {
+            margin-bottom: 1rem;
+            order: 1;
+        }
+    }
 }
\ No newline at end of file
diff --git a/views/pages/mon-compte/ma-collection.ejs b/views/pages/mon-compte/ma-collection.ejs
index 0c10905..7b811e5 100644
--- a/views/pages/mon-compte/ma-collection.ejs
+++ b/views/pages/mon-compte/ma-collection.ejs
@@ -76,8 +76,10 @@
         <strong>Nombre total d'éléments : </strong>{{total}}
     </div>
     <nav class="pagination" role="navigation" aria-label="Pagination">
-        <a class="pagination-previous" :class="{'is-disabled': page === 1}" @click="previous">Précédent</a>
-        <a class="pagination-next" :class="{'is-disabled': !total || (page*limit) >= total}" @click="next">Suivant</a>
+        <div class="pagination-previous-next">
+            <a class="pagination-previous" :class="{'is-disabled': page === 1}" @click="previous">Précédent</a>
+            <a class="pagination-next" :class="{'is-disabled': !total || (page*limit) >= total}" @click="next">Suivant</a>
+        </div>
         <ul class="pagination-list">
             <template v-for="p in Array.from({length: totalPages}, (v, i) => (i+1))">
                 <template v-if="p < 4 || p > (totalPages - 3) || (page - 3) <= p && page + 3 >= p">