From a6896431825501e0e9010d4c4b0ec9b938b9c2cc Mon Sep 17 00:00:00 2001 From: saberzero1 Date: Tue, 24 Sep 2024 23:39:05 +0200 Subject: [PATCH] Mobile explorer --- quartz.layout.ts | 4 +- quartz/components/Explorer.tsx | 23 +++++ quartz/components/scripts/explorer.inline.ts | 16 +++- quartz/components/styles/darkmode.scss | 5 + quartz/components/styles/explorer.scss | 96 +++++++++++++++++++- quartz/components/styles/search.scss | 2 + quartz/styles/base.scss | 2 +- 7 files changed, 141 insertions(+), 7 deletions(-) diff --git a/quartz.layout.ts b/quartz.layout.ts index 4a78256aa..f45da0c92 100644 --- a/quartz.layout.ts +++ b/quartz.layout.ts @@ -27,7 +27,7 @@ export const defaultContentPageLayout: PageLayout = { Component.MobileOnly(Component.Spacer()), Component.Search(), Component.Darkmode(), - Component.DesktopOnly(Component.Explorer()), + Component.Explorer(), ], right: [ Component.Graph(), @@ -44,7 +44,7 @@ export const defaultListPageLayout: PageLayout = { Component.MobileOnly(Component.Spacer()), Component.Search(), Component.Darkmode(), - Component.DesktopOnly(Component.Explorer()), + Component.Explorer(), ], right: [], } diff --git a/quartz/components/Explorer.tsx b/quartz/components/Explorer.tsx index ec7c48ef7..fcfe17dde 100644 --- a/quartz/components/Explorer.tsx +++ b/quartz/components/Explorer.tsx @@ -111,6 +111,29 @@ export default ((userOpts?: Partial) => { > + + + + + + + + + +
    diff --git a/quartz/components/scripts/explorer.inline.ts b/quartz/components/scripts/explorer.inline.ts index 584de6c37..6b977bb04 100644 --- a/quartz/components/scripts/explorer.inline.ts +++ b/quartz/components/scripts/explorer.inline.ts @@ -24,8 +24,16 @@ function toggleExplorer(this: HTMLElement) { const content = this.nextElementSibling as MaybeHTMLElement if (!content) return + const mobileView = window.innerWidth <= 800 + content.classList.toggle("collapsed") - content.style.maxHeight = content.style.maxHeight === "0px" ? content.scrollHeight + "px" : "0px" + if (mobileView) { + content.style.maxHeight = + content.style.maxHeight === "0px" ? window.innerHeight - 72 + "px" : "0px" + } else { + content.style.maxHeight = + content.style.maxHeight === "0px" ? content.scrollHeight + "px" : "0px" + } } function toggleFolder(evt: MouseEvent) { @@ -114,6 +122,12 @@ document.addEventListener("nav", () => { } }) +const explorerContent = document.getElementById("explorer-content") +if (explorerContent && window.innerWidth <= 800) { + explorerContent.style.maxHeight = + explorerContent.style.maxHeight === "0px" ? explorerContent.scrollHeight + "px" : "0px" +} + /** * Toggles the state of a given folder * @param folderElement
    Element of folder (parent) diff --git a/quartz/components/styles/darkmode.scss b/quartz/components/styles/darkmode.scss index edf4e61cf..2738fe90e 100644 --- a/quartz/components/styles/darkmode.scss +++ b/quartz/components/styles/darkmode.scss @@ -1,3 +1,5 @@ +@use "../../styles/variables.scss" as *; + .darkmode { cursor: pointer; padding: 0; @@ -7,6 +9,9 @@ width: 20px; height: 20px; margin: 0 10px; + @media all and ($mobile) { + margin: auto 10px; + } text-align: inherit; & svg { diff --git a/quartz/components/styles/explorer.scss b/quartz/components/styles/explorer.scss index 710d7a513..03db1a0ce 100644 --- a/quartz/components/styles/explorer.scss +++ b/quartz/components/styles/explorer.scss @@ -1,9 +1,7 @@ @use "../../styles/variables.scss" as *; .explorer { - &.desktop-only { - overflow-y: auto; - } + overflow-y: auto; &:after { pointer-events: none; content: ""; @@ -16,6 +14,59 @@ transition: opacity 0.3s ease; background: linear-gradient(transparent 0px, var(--light)); } + @media all and ($mobile) { + position: fixed; + overflow: visible; + width: 32px; + height: 32px; + margin-top: auto; + margin-bottom: auto; + background-color: var(--light); + transition: + width 0s linear 0.35s, + height 0.35s ease, + visibility 0s linear 0.35s; + &:before { + content: ""; + height: 0; + width: 100vw; + display: inline-block; + position: absolute; + bottom: 100%; + background-color: var(--light); + transition: height 0.35s ease; + } + &:has(> #explorer-content.collapsed) { + &:before { + height: 2rem; + transition: height 0.35s ease; + } + overflow: inherit; + width: 100%; + height: calc(100vh - 32px); + background-color: var(--light); + transition: + width 0s linear 0s, + height 0.35s ease, + visibility 0s linear 0s; + > button#explorer { + position: relative; + } + } + > button#explorer { + width: 32px; + height: 32px; + } + &::after { + display: none; + } + } +} + +body:has(.explorer > #explorer-content.collapsed) { + @media all and ($mobile) { + overflow-y: hidden; + } } button#explorer { @@ -43,6 +94,25 @@ button#explorer { &.collapsed .fold { transform: rotateZ(-90deg); } + + .mobile-explorer-button { + display: none; + height: 32px; + width: 32px; + } + + @media all and ($mobile) { + > h2, + > svg { + display: none; + } + .mobile-explorer-button { + display: block; + > * { + stroke: var(--darkgray); + } + } + } } .folder-outer { @@ -76,6 +146,26 @@ button#explorer { visibility: hidden; } + @media all and ($mobile) { + transition: + max-height 0.35s ease, + visibility 0s linear 0.35s; + visibility: hidden; + max-height: 0px; + &.collapsed { + transition: + max-height 0.35s ease, + visibility 0s linear 0s; + visibility: visible; + max-height: calc(100vh - 32px); + max-width: calc(100vw - 20px); + overflow-y: auto; + .overflow:after { + background: none; + } + } + } + & ul { list-style: none; margin: 0.08rem 0; diff --git a/quartz/components/styles/search.scss b/quartz/components/styles/search.scss index b0df6c8b3..99ff2853b 100644 --- a/quartz/components/styles/search.scss +++ b/quartz/components/styles/search.scss @@ -5,6 +5,8 @@ max-width: 14rem; @media all and ($mobile) { flex-grow: 0.3; + margin-top: auto; + margin-bottom: auto; } & > .search-button { diff --git a/quartz/styles/base.scss b/quartz/styles/base.scss index c70d8b6f9..a7f068cbb 100644 --- a/quartz/styles/base.scss +++ b/quartz/styles/base.scss @@ -194,7 +194,7 @@ a { flex-direction: column; @media all and ($mobile) { gap: 0; - align-items: center; + align-items: start; position: initial; display: flex; height: unset;