perf(ui/pagination): replace the prev/next text on pagination buttons…

… with icons (#743)
ArtalkJS · Jan 31, 2024 · 29bf499 · 29bf499
1 parent 2fcad53
commit 29bf499
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 7 deletions.
diff --git a/ui/artalk-sidebar/src/components/Pagination.vue b/ui/artalk-sidebar/src/components/Pagination.vue
@@ -111,7 +111,10 @@ defineExpose({ prev, next, reset })
         class="atk-btn atk-btn-prev"
         :class="{ 'atk-disabled': disabled || prevDisabled }"
         @click="prev()"
-      >Prev</div>
+        aria-label="Previous page"
+      >
+        <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="14px" width="14px" xmlns="http://www.w3.org/2000/svg"><path d="M217.9 256L345 129c9.4-9.4 9.4-24.6 0-33.9-9.4-9.4-24.6-9.3-34 0L167 239c-9.1 9.1-9.3 23.7-.7 33.1L310.9 417c4.7 4.7 10.9 7 17 7s12.3-2.3 17-7c9.4-9.4 9.4-24.6 0-33.9L217.9 256z"></path></svg>
+      </div>
       <input
         type="text"
         class="atk-input"
@@ -125,7 +128,10 @@ defineExpose({ prev, next, reset })
         class="atk-btn atk-btn-next"
         :class="{ 'atk-disabled': disabled || nextDisabled }"
         @click="next()"
-      >Next</div>
+        aria-label="Next page"
+      >
+        <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="14px" width="14px" xmlns="http://www.w3.org/2000/svg"><path d="M294.1 256L167 129c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.3 34 0L345 239c9.1 9.1 9.3 23.7.7 33.1L201.1 417c-4.7 4.7-10.9 7-17 7s-12.3-2.3-17-7c-9.4-9.4-9.4-24.6 0-33.9l127-127.1z"></path></svg>
+      </div>
     </div>
   </div>
 </template>
@@ -151,7 +157,7 @@ defineExpose({ prev, next, reset })
 
   & > .atk-btn {
     user-select: none;
-    width: 70px;
+    width: 60px;
     cursor: pointer;
     display: flex;
     justify-content: center;

diff --git a/ui/artalk/src/components/pagination.ts b/ui/artalk/src/components/pagination.ts
@@ -36,9 +36,13 @@ export default class Pagination {
     this.$el = Utils.createElement(
       `<div class="atk-pagination-wrap">
         <div class="atk-pagination">
-          <div class="atk-btn atk-btn-prev">Prev</div>
+          <div class="atk-btn atk-btn-prev" aria-label="Previous page">
+            <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="14px" width="14px" xmlns="http://www.w3.org/2000/svg"><path d="M217.9 256L345 129c9.4-9.4 9.4-24.6 0-33.9-9.4-9.4-24.6-9.3-34 0L167 239c-9.1 9.1-9.3 23.7-.7 33.1L310.9 417c4.7 4.7 10.9 7 17 7s12.3-2.3 17-7c9.4-9.4 9.4-24.6 0-33.9L217.9 256z"></path></svg>
+          </div>
           <input type="text" class="atk-input" aria-label="Enter the number of page" />
-          <div class="atk-btn atk-btn-next">Next</div>
+          <div class="atk-btn atk-btn-next" aria-label="Next page">
+            <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="14px" width="14px" xmlns="http://www.w3.org/2000/svg"><path d="M294.1 256L167 129c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.3 34 0L345 239c9.1 9.1 9.3 23.7.7 33.1L201.1 417c-4.7 4.7-10.9 7-17 7s-12.3-2.3-17-7c-9.4-9.4-9.4-24.6 0-33.9l127-127.1z"></path></svg>
+          </div>
         </div>
       </div>`)
     this.$input = this.$el.querySelector('.atk-input')!

diff --git a/ui/artalk/src/style/pagination.scss b/ui/artalk/src/style/pagination.scss
@@ -7,7 +7,6 @@
 
   & > .atk-btn,
   & > .atk-input {
-    font-size: 15px;
     height: 30px;
     border: 1px solid var(--at-color-border);
     border-radius: 3px;
@@ -18,7 +17,7 @@
 
   & > .atk-btn {
     user-select: none;
-    width: 70px;
+    width: 60px;
     cursor: pointer;
     display: flex;
     justify-content: center;