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

Restore position

Browse Source
This commit is contained in:
saberzero1 2024-10-26 14:44:58 +02:00
parent 979d653b1a
commit 90e984e98b
No known key found for this signature in database
GPG Key ID: 41AEE99107640F10
2 changed files with 27 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -40,7 +40,18 @@ function toggleExplorer(this: HTMLElement) {
if (document.querySelector("#mobile-explorer")) { if (document.querySelector("#mobile-explorer")) {
// Disable scrolling one the page when the explorer is opened on mobile // Disable scrolling one the page when the explorer is opened on mobile
const bodySelector = document.querySelector("#quartz-body") const bodySelector = document.querySelector("#quartz-body")
if (bodySelector) bodySelector.classList.toggle("lock-scroll") if (bodySelector) {
if (!bodySelector.classList.contains("lock-scroll")) {
bodySelector.setAttribute("scroll-position", `${window.scrollY}`)
bodySelector.classList.toggle("lock-scroll")
} else {
bodySelector.classList.toggle("lock-scroll")
window.scrollTo({
top: Number(bodySelector.getAttribute("scroll-position")),
behavior: "instant",
})
}
}
} }
} }

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

@ -1,14 +1,23 @@
@use "../../styles/variables.scss" as *; @use "../../styles/variables.scss" as *;
// Sticky top bar (stays in place when scrolling down on mobile.
@media all and ($mobile) {
.page > #quartz-body .sidebar.left:has(.explorer) {
box-sizing: border-box;
position: sticky;
background-color: var(--light);
}
}
.explorer { .explorer {
display: flex;
@media all and ($mobile) { @media all and ($mobile) {
order: -1; order: -1;
height: initial; height: initial;
overflow: hidden; overflow: hidden;
} }
display: flex;
button#mobile-explorer { button#mobile-explorer {
display: none; display: none;
} }
@ -220,7 +229,8 @@ li:has(> .folder-outer:not(.open)) > .folder-container > svg {
position: absolute; position: absolute;
background-color: var(--light); background-color: var(--light);
max-width: 100dvw; max-width: 100dvw;
left: -100dvw; //left: -100dvw;
transform: translateX(-100dvw);
width: 100%; width: 100%;
transition: all 300ms ease-in-out; transition: all 300ms ease-in-out;
overflow: hidden; overflow: hidden;
@ -231,7 +241,7 @@ li:has(> .folder-outer:not(.open)) > .folder-container > svg {
visibility: visible; visibility: visible;
&:not(.collapsed) { &:not(.collapsed) {
left: 0; transform: translateX(0);
} }
ul.overflow { ul.overflow {
@ -240,7 +250,7 @@ li:has(> .folder-outer:not(.open)) > .folder-container > svg {
} }
&.collapsed { &.collapsed {
left: -100dvw; transform: translateX(-100dvw);
visibility: visible; visibility: visible;
} }
} }
@ -284,15 +294,3 @@ html:has(.no-scroll) {
overflow: auto !important; overflow: auto !important;
} }
} }
// Lock page scroll on mobile
.lock-scroll {
position: static;
}
@media all and ($mobile) {
.lock-scroll {
position: fixed;
width: calc(100% - 2rem);
}
}