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

fix(explorer): Prevent html from being scrollable when mobile explorer is open (#1895)
Some checks failed
Build and Test / build-and-test (ubuntu-latest) (push) Has been skipped
Details
Build and Test / publish-tag (push) Has been skipped
Details
Build and Test / build-and-test (macos-latest) (push) Has been cancelled
Details
Build and Test / build-and-test (windows-latest) (push) Has been cancelled
Details

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")
} }

20
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;
} }
} }