keb/jpg-quartz
1
0
Fork 0
mirror of https://github.com/ZetaKebab/quartz.git synced 2025-06-22 00:34:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(explorer): collapsible mobile explorer (#1471)

Browse Source 
Co-authored-by: Aaron Pham <Aaronpham0103@gmail.com>
This commit is contained in:
Emile Bangma
2025-02-03 15:25:42 +01:00
committed by GitHub
parent fbc45548f7
commit 91189dfd2f
4 changed files with 296 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

150
quartz/components/styles/explorer.scss
View File

@ -1,14 +1,70 @@
@use "../../styles/variables.scss" as *;
@media all and ($mobile) {
.page > #quartz-body {
// Shift page position when toggling Explorer on mobile.
& > :not(.sidebar.left:has(.explorer)) {
transform: translateX(0);
transition: transform 300ms ease-in-out;
}
&.lock-scroll > :not(.sidebar.left:has(.explorer)) {
transform: translateX(100dvw);
transition: transform 300ms ease-in-out;
}
// Sticky top bar (stays in place when scrolling down on mobile).
.sidebar.left:has(.explorer) {
box-sizing: border-box;
position: sticky;
background-color: var(--light);
}
// Hide Explorer on mobile until done loading.
// Prevents ugly animation on page load.
.hide-until-loaded ~ #explorer-content {
display: none;
}
}
}
.explorer {
display: flex;
height: 100%;
flex-direction: column;
overflow-y: hidden;
@media all and ($mobile) {
order: -1;
height: initial;
overflow: hidden;
flex-shrink: 0;
align-self: flex-start;
}
button#mobile-explorer {
display: none;
}
button#desktop-explorer {
display: flex;
}
@media all and ($mobile) {
button#mobile-explorer {
display: flex;
}
button#desktop-explorer {
display: none;
}
}
&.desktop-only {
@media all and not ($mobile) {
display: flex;
}
}
/*&:after {
pointer-events: none;
content: "";
@ -23,7 +79,8 @@
}*/
}
button#explorer {
button#mobile-explorer,
button#desktop-explorer {
background-color: transparent;
border: none;
text-align: left;
@ -68,19 +125,19 @@ button#explorer {
list-style: none;
overflow: hidden;
overflow-y: auto;
max-height: 100%;
max-height: 0px;
transition:
max-height 0.35s ease,
visibility 0s linear 0s;
visibility 0s linear 0.35s;
margin-top: 0.5rem;
visibility: visible;
visibility: hidden;
&.collapsed {
max-height: 0;
max-height: 100%;
transition:
max-height 0.35s ease,
visibility 0s linear 0.35s;
visibility: hidden;
visibility 0s linear 0s;
visibility: visible;
}
& ul {
@ -91,12 +148,14 @@ button#explorer {
max-height 0.35s ease,
transform 0.35s ease,
opacity 0.2s ease;
& li > a {
color: var(--dark);
opacity: 0.75;
pointer-events: all;
}
}
> #explorer-ul {
max-height: none;
}
@ -179,3 +238,80 @@ li:has(> .folder-outer:not(.open)) > .folder-container > svg {
// remove default margin from li
margin: 0;
}
.explorer {
@media all and ($mobile) {
#explorer-content {
box-sizing: border-box;
overscroll-behavior: none;
z-index: 100;
position: absolute;
top: 0;
background-color: var(--light);
max-width: 100dvw;
left: -100dvw;
width: 100%;
transition: transform 300ms ease-in-out;
overflow: hidden;
padding: $topSpacing 2rem 2rem;
height: 100dvh;
max-height: 100dvh;
margin-top: 0;
visibility: hidden;
&:not(.collapsed) {
transform: translateX(100dvw);
visibility: visible;
}
ul.overflow {
max-height: 100%;
width: 100%;
}
&.collapsed {
transform: translateX(0);
visibility: visible;
}
}
#mobile-explorer {
margin: 5px;
z-index: 101;
&:not(.collapsed) .lucide-menu {
transform: rotate(-90deg);
transition: transform 200ms ease-in-out;
}
.lucide-menu {
stroke: var(--darkgray);
transition: transform 200ms ease;
&:hover {
stroke: var(--dark);
}
}
}
}
}
.no-scroll {
opacity: 0;
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;
}
}