diff options
author | Eric Eastwood <contact@ericeastwood.com> | 2018-02-07 20:56:38 +0300 |
---|---|---|
committer | Eric Eastwood <contact@ericeastwood.com> | 2018-02-07 21:42:29 +0300 |
commit | 03ccedafe9e401fb76cdd7f7ebb435e7048b8ed0 (patch) | |
tree | 4b8378da99126187af21d98c96fcf4068618f7e8 /content | |
parent | 65256df830c7595f29996cb649fbb84fa92eb785 (diff) |
Fix overlap between .main and .doc-nav with scrollbars
Diffstat (limited to 'content')
-rw-r--r-- | content/assets/javascripts/docs.js | 15 | ||||
-rw-r--r-- | content/assets/stylesheets/stylesheet.scss | 8 | ||||
-rw-r--r-- | content/assets/stylesheets/toc.scss | 28 |
3 files changed, 30 insertions, 21 deletions
diff --git a/content/assets/javascripts/docs.js b/content/assets/javascripts/docs.js index 05e8ab35..36343c27 100644 --- a/content/assets/javascripts/docs.js +++ b/content/assets/javascripts/docs.js @@ -43,21 +43,26 @@ function toggleNavigation() { sidebar.appendChild(menu); - var sidebarHeight = sidebar.querySelector('ul').getBoundingClientRect().height + 55; + var sidebarContent = sidebar.querySelector('ul'); + var sidebarContentHeight = 0; // When we scroll down to the bottom, we don't want the footer covering // the TOC list (sticky behavior) document.addEventListener('scroll', function() { + // Wait a cycle for the dimensions to kick in + if(!sidebarContentHeight) { + sidebarContentHeight = sidebarContent.getBoundingClientRect().height + 55; + } + var isTouchingBottom = false; if (window.innerWidth >= NAV_INLINE_BREAKPOINT) { - isTouchingBottom = window.scrollY + sidebarHeight >= main.offsetHeight; + isTouchingBottom = window.scrollY + sidebarContentHeight >= main.offsetHeight; } - sidebar.classList.toggle('doc-nav-bottom-touching', isTouchingBottom) if (isTouchingBottom) { - sidebar.style.top = (main.offsetHeight - sidebarHeight) + 'px'; + sidebarContent.style.top = (main.offsetHeight - (window.scrollY + sidebarContentHeight)) + 'px'; } else { - sidebar.style.top = ''; + sidebarContent.style.top = ''; } }, { passive : true }); } diff --git a/content/assets/stylesheets/stylesheet.scss b/content/assets/stylesheets/stylesheet.scss index cf0e206f..e19cf87d 100644 --- a/content/assets/stylesheets/stylesheet.scss +++ b/content/assets/stylesheets/stylesheet.scss @@ -1,5 +1,5 @@ --- -version: 23 +version: 24 --- @import "variables"; @@ -172,6 +172,12 @@ h6 { padding: 20px 10px; } + &:not(.has-toc) { + > .doc-nav { + display: none; + } + } + a { text-decoration: none; } diff --git a/content/assets/stylesheets/toc.scss b/content/assets/stylesheets/toc.scss index e149d737..421c29ce 100644 --- a/content/assets/stylesheets/toc.scss +++ b/content/assets/stylesheets/toc.scss @@ -1,5 +1,5 @@ --- -version: 3 +version: 4 --- @import "variables"; @@ -15,6 +15,7 @@ version: 3 } > ul { + position: relative; background: $body-background-color; padding: 20px; margin-top: 60px; @@ -69,16 +70,16 @@ version: 3 height: 100vh; } - .doc-nav-bottom-touching { - position: absolute; - } - .doc-nav ul ul { padding-left: 25px; } } @media(min-width:1100px) and (max-width:1600px) { + $doc-nav-desired-width: 30vw; + // Get around the scroll bar + $doc-nav-width: calc(#{$doc-nav-desired-width} - 20px); + .main.class.has-toc { width: 70vw; max-width: 70vw; @@ -86,26 +87,23 @@ version: 3 } .doc-nav { - width: 30vw; - max-width: 30vw; - } - .doc-nav-bottom-touching { - right: -30vw; + width: $doc-nav-width; } } // wide enough to show quick nav and toc @media(min-width:1601px) { + $doc-nav-desired-width: 25vw; + // Get around the scroll bar + $doc-nav-width: calc(#{$doc-nav-desired-width} - 20px); + .main.class.has-toc { width: 50vw; max-width: 50vw; - margin-left: 25vw; + margin-left: $doc-nav-desired-width; } .doc-nav { - width: 25vw; - } - .doc-nav-bottom-touching { - right: -25vw; + width: $doc-nav-width; } } |