byte/speisekarten-quartz
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(explorer): Prevent html from being scrollable when mobile explorer is open (#1895)

Browse source 
* Fixed html page being scrollable when mobile explorer is open

* Prettier code

* Addressed comment
This commit is contained in:
Stephen Tse 2025-04-26 11:13:56 -07:00 • committed by GitHub
parent 9e58857746
commit 2acdec323f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 24 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
quartz/components/scripts/explorer.inline.ts
View file

@ -23,11 +23,18 @@ let currentExplorerState: Array<FolderState>
function toggleExplorer(this: HTMLElement) { function toggleExplorer(this: HTMLElement) {
const nearestExplorer = this.closest(".explorer") as HTMLElement const nearestExplorer = this.closest(".explorer") as HTMLElement
if (!nearestExplorer) return if (!nearestExplorer) return
nearestExplorer.classList.toggle("collapsed") const explorerCollapsed = nearestExplorer.classList.toggle("collapsed")
nearestExplorer.setAttribute( nearestExplorer.setAttribute(
"aria-expanded", "aria-expanded",
nearestExplorer.getAttribute("aria-expanded") === "true" ? "false" : "true", nearestExplorer.getAttribute("aria-expanded") === "true" ? "false" : "true",
) )
if (!explorerCollapsed) {
// Stop <html> from being scrollable when mobile explorer is open
document.documentElement.classList.add("mobile-no-scroll")
} else {
document.documentElement.classList.remove("mobile-no-scroll")
}
} }
function toggleFolder(evt: MouseEvent) { function toggleFolder(evt: MouseEvent) {
@ -270,12 +277,25 @@ document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
if (mobileExplorer.checkVisibility()) { if (mobileExplorer.checkVisibility()) {
explorer.classList.add("collapsed") explorer.classList.add("collapsed")
explorer.setAttribute("aria-expanded", "false") explorer.setAttribute("aria-expanded", "false")
// Allow <html> to be scrollable when mobile explorer is collapsed
document.documentElement.classList.remove("mobile-no-scroll")
} }
mobileExplorer.classList.remove("hide-until-loaded") mobileExplorer.classList.remove("hide-until-loaded")
} }
}) })
window.addEventListener("resize", function () {
// Desktop explorer opens by default, and it stays open when the window is resized
// to mobile screen size. Applies `no-scroll` to <html> in this edge case.
const explorer = document.querySelector(".explorer")
if (explorer && !explorer.classList.contains("collapsed")) {
document.documentElement.classList.add("mobile-no-scroll")
return
}
})
function setFolderState(folderElement: HTMLElement, collapsed: boolean) { function setFolderState(folderElement: HTMLElement, collapsed: boolean) {
return collapsed ? folderElement.classList.remove("open") : folderElement.classList.add("open") return collapsed ? folderElement.classList.remove("open") : folderElement.classList.add("open")
} }

18
quartz/components/styles/explorer.scss
View file

@ -263,22 +263,8 @@ li:has(> .folder-outer:not(.open)) > .folder-container > svg {
} }
} }
.no-scroll { .mobile-no-scroll {
opacity: 0; @media all and ($mobile) {
overflow: hidden; overflow: hidden;
} }
html:has(.no-scroll) {
overflow: hidden;
}
@media all and not ($mobile) {
.no-scroll {
opacity: 1 !important;
overflow: auto !important;
}
html:has(.no-scroll) {
overflow: auto !important;
}
} }