fix(layout): grid triage and regression (jackyzha0#1440)

* fix(table of contents): multiple scrollbars (jackyzha0#1388) * fix(center): Main content mininum width (jackyzha0#1439) * fix(code block): Horizontal overflow fix (jackyzha0#1438, jackyzha0#1353) * WIP fix for ul/ol .overflow * Fix: restore former scrollbar behavior for overflow lists (jackyzha0#1437) * Fix: code block overflow-x * fix: Table of Content overflow (jackyzha0#1437) * Address feedback * Move max-height toggle from js to css
parkisutama · Sep 28, 2024 · f331e61 · f331e61
1 parent 14039ee
commit f331e61
Show file tree

Hide file tree

Showing 6 changed files with 91 additions and 25 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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,14 +67,16 @@ 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;
   margin-top: 0.5rem;
   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
@@ -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
@@ -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: "";