REVERT: reverting toggle to do display issues (#72)

Author: awesomerobot

assets/sprite.svg

@@ -1,41 +1,26 @@
 $padding-basis: 0.75em;
 
-.d-toc-available {
-  // 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
-
-  @media screen and (max-width: 1109px) {
-    .d-toc-wrapper {
-      width: 10em;
-    }
-  }
-
-  @media screen and (min-width: 1110px) {
-    .container.posts {
-      grid-template-columns: auto 14.6em;
-    }
-  }
-}
-
 .d-toc-main {
   display: none;
+  width: 225px;
+  @media screen and (max-width: 1045px) {
+    .desktop-view & {
+      width: 150px;
+    }
+  }
   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;
@@ -62,7 +47,7 @@ $padding-basis: 0.75em;
         }
       }
       > a:hover {
-        color: var(--primary);
+        color: var(--primary-high);
       }
       &.direct-active > a {
         position: relative;
@@ -139,147 +124,62 @@ 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 {
     display: block;
   }
-
-  // core overrides when timeline is active
-  .timeline-container {
-    display: none;
-  }
-  .container.posts .topic-navigation.with-topic-progress {
-    align-self: start;
-  }
-}
-
-// overlayed timeline (on mobile and narrow screens)
-.topic-navigation.with-topic-progress {
-  .d-toc-timeline-toggle {
-    display: none;
-  }
-  .d-toc-wrapper {
-    position: fixed;
-    margin-top: 0.25em;
-    height: calc(100dvh - 50px - var(--header-offset));
-    opacity: 0.5;
-    right: -100vw;
-    top: var(--header-offset);
-    width: 75vw;
-    max-width: 350px;
-    background-color: var(--secondary);
-    box-shadow: var(--shadow-dropdown);
-    z-index: z("modal", "overlay");
-    transition: all 0.2s ease-in-out;
-    .d-toc-main {
-      width: 100%;
-      padding: 0.5em;
-      height: 100%;
-      #d-toc {
-        max-height: calc(100% - 2.25em);
-      }
-    }
-    &.overlay {
-      right: 0;
+  // overlayed timeline (on mobile and narrow screens)
+  .topic-navigation.with-topic-progress {
+    .d-toc-wrapper {
+      position: fixed;
+      margin-top: 0.25em;
+      height: calc(100vh - 50px - var(--header-offset));
+      opacity: 0.5;
+      right: -100vw;
+      top: var(--header-offset);
       width: 75vw;
-      opacity: 1;
+      max-width: 350px;
+      background-color: var(--secondary);
+      box-shadow: var(--shadow-dropdown);
+      z-index: z("modal", "overlay");
+      transition: all 0.2s ease-in-out;
       .d-toc-main {
-        display: block;
-        #d-toc li.d-toc-item ul {
+        width: 100%;
+        padding: 0.5em;
+        height: 100%;
+        #d-toc {
+          max-height: calc(100% - 3em);
+        }
+      }
+      &.overlay {
+        right: 0;
+        width: 75vw;
+        opacity: 1;
+        .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;
-    }
+      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");
+      .d-toc-icons {
+        text-align: right;
+      }
     }
   }
-}
 
-#topic-progress-wrapper {
-  align-items: stretch;
-  .d-toc-mini {
+  // core overrides when timeline is active
+  .timeline-container,
+  #topic-progress {
     display: none;
-
-    height: 100%;
-    .btn {
-      height: 100%;
-    }
   }
-
-  .staff & {
-    .topic-admin-menu-button-container {
-      margin-left: 0.5em;
-    }
-  }
-}
-
-.d-toc-timeline-toggleable {
-  #topic-progress-wrapper .d-toc-mini {
-    display: block;
+  .container.posts .topic-navigation.with-topic-progress {
+    align-self: start;
   }
 }
 
@@ -332,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;
+  }
 }

common/common.scss

@@ -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/after-topic-progress/d-toc-mini.hbs

@@ -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");
-  }
 }