From 72b756cc27c5f941719cd050f8e30ffda2b40f94 Mon Sep 17 00:00:00 2001
From: yazninja <yazlesean@gmail.com>
Date: Wed, 27 Jul 2022 00:36:16 +0800
Subject: [PATCH] improve pagination styling

---
 src/renderer/less/elements.less              | 13 +++++++++++++
 src/renderer/views/components/pagination.ejs | 14 +++++++-------
 2 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/src/renderer/less/elements.less b/src/renderer/less/elements.less
index 09cb5e4a..f4c9e228 100644
--- a/src/renderer/less/elements.less
+++ b/src/renderer/less/elements.less
@@ -165,6 +165,7 @@
 .page-btn {
   align-self: center;
   height: 32px;
+  width:max-content;
 }
 
 .page-btn img {
@@ -2390,4 +2391,16 @@ input[type=checkbox][switch]:checked:active::before {
   img {
     border-radius: 50%;
   }
+}
+
+.pagination-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 16px;
+  .md-input-number{
+    min-width: 12em;
+  }
+  
 }
\ No newline at end of file
diff --git a/src/renderer/views/components/pagination.ejs b/src/renderer/views/components/pagination.ejs
index 82fc0206..4696d50f 100644
--- a/src/renderer/views/components/pagination.ejs
+++ b/src/renderer/views/components/pagination.ejs
@@ -1,39 +1,39 @@
 <script type="text/x-template" id="pagination">
-    <div class="row" style="margin-bottom: 16px" v-if="!isInfinite">
+    <div class="pagination-container" v-if="!isInfinite">
         <button
-            class="col md-btn page-btn"
+            class="md-btn page-btn"
             :disabled="effectivePage === 1"
             @click="goToPage(1)"
         >
             <img class="md-ico-first"/>
         </button>
         <button
-            class="col md-btn page-btn prev"
+            class="md-btn page-btn prev"
             :disabled="effectivePage === 1"
             @click="goToPrevious()"
         >
             <img class="md-ico-prev"/>
         </button>
         <button
-            :class="`col md-btn page-btn${ isCurrentPage(page) ? ' md-btn-primary': ''}`"
+            :class="`md-btn page-btn${ isCurrentPage(page) ? ' md-btn-primary': ''}`"
             @click="goToPage(page)"
             v-for="page in pagesToShow"
         >{{ page }}</button>
         <button
-            class="col md-btn page-btn next"
+            class="md-btn page-btn next"
             :disabled="effectivePage === numPages"
             @click="goToNext()"
         >
             <img class="md-ico-next"/>
         </button>
         <button
-            class="col md-btn page-btn last"
+            class="md-btn page-btn last"
             :disabled="effectivePage === numPages"
             @click="goToEnd()"
         >
             <img class="md-ico-last"/>
         </button>
-        <div class="col page-btn" style="min-width: 12em;">
+        <div class="page-btn md-input-number">
             <input type="number" min="1" :max="numPages" :value="effectivePage" @change="changePage" />
             <span>/ {{ numPages }}</span>
         </div>