tomoyanonymous/quartz-research-note
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
* 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>
This commit is contained in:
Aaron Pham 2024-02-01 19:44:33 -05:00 committed by GitHub
parent 756acc7f97
commit 295b8fc914
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 11 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
quartz/components/scripts/search.inline.ts
View File

@ -451,6 +451,10 @@ document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
searchLayout.style.opacity = "1" searchLayout.style.opacity = "1"
} }
if (term === "" && searchLayout) {
searchLayout.style.opacity = "0"
}
if (term.toLowerCase().startsWith("#")) { if (term.toLowerCase().startsWith("#")) {
searchType = "tags" searchType = "tags"
} else { } else {

13
quartz/components/styles/search.scss
View File

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