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

fix(explorer): dont invert mobile css, properly toggle .collapsed

Browse source
This commit is contained in:
Jacky Zhao 2025-03-12 10:15:54 -07:00
parent ca08ec1ae7
commit e3c50caf13
2 changed files with 12 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -259,15 +259,17 @@ document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
await setupExplorer(currentSlug)
// if mobile hamburger is visible, collapse by default
for (const explorer of document.getElementsByClassName("mobile-explorer")) {
if (explorer.checkVisibility()) {
for (const explorer of document.getElementsByClassName("explorer")) {
const mobileExplorer = explorer.querySelector(".mobile-explorer")
if (!mobileExplorer) return
if (mobileExplorer.checkVisibility()) {
explorer.classList.add("collapsed")
explorer.setAttribute("aria-expanded", "false")
}
}
const hiddenUntilDoneLoading = document.querySelector(".mobile-explorer")
hiddenUntilDoneLoading?.classList.remove("hide-until-loaded")
mobileExplorer.classList.remove("hide-until-loaded")
}
})
function setFolderState(folderElement: HTMLElement, collapsed: boolean) {

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

@ -212,8 +212,8 @@ li:has(> .folder-outer:not(.open)) > .folder-container > svg {
flex: 0 0 34px;
& > .explorer-content {
transform: translateX(0);
visibility: visible;
transform: translateX(-100vw);
visibility: hidden;
}
}
@ -221,8 +221,8 @@ li:has(> .folder-outer:not(.open)) > .folder-container > svg {
flex: 0 0 34px;
& > .explorer-content {
transform: translateX(-100vw);
visibility: hidden;
transform: translateX(0);
visibility: visible;
}
}
@ -236,7 +236,7 @@ li:has(> .folder-outer:not(.open)) > .folder-container > svg {
background-color: var(--light);
max-width: 100vw;
width: 100%;
transform: translateX(0);
transform: translateX(-100vw);
transition:
transform 200ms ease,
visibility 200ms ease;