feat: make TOC scrollable (#340)

* feat: make TOC scrollable * style: optimize mobile/pad views * fix: grid style * fix: absolute behavior of the back * fix: reset to absolute positions * style: add translateX to the back page This change set translateX to -25% on the back page before the page flip, to make it not overlap the TOC.
g1eny0ung · Dec 20, 2024 · 13720fe · 13720fe
1 parent 6ff5b64
commit 13720fe
Show file tree

Hide file tree

Showing 5 changed files with 87 additions and 55 deletions.
diff --git a/assets/css/output.css b/assets/css/output.css
@@ -3234,22 +3234,10 @@ html {
   border-end-end-radius: 0px;
 }
 
-.absolute {
-  position: absolute;
-}
-
-.relative {
-  position: relative;
-}
-
 .sticky {
   position: sticky;
 }
 
-.right-0 {
-  right: 0px;
-}
-
 .top-0 {
   top: 0px;
 }
@@ -3507,11 +3495,6 @@ html {
   padding-right: 1rem;
 }
 
-.px-5 {
-  padding-left: 1.25rem;
-  padding-right: 1.25rem;
-}
-
 .py-12 {
   padding-top: 3rem;
   padding-bottom: 3rem;
@@ -3628,20 +3611,27 @@ html {
 
 .flip-container {
   width: 100vw;
-  height: calc(100vh - 112px);
+  /* The height of navbar is 112px (80px + 2rem). */
+  height: calc(100vh - 80px - 2rem);
   max-width: 100%;
   perspective: 1000px;
   &.flip-it {
     .flipper {
       transform: rotateY(180deg);
     }
+    .front {
+      overflow: hidden;
+    }
+    .back {
+      transform: translateX(0) rotateY(180deg);
+    }
   }
   .flipper {
     position: relative;
     width: 100%;
     height: 100%;
     transform-style: preserve-3d;
-    transition: all 0.75s ease;
+    transition: transform 0.75s;
   }
   .front,
   .back {
@@ -3651,18 +3641,23 @@ html {
     width: 100%;
     height: 100%;
     backface-visibility: hidden;
+    transition: transform 0.75s;
   }
   .front {
     transform: rotateY(0deg);
   }
   .back {
-    transform: rotateY(180deg);
+    /* Hack: set translateX to -25% to make the back page not overlap the TOC. */
+    transform: translateX(-25%) rotateY(180deg);
   }
 }
 
 #TableOfContents {
   position: sticky;
   top: 6rem;
+  overflow-y: auto;
+  /* 6 + 1 rem */
+  max-height: calc(100vh - 7rem);
 }
 
 @media (hover:hover) {
@@ -4126,6 +4121,10 @@ html {
 }
 
 @media (min-width: 1024px) {
+  .lg\:col-span-2 {
+    grid-column: span 2 / span 2;
+  }
+
   .lg\:mt-12 {
     margin-top: 3rem;
   }
@@ -4138,27 +4137,39 @@ html {
     display: block;
   }
 
-  .lg\:w-1\/3 {
-    width: 33.333333%;
+  .lg\:flex {
+    display: flex;
+  }
+
+  .lg\:grid {
+    display: grid;
   }
 
-  .lg\:w-36 {
-    width: 9rem;
+  .lg\:w-1\/3 {
+    width: 33.333333%;
   }
 
   .lg\:basis-\[300px\] {
     flex-basis: 300px;
   }
+
+  .lg\:grid-cols-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+
+  .lg\:flex-col {
+    flex-direction: column;
+  }
+
+  .lg\:items-end {
+    align-items: flex-end;
+  }
 }
 
 @media (min-width: 1280px) {
   .xl\:w-1\/4 {
     width: 25%;
   }
-
-  .xl\:w-48 {
-    width: 12rem;
-  }
 }
 
 .dark\:border:where(.dark, .dark *) {

diff --git a/docs/pages/CHANGELOG.md b/docs/pages/CHANGELOG.md
@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Changed
+
+- Make TOC scrollable when it is too long
+
 ## [3.9.0] - 2024-11-17
 
 ### Added

diff --git a/layouts/_default/single.html b/layouts/_default/single.html
@@ -30,23 +30,10 @@
 {{ end }}
 
 {{ define "main" }}
-<div class="mt-4 px-4">
-  {{ if site.Params.showTableOfContents }}
-  <div class="relative" x-data="{ height: '' }" x-init="height = $el.scrollHeight + 'px'">
-  {{ else }}
-  <div>
-  {{ end }}
-    {{ if site.Params.showTableOfContents }}
-    <div class="absolute right-0 lg:w-36 xl:w-48 hidden lg:block" :style="{ height }">
-      {{ .TableOfContents }}
+<div class="lg:grid lg:grid-cols-4 gap-4 mt-4 px-4">
+  <div class="hidden lg:block"></div>
 
-      <div class="dream-adsense px-5">
-      {{ if fileExists "layouts/partials/adsense.html" }}
-        {{ partialCached "adsense.html" . }}
-      {{ end }}
-      </div>
-    </div>
-    {{ end }}
+  <div class="lg:col-span-2">
     <article class="mx-auto prose prose-quoteless dark:prose-invert" id="dream-single-post-main" itemscope itemtype="http://schema.org/Article">
       {{ template "_internal/schema.html" . }}
 
@@ -111,16 +98,28 @@ <h1 itemprop="headline">{{ .Title }}</h1>
         {{ end }}
       </div>
       {{ end }}
+
+      {{ if or site.Config.Services.Disqus.Shortname site.Params.utterancesRepo site.Params.valine site.Params.waline }}
+      <div class="divider"></div>
+
+      <section class="space-y-4">
+        {{ partialCached "commentSystems.html" . .RelPermalink }}
+      </section>
+      {{ end }}
     </article>
   </div>
 
-  {{ if or site.Config.Services.Disqus.Shortname site.Params.utterancesRepo site.Params.valine site.Params.waline }}
-  <div class="divider max-w-[65ch] mx-auto"></div>
+  <div class="hidden lg:flex lg:flex-col lg:items-end">
+    {{ if fileExists "layouts/partials/adsense.html" }}
+    <div class="dream-adsense">
+      {{ partialCached "adsense.html" . }}
+    </div>
+    {{ end }}
 
-  <section class="max-w-[65ch] mx-auto space-y-4">
-    {{ partialCached "commentSystems.html" . .RelPermalink }}
-  </section>
-  {{ end }}
+    {{ if site.Params.showTableOfContents }}
+      {{ .TableOfContents }}
+    {{ end }}
+  </div>
 </div>
 {{ end }}
 

diff --git a/layouts/partials/nav.html b/layouts/partials/nav.html
@@ -44,7 +44,11 @@
       {{ with site.GetPage "/about" }}
       {{ $aboutPages := .Resources.ByType "page" }}
       {{ if gt (len $aboutPages) 0 }}
-      <div role="link" tabindex="0" class="text-sm font-semibold cursor-pointer hover:underline" @click="flip = !flip" title="{{ T "about" }}">
+      <div role="link" tabindex="0"
+        class="text-sm font-semibold cursor-pointer hover:underline"
+        @click="flip = !flip"
+        title="{{ T "about" }}"
+      >
         {{- T "about" -}}
       </div>
       {{ end }}

diff --git a/src/input.css b/src/input.css
@@ -15,22 +15,31 @@
 
 .flip-container {
   width: 100vw;
-  height: calc(100vh - 112px);
+  /* The height of navbar is 112px (80px + 2rem). */
+  height: calc(100vh - 80px - 2rem);
   max-width: 100%;
   perspective: 1000px;
 
   &.flip-it {
     .flipper {
       transform: rotateY(180deg);
     }
+
+    .front {
+      overflow: hidden;
+    }
+
+    .back {
+      transform: translateX(0) rotateY(180deg);
+    }
   }
 
   .flipper {
     position: relative;
     width: 100%;
     height: 100%;
     transform-style: preserve-3d;
-    transition: all 0.75s ease;
+    transition: transform 0.75s;
   }
 
   .front,
@@ -41,19 +50,24 @@
     width: 100%;
     height: 100%;
     backface-visibility: hidden;
+    transition: transform 0.75s;
   }
 
   .front {
     transform: rotateY(0deg);
   }
 
   .back {
-    transform: rotateY(180deg);
+    /* Hack: set translateX to -25% to make the back page not overlap the TOC. */
+    transform: translateX(-25%) rotateY(180deg);
   }
 }
 
 #TableOfContents {
-  @apply sticky top-24;
+  @apply sticky top-24 overflow-y-auto;
+
+  /* 6 + 1 rem */
+  max-height: calc(100vh - 7rem);
 }
 
 #TableOfContents ul {