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>
compilin · Feb 2, 2024 · dfca481 · dfca481
1 parent 522378d
commit dfca481
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 6 deletions.
diff --git a/components/scripts/search.inline.ts b/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/components/styles/search.scss b/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 {