Revert "FEATURE: Toggle between timeline and TOC (#64)" (#67)

This reverts commit 7c19d41.

common/common.scss

@@ -1,35 +1,26 @@
 $padding-basis: 0.75em;
 
-.d-toc-available .d-toc-wrapper {
-  // the toc increases the timeline container's width
-  // so as long as the toc is available in a topic
-  // we want this width to remain for the timeline
-  // so if the toc is toggled off, the position doesn't shift
+.d-toc-main {
+  display: none;
   width: 225px;
   @media screen and (max-width: 1045px) {
     .desktop-view & {
       width: 150px;
     }
   }
-}
-
-.d-toc-main {
-  display: none;
   border-left: 1px solid var(--primary-low);
   box-sizing: border-box;
   a {
     display: block;
     padding: 0.15em 0;
-    color: var(--primary-700);
+    color: var(--primary-medium);
     &.scroll-to-bottom {
-      color: var(--tertiary);
       padding-left: $padding-basis;
-      margin-top: 0.5em;
-      font-size: var(--font-down-1);
     }
   }
   #d-toc {
-    max-height: calc(100dvh - 7em - var(--header-offset));
+    max-height: calc(100vh - 4.5em - var(--header-offset));
+    padding-bottom: 0.5em;
     overflow: auto;
     ul {
       list-style-type: none;
@@ -56,7 +47,7 @@ $padding-basis: 0.75em;
         }
       }
       > a:hover {
-        color: var(--primary);
+        color: var(--primary-high);
       }
       &.direct-active > a {
         position: relative;
@@ -133,53 +124,6 @@ a.d-toc-close {
   display: none;
 }
 
-.d-toc-timeline-toggle {
-  display: none;
-  position: fixed;
-  bottom: 0;
-  @include ellipsis;
-  .d-icon-timeline {
-    margin-right: 0.25em;
-  }
-
-  @media screen and (min-height: 1200px) {
-    // on tall screens we don't want this button
-    // to be incredibly distant
-    position: absolute;
-    .d-toc-timeline-visible & {
-      bottom: -4em;
-    }
-    bottom: -6.5em;
-  }
-}
-
-.topic-navigation.with-timeline:has(.timeline-docked) {
-  // hide toggle when timeline is docked
-  // (firefox doesn't support :has yet)
-  .d-toc-timeline-toggle {
-    display: none;
-  }
-}
-
-.d-toc-timeline-toggleable {
-  .d-toc-timeline-toggle {
-    display: block;
-    z-index: z("timeline");
-    @media screen and (max-height: 480px) {
-      // avoid overlapping timeline
-      display: none;
-    }
-  }
-  .with-topic-progress {
-    .d-toc-main {
-      display: block;
-    }
-    .d-toc-timeline-toggle {
-      display: none;
-    }
-  }
-}
-
 .d-toc-timeline-visible {
   .d-toc-main,
   .d-toc-mini {
@@ -190,7 +134,7 @@ a.d-toc-close {
     .d-toc-wrapper {
       position: fixed;
       margin-top: 0.25em;
-      height: calc(100dvh - 50px - var(--header-offset));
+      height: calc(100vh - 50px - var(--header-offset));
       opacity: 0.5;
       right: -100vw;
       top: var(--header-offset);
@@ -205,70 +149,40 @@ a.d-toc-close {
         padding: 0.5em;
         height: 100%;
         #d-toc {
-          max-height: calc(100% - 2.25em);
+          max-height: calc(100% - 3em);
         }
       }
       &.overlay {
         right: 0;
         width: 75vw;
         opacity: 1;
-        .d-toc-main {
-          display: block;
-          #d-toc li.d-toc-item ul {
-            transition: none;
-          }
+        .d-toc-main #d-toc li.d-toc-item ul {
+          transition: none;
         }
       }
 
-      a.scroll-to-bottom {
-        margin-top: 0.33em;
-      }
-
       a.scroll-to-bottom,
       a.d-toc-close {
         display: inline-block;
         padding: 0.5em;
       }
 
       .d-toc-icons {
-        position: absolute;
-        background: var(--secondary);
-        right: 1.5em;
-        top: 0.25em;
-        z-index: z("timeline");
+        text-align: right;
       }
     }
   }
 
   // core overrides when timeline is active
-  .timeline-container {
+  .timeline-container,
+  #topic-progress {
     display: none;
   }
   .container.posts .topic-navigation.with-topic-progress {
     align-self: start;
   }
 }
 
-#topic-progress-wrapper {
-  align-items: stretch;
-  .d-toc-mini {
-    display: none;
-    .d-toc-timeline-visible & {
-      display: block;
-    }
-    height: 100%;
-    .btn {
-      height: 100%;
-    }
-  }
-
-  .staff & {
-    .topic-admin-menu-button-container {
-      margin-left: 0.5em;
-    }
-  }
-}
-
 // core sets first child's top margin to 0
 // ensure it's also 0 when TOC markup is first
 .cooked > div[data-theme-toc]:first-child + * {
@@ -318,5 +232,11 @@ a.d-toc-close {
 .below-docs-topic-outlet.d-toc-wrapper {
   position: sticky;
   top: calc(var(--header-offset, 60px) + 1em);
-  max-height: calc(100dvh - 2em - var(--header-offset, 60px));
+  max-height: calc(100vh - 2em - var(--header-offset, 60px));
+  .mobile-view & {
+    display: none;
+  }
+  .d-toc-main {
+    display: block;
+  }
 }

javascripts/discourse/connectors/after-topic-progress/d-toc-mini.hbs

@@ -0,0 +1,7 @@
+<div class="d-toc-mini">
+  <DButton
+    class="btn-primary"
+    @action={{this.showTOCOverlay}}
+    @label={{theme-prefix "table_of_contents"}}
+  />
+</div>

javascripts/discourse/connectors/before-topic-progress/d-toc-mini.js → javascripts/discourse/connectors/after-topic-progress/d-toc-mini.js

@@ -6,9 +6,4 @@ export default class DTocMini extends Component {
   showTOCOverlay() {
     document.querySelector(".d-toc-wrapper").classList.toggle("overlay");
   }
-
-  @action
-  resetBodyClass() {
-    document.body.classList.add("d-toc-timeline-visible");
-  }
 }