From ca08ec1ae7c0003a186fb5a38b56208d4baf30bd Mon Sep 17 00:00:00 2001
From: Emile Bangma <github@emilebangma.com>
Date: Wed, 12 Mar 2025 13:15:16 +0000
Subject: [PATCH] fix(explorer): mobile explorer toggle (#1823)
---
quartz/components/styles/explorer.scss | 36 +++++++++++++++++++-----------------
1 files changed, 19 insertions(+), 17 deletions(-)
diff --git a/quartz/components/styles/explorer.scss b/quartz/components/styles/explorer.scss
index b769726..69f7909 100644
--- a/quartz/components/styles/explorer.scss
+++ b/quartz/components/styles/explorer.scss
@@ -20,7 +20,7 @@
margin: 0;
}
- .hide-until-loaded ~ #explorer-content {
+ .hide-until-loaded ~ .explorer-content {
display: none;
}
}
@@ -30,6 +30,8 @@
display: flex;
flex-direction: column;
overflow-y: hidden;
+
+ min-height: 1.2rem;
flex: 0 1 auto;
&.collapsed {
flex: 0 1 1.2rem;
@@ -52,20 +54,20 @@
align-self: flex-start;
}
- button#mobile-explorer {
+ button.mobile-explorer {
display: none;
}
- button#desktop-explorer {
+ button.desktop-explorer {
display: flex;
}
@media all and ($mobile) {
- button#mobile-explorer {
+ button.mobile-explorer {
display: flex;
}
- button#desktop-explorer {
+ button.desktop-explorer {
display: none;
}
}
@@ -86,8 +88,8 @@
}
}
-button#mobile-explorer,
-button#desktop-explorer {
+button.mobile-explorer,
+button.desktop-explorer {
background-color: transparent;
border: none;
text-align: left;
@@ -104,7 +106,7 @@
}
}
-#explorer-content {
+.explorer-content {
list-style: none;
overflow: hidden;
overflow-y: auto;
@@ -209,22 +211,22 @@
&.collapsed {
flex: 0 0 34px;
- & > #explorer-content {
- transform: translateX(-100vw);
- visibility: hidden;
+ & > .explorer-content {
+ transform: translateX(0);
+ visibility: visible;
}
}
&:not(.collapsed) {
flex: 0 0 34px;
- & > #explorer-content {
- transform: translateX(0);
- visibility: visible;
+ & > .explorer-content {
+ transform: translateX(-100vw);
+ visibility: hidden;
}
}
- #explorer-content {
+ .explorer-content {
box-sizing: border-box;
z-index: 100;
position: absolute;
@@ -234,7 +236,7 @@
background-color: var(--light);
max-width: 100vw;
width: 100%;
- transform: translateX(-100vw);
+ transform: translateX(0);
transition:
transform 200ms ease,
visibility 200ms ease;
@@ -245,7 +247,7 @@
visibility: hidden;
}
- #mobile-explorer {
+ .mobile-explorer {
margin: 0;
padding: 5px;
z-index: 101;
--
Gitblit v1.10.0