From a7a0dcad22876b8e4e0185b8c4b4d8131be965b1 Mon Sep 17 00:00:00 2001
From: Emile Bangma <github@emilebangma.com>
Date: Wed, 25 Sep 2024 21:20:58 +0000
Subject: [PATCH] fix(layout): grid triage and regression (#1440)
---
quartz/styles/base.scss | 10 +++++++---
quartz/components/styles/backlinks.scss | 13 +++----------
quartz/components/styles/toc.scss | 20 +++++++++++++++-----
quartz/components/styles/explorer.scss | 11 +++++++++--
quartz/components/scripts/explorer.inline.ts | 1 -
quartz/components/scripts/toc.inline.ts | 2 --
6 files changed, 34 insertions(+), 23 deletions(-)
diff --git a/quartz/components/scripts/explorer.inline.ts b/quartz/components/scripts/explorer.inline.ts
index 584de6c..33d328a 100644
--- a/quartz/components/scripts/explorer.inline.ts
+++ b/quartz/components/scripts/explorer.inline.ts
@@ -25,7 +25,6 @@
if (!content) return
content.classList.toggle("collapsed")
- content.style.maxHeight = content.style.maxHeight === "0px" ? content.scrollHeight + "px" : "0px"
}
function toggleFolder(evt: MouseEvent) {
diff --git a/quartz/components/scripts/toc.inline.ts b/quartz/components/scripts/toc.inline.ts
index acc81b2..2cfb3f9 100644
--- a/quartz/components/scripts/toc.inline.ts
+++ b/quartz/components/scripts/toc.inline.ts
@@ -23,7 +23,6 @@
const content = this.nextElementSibling as HTMLElement | undefined
if (!content) return
content.classList.toggle("collapsed")
- content.style.maxHeight = content.style.maxHeight === "0px" ? content.scrollHeight + "px" : "0px"
}
function setupToc() {
@@ -32,7 +31,6 @@
const collapsed = toc.classList.contains("collapsed")
const content = toc.nextElementSibling as HTMLElement | undefined
if (!content) return
- content.style.maxHeight = collapsed ? "0px" : content.scrollHeight + "px"
toc.addEventListener("click", toggleToc)
window.addCleanup(() => toc.removeEventListener("click", toggleToc))
}
diff --git a/quartz/components/styles/backlinks.scss b/quartz/components/styles/backlinks.scss
index 3b7ab5b..36fb6a4 100644
--- a/quartz/components/styles/backlinks.scss
+++ b/quartz/components/styles/backlinks.scss
@@ -1,9 +1,10 @@
@use "../../styles/variables.scss" as *;
.backlinks {
- @media all and not ($desktop) {
+ @media all and not ($mobile) {
overflow-y: auto;
- display: initial;
+ display: flex;
+ flex-direction: column;
&:after {
pointer-events: none;
content: "";
@@ -17,10 +18,6 @@
background: linear-gradient(transparent 0px, var(--light));
}
- &:has(> .overflow) {
- position: unset;
- }
-
& > h3 {
font-size: 1rem;
margin: 0;
@@ -39,10 +36,6 @@
}
& > .overflow {
- max-height: unset;
- & > li:last-of-type {
- margin-bottom: 0;
- }
&:after {
display: none;
}
diff --git a/quartz/components/styles/explorer.scss b/quartz/components/styles/explorer.scss
index 710d7a5..ab388dc 100644
--- a/quartz/components/styles/explorer.scss
+++ b/quartz/components/styles/explorer.scss
@@ -1,8 +1,13 @@
@use "../../styles/variables.scss" as *;
.explorer {
+ display: flex;
+ flex-direction: column;
+ overflow-y: hidden;
&.desktop-only {
- overflow-y: auto;
+ @media all and not ($mobile) {
+ display: flex;
+ }
}
&:after {
pointer-events: none;
@@ -62,7 +67,8 @@
#explorer-content {
list-style: none;
overflow: hidden;
- max-height: none;
+ overflow-y: auto;
+ max-height: 100%;
transition:
max-height 0.35s ease,
visibility 0s linear 0s;
@@ -70,6 +76,7 @@
visibility: visible;
&.collapsed {
+ max-height: 0;
transition:
max-height 0.35s ease,
visibility 0s linear 0.35s;
diff --git a/quartz/components/styles/toc.scss b/quartz/components/styles/toc.scss
index 13d6d3f..512b01d 100644
--- a/quartz/components/styles/toc.scss
+++ b/quartz/components/styles/toc.scss
@@ -1,5 +1,10 @@
.toc {
- overflow-y: auto;
+ display: flex;
+ flex-direction: column;
+ &.desktop-only {
+ display: flex;
+ max-height: 40%;
+ }
}
button#toc {
@@ -32,17 +37,19 @@
#toc-content {
list-style: none;
overflow: hidden;
- max-height: none;
+ overflow-y: auto;
+ max-height: 100%;
transition:
- max-height 0.5s ease,
+ max-height 0.35s ease,
visibility 0s linear 0s;
position: relative;
visibility: visible;
&.collapsed {
+ max-height: 0;
transition:
- max-height 0.5s ease,
- visibility 0s linear 0.5s;
+ max-height 0.35s ease,
+ visibility 0s linear 0.35s;
visibility: hidden;
}
@@ -65,6 +72,9 @@
}
}
}
+ > ul.overflow {
+ max-height: none;
+ }
@for $i from 0 through 6 {
& .depth-#{$i} {
diff --git a/quartz/styles/base.scss b/quartz/styles/base.scss
index c70d8b6..bd674ac 100644
--- a/quartz/styles/base.scss
+++ b/quartz/styles/base.scss
@@ -250,6 +250,8 @@
& .center,
& footer {
+ max-width: 100%;
+ min-width: 100%;
margin-left: auto;
margin-right: auto;
@media all and ($desktop) {
@@ -416,7 +418,7 @@
counter-increment: line 0;
display: grid;
padding: 0.5rem 0;
- overflow-x: scroll;
+ overflow-x: auto;
& [data-highlighted-chars] {
background-color: var(--highlight);
@@ -535,12 +537,15 @@
}
div:has(> .overflow) {
+ display: flex;
position: relative;
+ overflow-y: auto;
+ max-height: 100%;
}
ul.overflow,
ol.overflow {
- max-height: 400;
+ max-height: 100%;
overflow-y: auto;
// clearfix
@@ -550,7 +555,6 @@
& > li:last-of-type {
margin-bottom: 30px;
}
-
&:after {
pointer-events: none;
content: "";
--
Gitblit v1.10.0