From a7a0dcad22876b8e4e0185b8c4b4d8131be965b1 Mon Sep 17 00:00:00 2001 From: Emile Bangma Date: Wed, 25 Sep 2024 23:20:58 +0200 Subject: [PATCH] fix(layout): grid triage and regression (#1440) * fix(table of contents): multiple scrollbars (https://github.com/jackyzha0/quartz/issues/1388) * fix(center): Main content mininum width (https://github.com/jackyzha0/quartz/issues/1439) * fix(code block): Horizontal overflow fix (https://github.com/jackyzha0/quartz/issues/1438, https://github.com/jackyzha0/quartz/issues/1353) * WIP fix for ul/ol .overflow * Fix: restore former scrollbar behavior for overflow lists (https://github.com/jackyzha0/quartz/issues/1437) * Fix: code block overflow-x * fix: Table of Content overflow (https://github.com/jackyzha0/quartz/issues/1437) * Address feedback * Move max-height toggle from js to css --- quartz/components/scripts/explorer.inline.ts | 1 - quartz/components/scripts/toc.inline.ts | 2 -- quartz/components/styles/backlinks.scss | 13 +++---------- quartz/components/styles/explorer.scss | 11 +++++++++-- quartz/components/styles/toc.scss | 20 +++++++++++++++----- quartz/styles/base.scss | 10 +++++++--- 6 files changed, 34 insertions(+), 23 deletions(-) diff --git a/quartz/components/scripts/explorer.inline.ts b/quartz/components/scripts/explorer.inline.ts index 584de6c37..33d328a6c 100644 --- a/quartz/components/scripts/explorer.inline.ts +++ b/quartz/components/scripts/explorer.inline.ts @@ -25,7 +25,6 @@ function toggleExplorer(this: HTMLElement) { 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 acc81b20d..2cfb3f921 100644 --- a/quartz/components/scripts/toc.inline.ts +++ b/quartz/components/scripts/toc.inline.ts @@ -23,7 +23,6 @@ function toggleToc(this: HTMLElement) { 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 @@ function setupToc() { 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 3b7ab5b92..36fb6a4c6 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 710d7a513..ab388dce5 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 @@ button#explorer { #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 @@ button#explorer { 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 13d6d3fc6..512b01d4d 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 @@ button#toc { #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 @@ button#toc { } } } + > 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 c70d8b6f9..bd674ac0e 100644 --- a/quartz/styles/base.scss +++ b/quartz/styles/base.scss @@ -250,6 +250,8 @@ a { & .center, & footer { + max-width: 100%; + min-width: 100%; margin-left: auto; margin-right: auto; @media all and ($desktop) { @@ -416,7 +418,7 @@ pre { 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 @@ video { } 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 @@ ol.overflow { & > li:last-of-type { margin-bottom: 30px; } - &:after { pointer-events: none; content: "";