From 689dd9b383f5e490050c71d82914f3c0a4646f6c Mon Sep 17 00:00:00 2001
From: Benny Guo <bennyxguo6@gmail.com>
Date: Thu, 17 Aug 2023 03:25:22 +0800
Subject: [PATCH] feat: pagination button UI upgrade

---
 src/components/Footer/FooterLink.vue |  3 --
 src/components/Link/LinkCard.vue     | 42 ----------------------------
 src/components/Paginator.vue         | 40 ++++++++++++++++++++------
 src/styles/index.scss                | 42 ++++++++++++++++++++++++++++
 4 files changed, 74 insertions(+), 53 deletions(-)

diff --git a/src/components/Footer/FooterLink.vue b/src/components/Footer/FooterLink.vue
index 4bb78a5c..c7f4f5d0 100644
--- a/src/components/Footer/FooterLink.vue
+++ b/src/components/Footer/FooterLink.vue
@@ -133,9 +133,6 @@ export default defineComponent({
 <style lang="scss">
 .footer-link-divider {
   @apply flex h-1 w-2/3 lg:w-2/5 mt-4 mb-8 relative opacity-70 rounded-full shadow-xl;
-  /* .footer-link-img-wrapper {
-    border: 2rem solid var(--background-primary);
-  } */
   .footer-link-avatar {
     @apply m-0 h-10 w-10 shadow-xl absolute rounded-full box-content;
     left: 50%;
diff --git a/src/components/Link/LinkCard.vue b/src/components/Link/LinkCard.vue
index 0c4e9a4b..aadb58c2 100644
--- a/src/components/Link/LinkCard.vue
+++ b/src/components/Link/LinkCard.vue
@@ -72,48 +72,6 @@ export default defineComponent({
 <style lang="scss">
 #link-card {
   @apply relative;
-  &.highlighted {
-    @apply border-solid;
-    border-width: 1px;
-    border-color: var(--bg-sub-accent-55);
-  }
-  &.highlighted:before {
-    content: '';
-    z-index: -1;
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    background: linear-gradient(
-      130deg,
-      rgb(36, 198, 220, 0.5),
-      rgb(84, 51, 255, 0.5) 41.07%,
-      rgb(255, 0, 153, 0.5) 76.05%
-    );
-    transform: translate3d(0px, 25px, 0) scale(0.85);
-    filter: blur(20px);
-    opacity: var(0.7);
-    transition: opacity 0.3s;
-    border-radius: inherit;
-  }
-
-  /*
-  * Prevents issues when the parent creates a
-  * stacking context. (For example, using the transform
-  * property )
-  */
-  &.highlighted::after {
-    content: '';
-    z-index: -1;
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    background: inherit;
-    border-radius: inherit;
-  }
 
   &.highlighted.category-mode .article .article-content p {
     @apply h-12 sm:h-14 lg:h-[4.6rem];
diff --git a/src/components/Paginator.vue b/src/components/Paginator.vue
index 3491f8e4..e1e0f7e0 100644
--- a/src/components/Paginator.vue
+++ b/src/components/Paginator.vue
@@ -2,12 +2,12 @@
   <div class="paginator">
     <ul>
       <li
-        class="text-ob-bright"
+        class="page-navigator text-ob-bright navigator-right"
         v-if="currentPage > 1"
         @click="pageChangeEmitter(currentPage - 1)"
       >
         <SvgIcon icon-class="arrow-left" />
-        {{ t('settings.paginator.newer') }}
+        <span>{{ t('settings.paginator.newer') }}</span>
       </li>
       <li
         v-if="paginator.head !== 0"
@@ -22,7 +22,7 @@
         :class="{ active: currentPage === page }"
         @click="pageChangeEmitter(page)"
       >
-        {{ page }}
+        <span>{{ page }}</span>
       </li>
       <li
         v-if="paginator.end !== 0"
@@ -32,11 +32,11 @@
         {{ paginator.end }}
       </li>
       <li
-        class="text-ob-bright"
+        class="page-navigator text-ob-bright navigator-left"
         v-if="currentPage < pages"
         @click="pageChangeEmitter(currentPage + 1)"
       >
-        {{ t('settings.paginator.older') }}
+        <span>{{ t('settings.paginator.older') }}</span>
         <SvgIcon icon-class="arrow-right" />
       </li>
     </ul>
@@ -139,9 +139,33 @@ export default defineComponent({
   ul {
     @apply flex flex-row;
     li {
-      @apply flex flex-row items-center uppercase font-extrabold cursor-pointer mr-2;
-      &:hover {
-        opacity: 0.5;
+      @apply flex items-center justify-center uppercase font-extrabold cursor-pointer mr-2 p-1 bg-ob-deep-800 rounded-lg overflow-hidden w-10 h-10;
+      svg,
+      span {
+        opacity: 0.7;
+        transition: 200ms all ease-in-out;
+      }
+      &.page-navigator {
+        @apply w-20;
+        &.navigator-right span {
+          @apply -mr-10 opacity-0;
+          transition: 300ms all ease-in-out;
+        }
+        &.navigator-left span {
+          @apply -ml-10 opacity-0;
+          transition: 300ms all ease-in-out;
+        }
+        &:hover.navigator-right span {
+          @apply opacity-100 mr-0;
+        }
+        &:hover.navigator-left span {
+          @apply opacity-100 ml-0;
+        }
+      }
+      &:hover:not(.navigator-right, .navigator-left) span,
+      &:hover svg {
+        opacity: 1;
+        transform: scale(1.25);
       }
       svg {
         @apply mx-2 font-extrabold text-ob;
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 07ab089a..e04e8145 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -82,3 +82,45 @@ div::-webkit-scrollbar-track {
   border: none;
   background: transparent !important;
 }
+
+.highlighted {
+  @apply border-solid;
+  border-width: 1px;
+  border-color: var(--bg-sub-accent-55);
+}
+
+.highlighted:before {
+  content: '';
+  z-index: -1;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background: linear-gradient(130deg,
+      rgb(36, 198, 220, 0.5),
+      rgb(84, 51, 255, 0.5) 41.07%,
+      rgb(255, 0, 153, 0.5) 76.05%);
+  transform: translate3d(0px, 25px, 0) scale(0.85);
+  filter: blur(20px);
+  opacity: var(0.7);
+  transition: opacity 0.3s;
+  border-radius: inherit;
+}
+
+/*
+  * Prevents issues when the parent creates a
+  * stacking context. (For example, using the transform
+  * property )
+  */
+.highlighted::after {
+  content: '';
+  z-index: -1;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background: inherit;
+  border-radius: inherit;
+}