diff --git a/source/_static/js/main.js b/source/_static/js/main.js index fbbfeea9..c45cae40 100644 --- a/source/_static/js/main.js +++ b/source/_static/js/main.js @@ -21,16 +21,26 @@ window.addEventListener("DOMContentLoaded", (event) => { const sidebarEl = document.querySelector(".sidebar"); const headerEl = document.querySelector(".header"); const activeDocEl = document.querySelector(".docs a.current"); + const tocEl = document.querySelector(".content__toc"); - function setSidebarHeight() { + function setSidebarHeight() { //TODO: Clean this up + var headerViewHeight = headerEl.clientHeight - root.scrollTop; + var sidebarHeight = headerViewHeight > 0 ? `calc(100vh - ${headerViewHeight}px)` : "100vh"; + var sidebarReadModeHeight = window.innerWidth > 991 ? sidebarHeight : "100vh"; + if(!root.classList.contains("read-mode")) { - var headerViewHeight = headerEl.clientHeight - root.scrollTop; - var sidebarHeight = headerViewHeight > 0 ? `calc(100vh - ${headerViewHeight}px)` : "100vh"; - sidebarEl.style.setProperty("height", sidebarHeight); + tocEl.style.setProperty("height", sidebarHeight); } else { - sidebarEl.style.removeProperty("height"); + sidebarEl.style.setProperty("height", sidebarReadModeHeight); + + if(window.innerWidth > 991) { + tocEl.style.setProperty("height", sidebarReadModeHeight); + } + else { + tocEl.style.removeProperty("height"); + } } } diff --git a/source/_static/scss/includes/_aside.scss b/source/_static/scss/includes/_aside.scss index 15512384..6f6380a1 100644 --- a/source/_static/scss/includes/_aside.scss +++ b/source/_static/scss/includes/_aside.scss @@ -12,7 +12,7 @@ div.sidebar { transition: opacity 400ms, transform 300ms; padding: var(--content-padding); overflow-y: auto; - height: calc(100vh - 6.0625rem); // 6.0625rem = header height + height: 100vh; z-index: $z-index-header - 2; margin: 0; border: none; diff --git a/source/_static/scss/includes/_misc.scss b/source/_static/scss/includes/_misc.scss index 187ac61c..f3607bdf 100644 --- a/source/_static/scss/includes/_misc.scss +++ b/source/_static/scss/includes/_misc.scss @@ -2,9 +2,15 @@ // Custom scrollbar // ---------------------- .scrollbar { - scrollbar-color: var(--scrollbar-bg) transparent; scrollbar-width: thin; + &:not(.scrollbar--hover) { + scrollbar-color: var(--scrollbar-bg) transparent; + + &::-webkit-scrollbar-thumb { + background-color: var(--scrollbar-bg); + } + } &:hover { scrollbar-color: var(--scrollbar-hover-bg) transparent; @@ -24,7 +30,6 @@ } &::-webkit-scrollbar-thumb { - background-color: var(--scrollbar-bg); border-radius: 1rem; border: 3px solid transparent; background-clip: content-box; @@ -35,6 +40,10 @@ } } +.scrollbar--hover { + scrollbar-color: transparent transparent; +} + // ---------------------- // Buttons icons diff --git a/source/_static/scss/includes/_nav.scss b/source/_static/scss/includes/_nav.scss index 585e4a2d..d76c60f9 100644 --- a/source/_static/scss/includes/_nav.scss +++ b/source/_static/scss/includes/_nav.scss @@ -371,25 +371,24 @@ // ---------------------- -// Content nav +// Platform nav // ---------------------- .platform-nav { background-color: var(--content-nav-bg); font-size: $font-size-md; - z-index: 10; position: relative; box-shadow: 0 0.1875rem 0.375rem rgba($black, 0.15); - .container { + & > .container { white-space: nowrap; overflow-x: auto; display: flex; @include hide-scrollbars(); - } - &:after { - background-image: linear-gradient(270deg, var(--content-nav-bg) 0%, var(--content-nav-bg) 10%, transparent 100%); - } + &:after { + background-image: linear-gradient(270deg, var(--content-nav-bg) 0%, var(--content-nav-bg) 10%, transparent 100%); + } + } } :root { @@ -472,10 +471,9 @@ }; .platform-nav__dropdown { - z-index: 1; background-color: var(--content-nav-sub-bg); font-size: $font-size-sm; - + &:after { background-image: linear-gradient(270deg, var(--content-nav-sub-bg) 0%, var(--content-nav-sub-bg) 10%, transparent 100%); } @@ -511,7 +509,7 @@ } } -.platform-nav, +.platform-nav > .container, .platform-nav__dropdown { position: relative; @@ -523,7 +521,7 @@ width: 3rem; height: 100%; z-index: 1; - height: 2.8125rem; + height: 100%; pointer-events: none; } } \ No newline at end of file diff --git a/source/_templates/platform-navigation.html b/source/_templates/platform-navigation.html index 6923bf87..38246935 100644 --- a/source/_templates/platform-navigation.html +++ b/source/_templates/platform-navigation.html @@ -46,49 +46,4 @@ - - diff --git a/source/_templates/toc.html b/source/_templates/toc.html index 482a8e72..b6076da6 100644 --- a/source/_templates/toc.html +++ b/source/_templates/toc.html @@ -1,4 +1,4 @@ -