From 67783d67fac773a3be1ab2a3bf9e40f1692867eb Mon Sep 17 00:00:00 2001 From: David O'Regan Date: Thu, 18 Jun 2020 23:21:50 +0000 Subject: Docs sidebar re-design --- content/assets/javascripts/docs.js | 21 +--------- content/assets/stylesheets/_variables.scss | 11 +++-- content/assets/stylesheets/footer.scss | 4 +- content/assets/stylesheets/stylesheet.scss | 67 ++++++++++++++++++++---------- content/assets/stylesheets/toc.scss | 65 +++++++---------------------- 5 files changed, 72 insertions(+), 96 deletions(-) (limited to 'content/assets') diff --git a/content/assets/javascripts/docs.js b/content/assets/javascripts/docs.js index e19a305f..61d3c1cb 100644 --- a/content/assets/javascripts/docs.js +++ b/content/assets/javascripts/docs.js @@ -1,5 +1,5 @@ --- -version: 2 +version: 3 --- var NAV_INLINE_BREAKPOINT = 1100; @@ -81,24 +81,5 @@ function toggleNavigation() { } }); - // Adds the ability to auto-scroll to the active item in the TOC - $(window).on('activate.bs.scrollspy', function() { - const isMobile = window.matchMedia('(max-width: 1099px)').matches; - - if(isMobile) { - return; - } - - const activeAnchors = document.querySelectorAll('#markdown-toc .nav-link.active'); - - if(activeAnchors.length) { - const sidebarAnchorOffset = 45; - const lastActiveAnchor = activeAnchors[activeAnchors.length -1]; - const sidebar = document.getElementById('doc-nav'); - // Takes the last active anchor in the tree and scrolls it into view. - lastActiveAnchor.scrollIntoView(); - sidebar.scrollTop -= sidebarAnchorOffset; - } - }); }); })(); diff --git a/content/assets/stylesheets/_variables.scss b/content/assets/stylesheets/_variables.scss index c1679f59..c9fca4b7 100644 --- a/content/assets/stylesheets/_variables.scss +++ b/content/assets/stylesheets/_variables.scss @@ -2,6 +2,12 @@ $medium-width: 1100px; $mobile-width: 900px; +// New Breakpoints +$xs-width: 576px; +$sm-width: 768px; +$md-width: 992px; +$lg-width: 1400px; + // Border radius $border-radius: 4px; @@ -28,9 +34,8 @@ $page-header-height: 40px; $banner-height: 31px; // Width -$landing-page-content: 955px; -$sidebar-width: 236px; -$page-content-width: 955px; +$sidebar-width: 220px; +$page-content-width: 980px; // GitLab colors // Tanuki diff --git a/content/assets/stylesheets/footer.scss b/content/assets/stylesheets/footer.scss index 5fa62dcb..e4c4e80a 100644 --- a/content/assets/stylesheets/footer.scss +++ b/content/assets/stylesheets/footer.scss @@ -1,12 +1,12 @@ --- -version: 8 +version: 9 --- @import "variables"; .footer { border-color: $gds-gray-100; - max-width: $landing-page-content; + max-width: $page-content-width; font-size: $body-font-size; a { color: $landing-sidebar-gray-500; diff --git a/content/assets/stylesheets/stylesheet.scss b/content/assets/stylesheets/stylesheet.scss index 3c7cdba5..3ba7ce60 100644 --- a/content/assets/stylesheets/stylesheet.scss +++ b/content/assets/stylesheets/stylesheet.scss @@ -1,5 +1,5 @@ --- -version: 73 +version: 75 --- @import "variables"; @@ -20,6 +20,12 @@ body { >.wrapper { min-height: 100vh; + background-color: $gds-gray-50; + + @media(max-width: $md-width) { + flex-direction: column-reverse; + background-color: $white; + } // adds extra padding to the side-nav and main content if a banner is displayed. &.show-banner .nav-wrapper, &.show-banner .main { @@ -300,19 +306,13 @@ li { } .main { - margin: auto; padding: $page-header-height 40px 0; - position: relative; - max-width: 50vw; + 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; - @media (max-width: $mobile-width) { - padding: 55px 10px 5px; - } - &:not(.has-toc) { > .doc-nav { display: none; @@ -429,6 +429,13 @@ li { } } + @media(max-width: $md-width) { + padding: 0 40px 0 80px; + } + + @media(max-width: $lg-width) and (min-width: $md-width) { + width: 60%; + } } // Override Bootstraps default button (for GDS colors) @@ -462,19 +469,20 @@ li { .nav-wrapper { display: flex; flex-direction: column; - position: fixed; + position: sticky; padding-top: $page-header-height; - max-width: 220px; + max-width: $sidebar-width; width: 50px; height: 100vh; transition: all .3s; background: $gds-gray-50; border-right: 1px solid $gds-gray-200; z-index: 2; + top: 0; &.active { - width: 15%; - min-width: 190px; + @include sidebar-fixed; + min-width: $sidebar-width; .nav-toggle { @@ -509,7 +517,6 @@ li { height: 50px; flex-shrink: 0; border-radius: 0; - border-top: 1px solid $gds-gray-200; &:hover { background-color: $gds-gray-200; @@ -555,6 +562,16 @@ li { transform: rotate(-45deg) translateY(-4px); } } + + @media(max-width: $md-width) { + position: fixed; + top: 0; + + &.active { + position: fixed; + top: 0; + } + } } .global-nav { @@ -565,13 +582,6 @@ li { overflow: auto; visibility: hidden; - .global-nav-section { - &.expanded { - background-color: $gds-gray-100; - box-shadow: inset 4px 0 0 $gds-indigo-800; - } - } - .global-nav-cat.active { a { color: $gds-indigo-800; @@ -579,6 +589,7 @@ li { } .global-nav-content { + margin-top: 60px; margin-bottom: 70px; } @@ -590,10 +601,14 @@ li { padding-bottom: 7px; padding-right: 7px; + &.has-collapse.active { + border-right: 0; + } + &.active { background-color: $gds-gray-100; font-weight: 600; - border-left: 4px solid; + border-right: 4px solid; color: $gds-indigo-800; &:hover { @@ -634,6 +649,8 @@ li { &.active { background-color: $gds-gray-200; + border-right: 4px solid; + color: $gds-indigo-800; &.section-title { background-color: $gds-gray-100; } @@ -764,6 +781,12 @@ a.global-nav-link { padding: 0 4px 0 6px; } } + + @media(max-width: $md-width) { + padding: 10px 80px 0; + margin-top: 60px; + margin-bottom: -40px; + } } // Permalinks on header elements. @@ -1191,7 +1214,7 @@ a.global-nav-link { } .content { - max-width: $landing-page-content; + max-width: $page-content-width; } .sidebar-left { diff --git a/content/assets/stylesheets/toc.scss b/content/assets/stylesheets/toc.scss index 46f236b5..549e40dc 100644 --- a/content/assets/stylesheets/toc.scss +++ b/content/assets/stylesheets/toc.scss @@ -1,8 +1,9 @@ --- -version: 12 +version: 14 --- @import "variables"; +@import "utilities"; $base-nav-link-padding: .75rem; $sm-nav-link-padding: 1.25rem; @@ -56,17 +57,22 @@ $nav-link-font-size: 14px; flex-wrap: nowrap; } -// not wide enough to show quick nav and toc -@media(max-width:1099px) { +// NOTE: This only allows for 10 levels. +// This should be acceptable since levels are determined by the `` which is less +// than 10 anyways... +@for $i from 0 to 10 { + .nav-link.toc-level-#{$i} { + padding-left: $base-nav-link-padding * ($i + 1); + } +} + +@media(max-width: $md-width) { .doc-nav { - position: relative; - min-height: 34px; + padding: 50px 40px 0 70px; } .table-of-contents { - margin: 0; - padding: 0; - + margin-top: 0; .nav-link { border-left: 0; padding-left: $sm-nav-link-padding; @@ -87,13 +93,6 @@ $nav-link-font-size: 14px; display: none; } - .main.class { - float: none; - width: inherit; - max-width: 955px; - margin: auto 1% auto 50px; - } - .toc-lg { display: none; } @@ -104,19 +103,15 @@ $nav-link-font-size: 14px; } // wide enough to show toc but not quick nav -@media(min-width:1100px) { +@media(min-width: $md-width) { .header { top: 0; left: 0; } .doc-nav { - position: fixed; - top: 0; - right: 8px; + @include sidebar-fixed; margin-top: 55px; - overflow: scroll; - height: 100%; &.toc-no-breadcrumbs { padding-top: 6px; @@ -136,32 +131,4 @@ $nav-link-font-size: 14px; padding-top: 1rem; margin-top: 1rem; } - - // NOTE: This only allows for 10 levels. - // This should be acceptable since levels are determined by the `` which is less - // than 10 anyways... - @for $i from 0 to 10 { - .nav-link.toc-level-#{$i} { - padding-left: $base-nav-link-padding * ($i + 1); - } - } -} - -@media(min-width:1100px) and (max-width:1600px) { - $doc-nav-width: 19vw; - - .doc-nav { - width: $doc-nav-width; - } -} - -// wide enough to show quick nav and toc -@media(min-width:1601px) { - $doc-nav-desired-width: 0; - // Get around the scroll bar - $doc-nav-width: 21%; - - .doc-nav { - width: $doc-nav-width; - } } -- cgit v1.2.3