From f331e61206c9ea820ca0c97dae5585c5d5373806 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 | 34 +++++++++++++++++--- quartz/components/styles/explorer.scss | 27 +++++++++++++++- quartz/components/styles/toc.scss | 22 ++++++++++--- quartz/styles/base.scss | 30 +++++++++-------- 6 files changed, 91 insertions(+), 25 deletions(-) diff --git a/quartz/components/scripts/explorer.inline.ts b/quartz/components/scripts/explorer.inline.ts index 584de6c376685..33d328a6c8a87 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 acc81b20db494..2cfb3f9218703 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 04302f22e545c..ac009e9555f38 100644 --- a/quartz/components/styles/backlinks.scss +++ b/quartz/components/styles/backlinks.scss @@ -1,5 +1,20 @@ .backlinks { - position: relative; + @media all and not ($mobile) { + overflow-y: auto; + display: flex; + flex-direction: column; + &:after { + pointer-events: none; + content: ""; + width: 100%; + height: 50px; + position: absolute; + left: 0; + bottom: 0; + opacity: 1; + transition: opacity 0.3s ease; + background: linear-gradient(transparent 0px, var(--light)); + } & > h3 { font-size: 1rem; @@ -11,9 +26,20 @@ padding: 0; margin: 0.5rem 0; - & > li { - & > a { - background-color: transparent; + & > li { + & > a { + background-color: transparent; + } + } + } + + & > .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 6fd80e158d7df..8228ac1f6dd16 100644 --- a/quartz/components/styles/explorer.scss +++ b/quartz/components/styles/explorer.scss @@ -1,5 +1,28 @@ @use "../../styles/variables.scss" as *; +.explorer { + display: flex; + flex-direction: column; + overflow-y: hidden; + &.desktop-only { + @media all and not ($mobile) { + display: flex; + } + } + &:after { + pointer-events: none; + content: ""; + width: 100%; + height: 50px; + position: absolute; + left: 0; + bottom: 0; + opacity: 1; + transition: opacity 0.3s ease; + background: linear-gradient(transparent 0px, var(--light)); + } +} + button#explorer { background-color: transparent; border: none; @@ -44,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; @@ -52,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 6845812f51642..512b01d4d365d 100644 --- a/quartz/components/styles/toc.scss +++ b/quartz/components/styles/toc.scss @@ -1,3 +1,12 @@ +.toc { + display: flex; + flex-direction: column; + &.desktop-only { + display: flex; + max-height: 40%; + } +} + button#toc { background-color: transparent; border: none; @@ -28,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; } @@ -61,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 339e830d662a6..f151fde2cc43c 100644 --- a/quartz/styles/base.scss +++ b/quartz/styles/base.scss @@ -223,13 +223,20 @@ a { } } - & .center, - & footer { - margin-left: auto; - margin-right: auto; - width: $pageWidth; - @media all and (max-width: $fullPageWidth) { - width: initial; + & .center, + & footer { + max-width: 100%; + min-width: 100%; + margin-left: auto; + margin-right: auto; + @media all and ($desktop) { + margin-right: 0; + } + @media all and ($mobile) { + margin-left: 0; + } + } + & footer { margin-left: 0; margin-right: 0; } @@ -388,7 +395,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); @@ -507,14 +514,12 @@ video { } div:has(> .overflow) { - display: flex; - overflow-y: auto; - max-height: 100%; + position: relative; } ul.overflow, ol.overflow { - max-height: 200; + max-height: 100%; overflow-y: auto; // clearfix @@ -524,7 +529,6 @@ ol.overflow { & > li:last-of-type { margin-bottom: 30px; } - &:after { pointer-events: none; content: "";