Resolve "Right TOC should not resize"

6 files changed, 83 insertions, 90 deletions

diff --git a/content/assets/stylesheets/_variables.scss b/content/assets/stylesheets/_variables.scss
index c8005536..511a4147 100644
--- a/content/assets/stylesheets/_variables.scss
+++ b/content/assets/stylesheets/_variables.scss
@@ -1,7 +1,3 @@
-// Breakpoints
-$medium-width: 1100px;
-$mobile-width: 900px;
-
 // New Breakpoints
 $xs-width: 576px;
 $sm-width: 768px;
diff --git a/content/assets/stylesheets/instantsearch.scss b/content/assets/stylesheets/instantsearch.scss
index e7d745a3..bbccce57 100644
--- a/content/assets/stylesheets/instantsearch.scss
+++ b/content/assets/stylesheets/instantsearch.scss
@@ -1,5 +1,5 @@
 ---
-version: 11
+version: 12
 ---
 
 @import "variables";
@@ -36,7 +36,9 @@ $color12: rgba(32, 139, 196, .2); //link color lighter
 }
 
 .instantsearch-input {
-  padding-bottom: 7px;
+  @media all and (max-width: $sm-width) {
+    margin-top: 40px;
+  }
 }
 
 //scss-lint:disable SelectorFormat
@@ -128,7 +130,7 @@ $color12: rgba(32, 139, 196, .2); //link color lighter
     color: $link-color;
   }
 
-  @media all and (max-width: $mobile-width) {
+  @media all and (max-width: $sm-width) {
     .hit-tag {
       width: 60px;
       height: 23px;
@@ -153,7 +155,7 @@ $color12: rgba(32, 139, 196, .2); //link color lighter
 .main.class {
   padding-top: 90px;
 
-  @media (max-width: $mobile-width) {
+  @media (max-width: $sm-width) {
     padding-top: 20px;
   }
 }
diff --git a/content/assets/stylesheets/stylesheet.scss b/content/assets/stylesheets/stylesheet.scss
index 29e570ef..bbc1122c 100644
--- a/content/assets/stylesheets/stylesheet.scss
+++ b/content/assets/stylesheets/stylesheet.scss
@@ -1,5 +1,5 @@
 ---
-version: 82
+version: 83
 ---
 
 @import "variables";
@@ -91,7 +91,7 @@ table {
     }
   }
 
-  @media all and (max-width: $mobile-width) {
+  @media all and (max-width: $sm-width) {
     display: block;
   }
 
@@ -163,7 +163,7 @@ pre {
       transition: opacity .3s ease-in;
     }
 
-    @media all and (max-width: $mobile-width) {
+    @media all and (max-width: $sm-width) {
       display: none;
     }
   }
@@ -212,7 +212,7 @@ h2, h3, h4, h5, h6 {
     background-color: $code-background-color;
   }
 
-  @media all and (min-width: $mobile-width) {
+  @media all and (min-width: $sm-width) {
     .anchor {
       opacity: 0;
       float: left;
@@ -239,7 +239,7 @@ h1 {
   margin-top: $h-margin-top;
   margin-bottom: $h-margin-bottom;
 
-  @media (max-width: $mobile-width) {
+  @media (max-width: $sm-width) {
     font-size: 26px;
   }
 }
@@ -250,7 +250,7 @@ h2 {
   margin-top: $h2-margin-top;
   margin-bottom: $h-margin-bottom;
 
-  @media (max-width: $mobile-width) {
+  @media (max-width: $sm-width) {
     font-size: 24px;
   }
 }
@@ -261,7 +261,7 @@ h3 {
   margin-top: $h2-margin-top;
   margin-bottom: $h-margin-bottom;
 
-  @media (max-width: $mobile-width) {
+  @media (max-width: $sm-width) {
     font-size: 22px;
   }
 }
@@ -272,40 +272,36 @@ h4 {
   margin-top: $h2-margin-top;
   margin-bottom: $h-margin-bottom;
 
-  @media (max-width: $mobile-width) {
+  @media (max-width: $sm-width) {
     font-size: 20px;
   }
 }
 
 h5 {
   font-size: 16px;
-  // color: $color-light-gray;
   font-weight: 600;
   margin-top: $h2-margin-top;
   margin-bottom: $h-margin-bottom;
 
-  @media (max-width: $mobile-width) {
+  @media (max-width: $sm-width) {
     font-size: 18px;
   }
 }
 
 h6 {
   font-size: 15px;
-  // color: $color-light-gray;
   font-weight: 600;
   margin-top: $h2-margin-top;
   margin-bottom: $h-margin-bottom;
 
-  @media (max-width: $mobile-width) {
+  @media (max-width: $sm-width) {
     font-size: 16px;
   }
 }
 
 .main {
   padding: $page-header-height 40px 0;
-  max-width: $page-content-width;
   border-right: 1px solid $main-box-shadow;
-  border-left: 1px solid $main-box-shadow;
   background: $main-background-color;
   z-index: 1;
 
@@ -393,7 +389,6 @@ h6 {
   img {
     max-width: calc(100% - 10px);
     max-height: 100vh;
-    // box-shadow: 0 4px 18px 0 rgba($color-dark, .1), 0 6px 20px 0 rgba($color-dark, .09);
     border: 1px solid $gds-gray-200;
     margin-top: 26px;
     margin-bottom: 30px;
@@ -451,12 +446,8 @@ h6 {
     }
   }
 
-  @media(max-width: $md-width) {
-    padding: 0 16px 0 66px;
-  }
-
-  @media(max-width: $lg-width) and (min-width: $md-width)  {
-    width: 60%;
+  @media (max-width: $md-width) {
+    padding: 0 60px;
   }
 }
 
@@ -492,8 +483,7 @@ h6 {
   display: flex;
   flex-direction: column;
   position: sticky;
-  padding-top: $page-header-height;
-  max-width: $sidebar-width;
+  padding-top: 70px;
   width: 50px;
   height: 100vh;
   transition: all .3s;
@@ -503,8 +493,7 @@ h6 {
   top: 0;
 
   &.active {
-    @include sidebar-fixed;
-    min-width: $sidebar-width;
+    width: 100%;
 
     .nav-toggle {
 
@@ -797,9 +786,8 @@ a.global-nav-link {
   }
 
   @media(max-width: $md-width) {
-    padding: 10px 16px 0 66px;
+    padding: 10px 0;
     margin-top: 60px;
-    margin-bottom: -40px;
   }
 }
 
@@ -976,12 +964,12 @@ a.global-nav-link {
   .logo-container {
     margin-right: 32px;
 
-    @media (max-width: $medium-width) {
+    @media (max-width: $md-width) {
       margin-right: 16px;
     }
   }
 
-  @media all and (max-width: $mobile-width) {
+  @media all and (max-width: $md-width) {
     height: auto;
   }
 
@@ -998,7 +986,7 @@ a.global-nav-link {
   }
 
   .header-company-name {
-    @media (max-width: $medium-width) {
+    @media (max-width: $md-width) {
       display: none;
     }
   }
@@ -1007,7 +995,7 @@ a.global-nav-link {
     text-align: right;
     list-style-type: none;
 
-    @media all and (max-width: $mobile-width) {
+    @media all and (max-width: $md-width) {
       display: none;
     }
   }
@@ -1016,7 +1004,7 @@ a.global-nav-link {
     color: $header-font-color;
   }
 
-  @media all and (max-width: $mobile-width) {
+  @media all and (max-width: $md-width) {
     &.active {
       display: block;
 
@@ -1115,15 +1103,20 @@ a.global-nav-link {
     -webkit-appearance: none;
     border: 0;
     padding: 4px 12px;
-    width: 355px;
+    width: 260px;
     color: $search-input-font-color;
-    background: $search-background-color url("<%= @items['/assets/images/icon_search_white.svg'].path %>") 355px 9px / 14px no-repeat;
+    background: $search-background-color url("<%= @items['/assets/images/icon_search_white.svg'].path %>") 260px 9px / 14px no-repeat;
     outline: 0;
 
-    @media(max-width: $medium-width) {
+    @media(max-width: $md-width) {
       width: 210px;
       background: $search-background-color url("<%= @items['/assets/images/icon_search_white.svg'].path %>") 210px 9px / 14px no-repeat;
     }
+
+    @media(min-width: $lg-width) {
+      width: 355px;
+      background: $search-background-color url("<%= @items['/assets/images/icon_search_white.svg'].path %>") 355px 9px / 14px no-repeat;
+    }
   }
 
   input::placeholder {
@@ -1146,7 +1139,7 @@ a.global-nav-link {
   .nav-toggle {
     display: none;
 
-    @media all and (max-width: $mobile-width) {
+    @media all and (max-width: $md-width) {
       display: flex;
       height: $page-header-height;
       align-items: center;
@@ -1161,8 +1154,8 @@ a.global-nav-link {
 
   .nav {
     > li {
-      margin: 0 10px;
-      padding: 0 10px;
+      margin: 0;
+      padding: 0 6px;
     }
 
     // Override bootstrap
@@ -1381,7 +1374,7 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 h1 {
-  @media all and (max-width: $mobile-width) {
+  @media all and (max-width: $sm-width) {
     .badges-drop {
       padding-top: 5px;
     }
@@ -1484,7 +1477,7 @@ li {
 .half-width {
   width: 50%;
 
-  @media all and (max-width: $mobile-width) {
+  @media all and (max-width: $sm-width) {
     width: 100%;
   }
 }
@@ -1492,7 +1485,7 @@ li {
 .width-60 {
   width: 60%;
 
-  @media all and (max-width: $mobile-width) {
+  @media all and (max-width: $sm-width) {
     width: 100%;
   }
 }
@@ -1500,7 +1493,7 @@ li {
 .width-70 {
   width: 70%;
 
-  @media all and (max-width: $mobile-width) {
+  @media all and (max-width: $sm-width) {
     width: 100%;
   }
 }
@@ -1508,7 +1501,7 @@ li {
 .width-75 {
   width: 75%;
 
-  @media all and (max-width: $mobile-width) {
+  @media all and (max-width: $sm-width) {
     width: 100%;
   }
 }
@@ -1516,7 +1509,7 @@ li {
 .width-80 {
   width: 80%;
 
-  @media all and (max-width: $mobile-width) {
+  @media all and (max-width: $sm-width) {
     width: 100%;
   }
 }
@@ -1524,7 +1517,7 @@ li {
 .width-90 {
   width: 90%;
 
-  @media all and (max-width: $mobile-width) {
+  @media all and (max-width: $sm-width) {
     width: 100%;
   }
 }
diff --git a/content/assets/stylesheets/toc.scss b/content/assets/stylesheets/toc.scss
index f01e5238..8c7dacac 100644
--- a/content/assets/stylesheets/toc.scss
+++ b/content/assets/stylesheets/toc.scss
@@ -1,5 +1,5 @@
 ---
-version: 17
+version: 18
 ---
 
 @import "variables";
@@ -9,14 +9,9 @@ $base-nav-link-padding: .75rem;
 $sm-nav-link-padding: .25rem;
 $nav-link-font-size: 14px;
 
-.clear {
-  clear: both;
-}
-
 // ToC styles
 .table-of-contents {
-  position: relative;
-  padding: 16px 8px;
+  padding: 16px 0;
   margin-top: 60px;
 
   li {
@@ -50,7 +45,13 @@ $nav-link-font-size: 14px;
 }
 
 .markdown-toc {
+  top: 0;
   padding-left: 16px;
+
+  @media(min-width: $md-width) {
+    overflow-y: scroll;
+    height: 100vh;
+  }
 }
 
 .nav-pills {
@@ -62,13 +63,16 @@ $nav-link-font-size: 14px;
 // than 10 anyways...
 @for $i from 0 to 10 {
   .nav-link.toc-level-#{$i} {
-    padding-left: $base-nav-link-padding * ($i + 1);
+    padding-left: $base-nav-link-padding * ($i + .75);
+    padding-top: .25rem;
+    line-height: 1.25rem;
   }
 }
 
 @media(max-width: $md-width) {
   .doc-nav {
-    padding: 50px 16px 0 66px;
+    margin-left: -20px;
+    margin-top: -55px;
   }
 
   .table-of-contents {
@@ -110,9 +114,6 @@ $nav-link-font-size: 14px;
   }
 
   .doc-nav {
-    @include sidebar-fixed;
-    margin-top: 55px;
-
     &.toc-no-breadcrumbs {
       padding-top: 6px;
     }
diff --git a/content/frontend/default/components/table_of_contents.vue b/content/frontend/default/components/table_of_contents.vue
index 20f2d584..c93d79d9 100644
--- a/content/frontend/default/components/table_of_contents.vue
+++ b/content/frontend/default/components/table_of_contents.vue
@@ -62,7 +62,7 @@ export default {
 };
 </script>
 <template>
-  <div id="markdown-toc" class="table-of-contents-container position-relative">
+  <div class="markdown-toc table-of-contents-container position-sticky">
     <div class="table-of-contents">
       <h4 class="border-0 toc-sm d-lg-none">
         <a
diff --git a/content/frontend/default/setup_table_of_contents.js b/content/frontend/default/setup_table_of_contents.js
index aa5dfa89..779ee816 100644
--- a/content/frontend/default/setup_table_of_contents.js
+++ b/content/frontend/default/setup_table_of_contents.js
@@ -3,13 +3,13 @@ import TableOfContents from './components/table_of_contents.vue';
 import { StickToFooter } from './directives/stick_to_footer';
 import { parseTOC } from '../shared/toc/parse_toc';
 
-const SIDEBAR_SELECTOR = 'doc-nav';
+const SIDEBAR_SELECTOR = '.doc-nav';
 const MARKDOWN_TOC_ID = 'markdown-toc';
 const HELP_AND_FEEDBACK_ID = 'help-and-feedback';
 const MAIN_SELECTOR = '.js-main-wrapper';
 
 export const setupTableOfContents = () => {
-  const sidebar = document.getElementById(SIDEBAR_SELECTOR);
+  const sidebar = document.querySelectorAll(SIDEBAR_SELECTOR);
   const menu = document.getElementById(MARKDOWN_TOC_ID);
   const main = document.querySelector(MAIN_SELECTOR);
   const hasHelpAndFeedback = Boolean(document.getElementById(HELP_AND_FEEDBACK_ID));
@@ -26,28 +26,29 @@ export const setupTableOfContents = () => {
   menu.remove();
 
   const el = document.createElement('div');
-  sidebar.appendChild(el);
-
-  return new Vue({
-    el,
-    directives: {
-      StickToFooter,
-    },
-    render(h) {
-      return h(TableOfContents, {
-        props: {
-          items,
-          helpAndFeedbackId: HELP_AND_FEEDBACK_ID,
-          hasHelpAndFeedback,
-        },
-        directives: [
-          {
-            name: 'stick-to-footer',
-            value: MAIN_SELECTOR,
-            expression: MAIN_SELECTOR,
+  return sidebar.forEach((sidebarEl) => {
+    sidebarEl.appendChild(el);
+    return new Vue({
+      el,
+      directives: {
+        StickToFooter,
+      },
+      render(h) {
+        return h(TableOfContents, {
+          props: {
+            items,
+            helpAndFeedbackId: HELP_AND_FEEDBACK_ID,
+            hasHelpAndFeedback,
           },
-        ],
-      });
-    },
+          directives: [
+            {
+              name: 'stick-to-footer',
+              value: MAIN_SELECTOR,
+              expression: MAIN_SELECTOR,
+            },
+          ],
+        });
+      },
+    });
   });
 };