FEATURE: add button to navigate to TOC post controls (#10)

about.json

@@ -2,5 +2,8 @@
   "name": "DiscoTOC",
   "about_url": "https://meta.discourse.org/t/discotoc-automatic-table-of-contents/111143",
   "component": true,
-  "license_url": "https://github.com/discourse/DiscoTOC/blob/main/LICENSE"
+  "license_url": "https://github.com/discourse/DiscoTOC/blob/main/LICENSE",
+  "assets": {
+    "icons-sprite": "/assets/sprite.svg"
+  }
 }

assets/sprite.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg">
+<symbol id="bottom" viewBox="0 -16 512 512"><path d="m410.667969 245.332031h-160c-8.832031 0-16-7.167969-16-16s7.167969-16 16-16h160c8.832031 0 16 7.167969 16 16s-7.167969 16-16 16zm0 0"/><path d="m496 138.667969h-245.332031c-8.832031 0-16-7.167969-16-16s7.167969-16 16-16h245.332031c8.832031 0 16 7.167969 16 16s-7.167969 16-16 16zm0 0"/><path d="m410.667969 32h-160c-8.832031 0-16-7.167969-16-16s7.167969-16 16-16h160c8.832031 0 16 7.167969 16 16s-7.167969 16-16 16zm0 0"/><path d="m474.667969 448h-202.667969c-20.585938 0-37.332031-16.746094-37.332031-37.332031v-53.335938c0-20.585937 16.746093-37.332031 37.332031-37.332031h202.667969c20.585937 0 37.332031 16.746094 37.332031 37.332031v53.335938c0 20.585937-16.746094 37.332031-37.332031 37.332031zm-202.667969-96c-2.945312 0-5.332031 2.390625-5.332031 5.332031v53.335938c0 2.941406 2.386719 5.332031 5.332031 5.332031h202.667969c2.941406 0 5.332031-2.390625 5.332031-5.332031v-53.335938c0-2.941406-2.390625-5.332031-5.332031-5.332031zm0 0"/><path d="m176 400h-160c-8.832031 0-16-7.167969-16-16s7.167969-16 16-16h160c8.832031 0 16 7.167969 16 16s-7.167969 16-16 16zm0 0"/><path d="m96 480c-4.097656 0-8.191406-1.558594-11.308594-4.691406-6.25-6.253906-6.25-16.386719 0-22.636719l68.675782-68.671875-68.695313-68.691406c-6.25-6.253906-6.25-16.386719 0-22.636719s16.382813-6.25 22.636719 0l80 80c6.25 6.25 6.25 16.382813 0 22.636719l-80 80c-3.117188 3.132812-7.210938 4.691406-11.308594 4.691406zm0 0"/>
+</symbol></svg>

common/common.scss

@@ -150,6 +150,21 @@
       opacity: 0.6;
     }
   }
+  #bottom-anchor {
+    opacity: 0;
+    height: 0;
+    margin: 0;
+  }
+
+  .post-bottom-wrapper {
+    padding: 0.8em 0.5em 0 0.5em;
+    a {
+      color: var(--primary-med-or-secondary-med);
+    }
+  }
+  .d-toc {
+    margin-top: 1em;
+  }
 }
 
 // large screens
@@ -169,7 +184,6 @@
     .d-toc {
       max-height: 85vh;
       padding-left: 0;
-      margin-top: 50px;
       position: -webkit-sticky;
       position: sticky;
       top: 75px;
@@ -217,6 +231,9 @@
 // small screens
 @media screen and (max-width: $large-width) {
   .d-toc-regular {
+    .post-bottom-wrapper {
+      display: none;
+    }
     #d-toc {
       z-index: z("header") + 1;
       background: var(--secondary, $secondary);

common/header.html

@@ -268,6 +268,8 @@
             });
         });
 
+        body.append(`<span id="bottom-anchor" class="d-toc-igonore"></span>`);
+
         let dTocHeadingSelectors = "h1,h2,h3,h4,h5,h6";
         if (!body.has(">h1").length) {
           dTocHeadingSelectors = "h2,h3,h4,h5,h6";
@@ -308,22 +310,31 @@
           .addClass("d-toc-cooked")
           .prepend(
             `<span class="d-toc-toggle">
-                  ${dtocIcon} ${I18n.t(themePrefix("table_of_contents"))}
+                    ${dtocIcon} ${I18n.t(themePrefix("table_of_contents"))}
-                  </span>`
+                    </span>`
           )
           .parents(".regular")
           .addClass("d-toc-regular")
           .parents("article")
           .addClass("d-toc-article")
           .append(
-            `<ul id="d-toc">
+            `<div class="d-toc-main">
-                    <div class="d-toc-close-wrapper">
+                <div class="post-bottom-wrapper">
-                      <div class="d-toc-close">
+                  <a href="#bottom-anchor" title="${I18n.t(
-                        ${closeIcon}
+                    themePrefix("post_bottom_tooltip")
-                      </div>
+                  )}">${iconHTML("bottom")}</a>
-                    </div>
+                  </div>
-                  </ul>`
+                  <ul id="d-toc">
+                        <div class="d-toc-close-wrapper">
+                          <div class="d-toc-close">
+                            ${closeIcon}
+                          </div>
+                        </div>
+                      </ul>
+                </div>
+            `
           )
+
           .parents(".topic-post")
           .addClass("d-toc-post")
           .parents("body")

locales/en.yml

@@ -1,3 +1,4 @@
 en:
   table_of_contents: "table of contents"
   insert_table_of_contents: "Insert table of contents"
+  post_bottom_tooltip: "Navigate to post controls"