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
content.classList.toggle("collapsed")
//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
if (this.dataset.mobile === "true" && document.querySelector("#mobile-explorer")) {
if (document.querySelector("#mobile-explorer")) {
const article = document.querySelectorAll(
".popover-hint, footer, .backlinks, .graph, .toc, #progress",
)
const header = document.querySelector(".page .page-header")
const header = document.querySelector("#quartz-body")
if (article)
article.forEach((element) => {
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 *;
.explorer-container {
overflow-y: hidden;
.mobile-explorer {
display: none;
}
@ -18,6 +19,7 @@
.mobile-explorer,
.desktop-explorer {
height: 100%;
flex-direction: column;
overflow-y: hidden;
&.desktop-only {
@ -197,25 +199,25 @@
margin: 0;
}
.mobile-explorer,
.desktop-explorer {
.mobile-explorer {
#explorer-content {
overscroll-behavior: none;
//left: 0;
z-index: 100;
position: absolute;
//max-height: max-content !important;
background-color: var(--light);
//max-width: calc(100% - 36px);
max-width: 100%;
width: calc(100% - 36px + 4px);
//margin-right: 36px;
max-width: calc(100% - 4rem);
left: 0;
width: 100%;
transition: all 300ms ease-in-out;
overflow: hidden;
padding: 0 16px;
height: calc(100dvh - 8rem);
padding: 1rem 2rem 5rem;
//height: calc(100dvh - 36px);
height: 100%;
max-height: calc(100dvh - 8rem);
//border-top-left-radius: 23px;
//border-top-right-radius: 23px;
border-radius: 23px;
margin-top: 36px;
&:not(.collapsed) {
@ -233,8 +235,7 @@
}
}
#mobile-explorer,
#desktop-explorer {
#mobile-explorer {
&:not(.collapsed) .lucide-menu {
transform: rotate(90deg);
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;
}
}