GitHub/quartz
1
0
Fork 2
mirror of https://github.com/jackyzha0/quartz.git synced 2026-03-24 15:05:42 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

Move max-height toggle from js to css

Browse Source
This commit is contained in:
saberzero1 2024-09-25 16:49:51 +02:00
parent 1e8fe2cd08
commit 1daf65f71c
No known key found for this signature in database
GPG Key ID: 41AEE99107640F10
5 changed files with 20 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
quartz/components/scripts/explorer.inline.ts
View File

@ -25,7 +25,6 @@ function toggleExplorer(this: HTMLElement) {
if (!content) return if (!content) return
content.classList.toggle("collapsed") content.classList.toggle("collapsed")
content.style.maxHeight = content.style.maxHeight === "0px" ? content.scrollHeight + "px" : "0px"
} }
function toggleFolder(evt: MouseEvent) { function toggleFolder(evt: MouseEvent) {

2
quartz/components/scripts/toc.inline.ts
View File

@ -23,7 +23,6 @@ function toggleToc(this: HTMLElement) {
const content = this.nextElementSibling as HTMLElement | undefined const content = this.nextElementSibling as HTMLElement | undefined
if (!content) return if (!content) return
content.classList.toggle("collapsed") content.classList.toggle("collapsed")
content.style.maxHeight = content.style.maxHeight === "0px" ? content.scrollHeight + "px" : "0px"
} }
function setupToc() { function setupToc() {
@ -32,7 +31,6 @@ function setupToc() {
const collapsed = toc.classList.contains("collapsed") const collapsed = toc.classList.contains("collapsed")
const content = toc.nextElementSibling as HTMLElement | undefined const content = toc.nextElementSibling as HTMLElement | undefined
if (!content) return if (!content) return
content.style.maxHeight = collapsed ? "0px" : content.scrollHeight + "px"
toc.addEventListener("click", toggleToc) toc.addEventListener("click", toggleToc)
window.addCleanup(() => toc.removeEventListener("click", toggleToc)) window.addCleanup(() => toc.removeEventListener("click", toggleToc))
} }

2
quartz/components/styles/backlinks.scss
View File

@ -1,7 +1,7 @@
@use "../../styles/variables.scss" as *; @use "../../styles/variables.scss" as *;
.backlinks { .backlinks {
@media all and not ($desktop) { @media all and not ($mobile) {
overflow-y: auto; overflow-y: auto;
display: flex; display: flex;
flex-direction: column; flex-direction: column;

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

@ -5,8 +5,10 @@
flex-direction: column; flex-direction: column;
overflow-y: hidden; overflow-y: hidden;
&.desktop-only { &.desktop-only {
@media all and not ($mobile) {
display: flex; display: flex;
} }
}
&:after { &:after {
pointer-events: none; pointer-events: none;
content: ""; content: "";
@ -74,6 +76,7 @@ button#explorer {
visibility: visible; visibility: visible;
&.collapsed { &.collapsed {
max-height: 0;
transition: transition:
max-height 0.35s ease, max-height 0.35s ease,
visibility 0s linear 0.35s; visibility 0s linear 0.35s;

18
quartz/components/styles/toc.scss
View File

@ -1,6 +1,11 @@
.toc { .toc {
display: flex;
flex-direction: column;
&.desktop-only {
display: flex;
max-height: 40%; max-height: 40%;
} }
}
button#toc { button#toc {
background-color: transparent; background-color: transparent;
@ -32,17 +37,19 @@ button#toc {
#toc-content { #toc-content {
list-style: none; list-style: none;
overflow: hidden; overflow: hidden;
max-height: none; overflow-y: auto;
max-height: 100%;
transition: transition:
max-height 0.5s ease, max-height 0.35s ease,
visibility 0s linear 0s; visibility 0s linear 0s;
position: relative; position: relative;
visibility: visible; visibility: visible;
&.collapsed { &.collapsed {
max-height: 0;
transition: transition:
max-height 0.5s ease, max-height 0.35s ease,
visibility 0s linear 0.5s; visibility 0s linear 0.35s;
visibility: hidden; visibility: hidden;
} }
@ -65,6 +72,9 @@ button#toc {
} }
} }
} }
> ul.overflow {
max-height: none;
}
@for $i from 0 through 6 { @for $i from 0 through 6 {
& .depth-#{$i} { & .depth-#{$i} {