fix(search): increase size on fullPageWidth viewport (jackyzha0#784)

* fix(search): increase size on fullPageWidth viewport Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> * chore: fix width size to be consistent on multiple views Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> * chore: set layout to 0 if there is no term remove flashing by setting max-height Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> --------- Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com>
qazxcdswe123 · Apr 18, 2024 · 702654f · 702654f
1 parent 29d9738
commit 702654f
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 6 deletions.
diff --git a/quartz/components/scripts/search.inline.ts b/quartz/components/scripts/search.inline.ts
@@ -451,6 +451,10 @@ document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
       searchLayout.style.opacity = "1"
     }
 
+    if (term === "" && searchLayout) {
+      searchLayout.style.opacity = "0"
+    }
+
     if (term.toLowerCase().startsWith("#")) {
       searchType = "tags"
     } else {

diff --git a/quartz/components/styles/search.scss b/quartz/components/styles/search.scss
@@ -54,15 +54,11 @@
     }
 
     & > #search-space {
-      width: 50%;
+      width: 75%;
       margin-top: 12vh;
       margin-left: auto;
       margin-right: auto;
 
-      @media all and (max-width: $fullPageWidth) {
-        width: 90%;
-      }
-
       & > * {
         width: 100%;
         border-radius: 5px;
@@ -94,7 +90,8 @@
         border: 1px solid var(--lightgray);
 
         & > div {
-          height: calc(75vh - 20em);
+          // vh - #search-space.margin-top
+          height: calc(75vh - 12vh);
           background: none;
 
           &:first-child {
@@ -146,6 +143,10 @@
               0 14px 50px rgba(27, 33, 48, 0.12),
               0 10px 30px rgba(27, 33, 48, 0.16);
           }
+
+          a.internal {
+            background-color: none;
+          }
         }
 
         & > #results-container {