fix: open search modal scroll down by three percent

- Upgrade the style and animation for openinning search modal

src/components/MobileMenu.vue

@@ -255,23 +255,4 @@ export default defineComponent({
     transform: translateX(0);
   }
 }
-
-@keyframes opacity_show {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-
-@keyframes opacity_hide {
-  0% {
-    opacity: 1;
-  }
-
-  100% {
-    opacity: 0;
-  }
-}
 </style>

src/components/SearchModal.vue

@@ -11,7 +11,11 @@
     tabindex="-1"
   >
     <transition name="fade-bounce-pure-y" mode="out-in">
-      <div class="search-container" v-if="openSearchContainer">
+      <div
+        id="search-container"
+        class="search-container"
+        v-if="openSearchContainer"
+      >
         <header class="flex pt-4 pr-4 pl-4">
           <form class="search-form" action="">
             <label
@@ -502,7 +506,15 @@ export default defineComponent({
          * of the search box container.
          */
         if (status === true) reloadRecentResult()
-        openModal.value = status
+
+        if (status === false) {
+          setTimeout(() => {
+            openModal.value = status
+          }, 850)
+        } else {
+          openModal.value = status
+        }
+
         setTimeout(() => {
           openSearchContainer.value = status
         }, 200)

src/stores/search.ts

@@ -33,9 +33,17 @@ export const useSearchStore = defineStore({
      */
     setOpenModal(status: boolean) {
       this.openModal = status
-      if (status === true) document.body.classList.add('modal--active')
-      else document.body.classList.remove('modal--active')
-      document.getElementById('App-Container')?.focus()
+      let searchContainer: HTMLElement | null
+      if (status === true) {
+        document.body.classList.add('modal--active')
+      } else {
+        searchContainer = document.getElementById('search-modal')
+        if (searchContainer) {
+          searchContainer.style.animation =
+            '0.85s ease 0s 1 normal none running opacity_hide'
+        }
+        document.body.classList.remove('modal--active')
+      }
     },
     addRecentSearch(result: { [key: string]: string }) {
       this.recentResults.add(result)

src/styles/components/search-modal.scss

@@ -1,17 +1,21 @@
 .modal--active {
+  max-height: 100vh;
   overflow: hidden !important;
+  #search-modal {
+    animation: 0.85s ease 0s 1 normal none running opacity_show;
+  }
 }
 
 #search-modal {
   --search-modal-height: 600px;
   --search-modal-searchbox-height: 56px;
   --search-modal-spacing: 12px;
   --search-modal-footer-height: 44px;
-  @apply fixed h-screen w-screen top-0 left-0 transition-colors;
-  background-color: rgba(26, 26, 26, 0.8);
-  z-index: 250;
+  @apply fixed h-screen w-screen top-0 left-0 transition-opacity backdrop-blur-lg;
+  background: var(--background-blur);
+  z-index: 1100;
   .search-container {
-    @apply bg-ob-deep-900 rounded-2xl shadow-2xl mt-16 mb-auto mr-2 lg:mr-auto ml-2 lg:ml-auto max-w-xl relative;
+    @apply bg-ob-deep-900 rounded-2xl shadow-2xl mt-[6rem] mb-auto mr-2 lg:mr-auto ml-2 lg:ml-auto max-w-xl relative;
   }
   .search-form {
     @apply bg-ob-deep-800 items-center rounded-xl shadow-md flex h-14 py-0 px-3 relative w-full border-ob border-2;

src/styles/index.scss

@@ -128,3 +128,23 @@ b {
   background: inherit;
   border-radius: inherit;
 }
+
+@keyframes opacity_show {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes opacity_hide {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}