smyalygames/quartz
Template
1
0
Fork 0
mirror of https://github.com/jackyzha0/quartz.git synced 2025-05-18 22:44:14 +02:00
Code Issues Actions Packages Projects Releases Wiki Activity

Finished mobile explorer

Browse Source
This commit is contained in:
saberzero1 2024-10-01 23:24:08 +02:00
parent a190cba737
commit 139573ffd6
No known key found for this signature in database
GPG Key ID: 41AEE99107640F10
2 changed files with 26 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
quartz/components/scripts/explorer.inline.ts
View File

@ -62,19 +62,19 @@ function toggleExplorer(this: HTMLElement) {
if (!content) return if (!content) return
content.classList.toggle("collapsed") content.classList.toggle("collapsed")
//content.style.maxHeight = content.style.maxHeight === "0px" ? content.scrollHeight + "px" : "0px" //content.style.maxHeight = content.style.maxHeight === "0px" ? content.scrollHeight + "px" : "0px"
content.style.maxHeight = content.style.maxHeight === "0px" ? "calc(100vh - 8rem)" : "0px" content.style.maxHeight = content.style.maxHeight === "0px" ? "100vh" : "0px"
//prevent scroll under //prevent scroll under
if (this.dataset.mobile === "true" && document.querySelector("#mobile-explorer")) { if (document.querySelector("#mobile-explorer")) {
const article = document.querySelectorAll( const article = document.querySelectorAll(
".popover-hint, footer, .backlinks, .graph, .toc, #progress", ".popover-hint, footer, .backlinks, .graph, .toc, #progress",
) )
const header = document.querySelector(".page .page-header") const header = document.querySelector("#quartz-body")
if (article) if (article)
article.forEach((element) => { article.forEach((element) => {
element.classList.toggle("no-scroll") element.classList.toggle("no-scroll")
}) })
if (header) header.classList.toggle("fixed") if (header) header.classList.toggle("lock-scroll")
} }
} }

33
quartz/components/styles/explorer.scss
View File

@ -1,6 +1,7 @@
@use "../../styles/variables.scss" as *; @use "../../styles/variables.scss" as *;
.explorer-container { .explorer-container {
overflow-y: hidden;
.mobile-explorer { .mobile-explorer {
display: none; display: none;
} }
@ -18,6 +19,7 @@
.mobile-explorer, .mobile-explorer,
.desktop-explorer { .desktop-explorer {
height: 100%;
flex-direction: column; flex-direction: column;
overflow-y: hidden; overflow-y: hidden;
&.desktop-only { &.desktop-only {
@ -197,25 +199,25 @@
margin: 0; margin: 0;
} }
.mobile-explorer, .mobile-explorer {
.desktop-explorer {
#explorer-content { #explorer-content {
overscroll-behavior: none;
//left: 0; //left: 0;
z-index: 100; z-index: 100;
position: absolute; position: absolute;
//max-height: max-content !important; //max-height: max-content !important;
background-color: var(--light); background-color: var(--light);
//max-width: calc(100% - 36px); max-width: calc(100% - 4rem);
max-width: 100%; left: 0;
width: calc(100% - 36px + 4px); width: 100%;
//margin-right: 36px;
transition: all 300ms ease-in-out; transition: all 300ms ease-in-out;
overflow: hidden; overflow: hidden;
padding: 0 16px; padding: 1rem 2rem 5rem;
height: calc(100dvh - 8rem); //height: calc(100dvh - 36px);
height: 100%;
max-height: calc(100dvh - 8rem);
//border-top-left-radius: 23px; //border-top-left-radius: 23px;
//border-top-right-radius: 23px; //border-top-right-radius: 23px;
border-radius: 23px;
margin-top: 36px; margin-top: 36px;
&:not(.collapsed) { &:not(.collapsed) {
@ -233,8 +235,7 @@
} }
} }
#mobile-explorer, #mobile-explorer {
#desktop-explorer {
&:not(.collapsed) .lucide-menu { &:not(.collapsed) .lucide-menu {
transform: rotate(90deg); transform: rotate(90deg);
transition: transform 200ms ease-in-out; transition: transform 200ms ease-in-out;
@ -268,3 +269,13 @@
} }
} }
} }
// Lock page scroll on mobile
.lock-scroll {
position: static;
}
@media all and ($mobile) {
.lock-scroll {
position: fixed;
}
}