diff options
author | David O'Regan <doregan@gitlab.com> | 2020-06-19 02:21:50 +0300 |
---|---|---|
committer | Evan Read <eread@gitlab.com> | 2020-06-19 02:21:50 +0300 |
commit | 67783d67fac773a3be1ab2a3bf9e40f1692867eb (patch) | |
tree | b175045032ff679705192c9570238ced2998d3ee | |
parent | e6425ce9c161c9e0a500968e3f4cf246850c4b55 (diff) |
Docs sidebar re-design
-rw-r--r-- | content/assets/javascripts/docs.js | 21 | ||||
-rw-r--r-- | content/assets/stylesheets/_variables.scss | 11 | ||||
-rw-r--r-- | content/assets/stylesheets/footer.scss | 4 | ||||
-rw-r--r-- | content/assets/stylesheets/stylesheet.scss | 67 | ||||
-rw-r--r-- | content/assets/stylesheets/toc.scss | 65 | ||||
-rw-r--r-- | content/frontend/default/components/table_of_contents.vue | 2 | ||||
-rw-r--r-- | content/frontend/default/setup_table_of_contents.js | 4 | ||||
-rw-r--r-- | layouts/404.html | 8 | ||||
-rw-r--r-- | layouts/archives.html | 5 | ||||
-rw-r--r-- | layouts/breadcrumbs.html | 11 | ||||
-rw-r--r-- | layouts/default.html | 24 | ||||
-rw-r--r-- | layouts/global_nav.html | 6 | ||||
-rw-r--r-- | layouts/instantsearch.html | 7 | ||||
-rw-r--r-- | spec/frontend/default/components/__snapshots__/table_of_contents_spec.js.snap | 2 |
14 files changed, 109 insertions, 128 deletions
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 `<h1-6>` 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 `<h1-6>` 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; - } } diff --git a/content/frontend/default/components/table_of_contents.vue b/content/frontend/default/components/table_of_contents.vue index 00c7b46e..20f2d584 100644 --- a/content/frontend/default/components/table_of_contents.vue +++ b/content/frontend/default/components/table_of_contents.vue @@ -64,7 +64,7 @@ export default { <template> <div id="markdown-toc" class="table-of-contents-container position-relative"> <div class="table-of-contents"> - <h4 class="border-0 toc-sm"> + <h4 class="border-0 toc-sm d-lg-none"> <a class="d-flex text-decoration-none" href="#" diff --git a/content/frontend/default/setup_table_of_contents.js b/content/frontend/default/setup_table_of_contents.js index 9134b40e..58dec30a 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_ID = '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 default () => { - const sidebar = document.getElementById(SIDEBAR_ID); + const sidebar = document.getElementById(SIDEBAR_SELECTOR); const menu = document.getElementById(MARKDOWN_TOC_ID); const main = document.querySelector(MAIN_SELECTOR); const hasHelpAndFeedback = Boolean(document.getElementById(HELP_AND_FEEDBACK_ID)); diff --git a/layouts/404.html b/layouts/404.html index 05268cff..c08dcba0 100644 --- a/layouts/404.html +++ b/layouts/404.html @@ -8,9 +8,11 @@ </head> <body> <%= render '/header.*' %> - <div class="main class"> - <%= yield %> - <%= render '/footer.*' %> + <div class="wrapper d-flex justify-center"> + <div class="main class"> + <%= yield %> + <%= render '/footer.*' %> + </div> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> diff --git a/layouts/archives.html b/layouts/archives.html index 55a98903..3671f413 100644 --- a/layouts/archives.html +++ b/layouts/archives.html @@ -7,7 +7,8 @@ <%= render '/gtm.*' %> <%= render '/header.*' %> <div id="js-banner"></div> - <div class="wrapper"> + <div class="wrapper d-flex justify-center"> + <div class="doc-nav"></div> <div class="main class js-main-wrapper"> <div class="js-article-content"> <%= yield %> @@ -27,7 +28,7 @@ <% end %> <%= render '/footer.*' %> </div> - <div class="clear"></div> + <div class="doc-nav"></div> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> diff --git a/layouts/breadcrumbs.html b/layouts/breadcrumbs.html new file mode 100644 index 00000000..0dd1ecf5 --- /dev/null +++ b/layouts/breadcrumbs.html @@ -0,0 +1,11 @@ +<% if @config[:breadcrumbs] %> + <% ancestor_array = ancestor_path_array(@item) unless ancestor_path_array(@item).empty? %> + <% if ancestor_array %> + <ul class="breadcrumbs"> + <% ancestor_array.reverse_each do |item| %> + <li class="breadcrumb"><%= link_to item.key?(:title) ? "#{item[:title]}" : "Breadcrumb", item %></li> + <% end %> + <li class="breadcrumb"><%= @item.key?(:title) ? "#{@item[:title]}" : "Current page" %></li> + </ul> + <% end %> +<% end %>
\ No newline at end of file diff --git a/layouts/default.html b/layouts/default.html index 0367eb66..8f1cd75d 100644 --- a/layouts/default.html +++ b/layouts/default.html @@ -9,7 +9,7 @@ <%= render '/header.*' %> <div id="js-version-banner" <%= 'data-is-outdated' if show_version_banner? %> data-latest-version-url="<%= @item.identifier.without_ext + '.html' %>" data-archives-url="/archives/"></div> - <div class="wrapper"> + <div class="wrapper d-flex justify-center"> <div class="nav-wrapper active"> <aside id="global-nav" class="global-nav"> <% if ENV['CI_PROJECT_NAME'] == 'gitlab-docs' or ENV['CI_PROJECT_NAME'].nil? %> @@ -19,20 +19,9 @@ <div id="js-nav-toggle"></div> </div> <div class="main class js-main-wrapper"> - <% if @config[:breadcrumbs] %> - <% ancestor_array = ancestor_path_array(@item) unless ancestor_path_array(@item).empty? %> - <% if ancestor_array %> - <ul class="breadcrumbs"> - <% ancestor_array.reverse_each do |item| %> - <li class="breadcrumb"><%= link_to item.key?(:title) ? "#{item[:title]}" : "Breadcrumb", item %></li> - <% end %> - <li class="breadcrumb"><%= @item.key?(:title) ? "#{@item[:title]}" : "Current page" %></li> - </ul> - <div id="doc-nav" class="doc-nav"></div> - <% else %> - <div id="doc-nav" class="doc-nav toc-no-breadcrumbs"></div> - <% end %> - <% end %> + <div class="d-none d-lg-block"> + <%= render '/breadcrumbs.*' %> + </div> <% if @item[:title] %> <h1 class="article-title" itemprop="name"> <%= @item[:title] %><%= @item[:title_badge] %> @@ -68,7 +57,10 @@ <%= render '/feedback.*' %> <%= render '/footer.*' %> </div> - <div class="clear"></div> + <div id="doc-nav" class="doc-nav"></div> + <div class="d-lg-none"> + <%= render '/breadcrumbs.*' %> + </div> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> diff --git a/layouts/global_nav.html b/layouts/global_nav.html index 4107f541..334f4d85 100644 --- a/layouts/global_nav.html +++ b/layouts/global_nav.html @@ -11,7 +11,7 @@ nav_items = nav_items_exists ? @items[nav_items_dir] : @items["/_data/default-na <div class="global-nav-section"> <span class="global-nav-block-top nav-link"> <% section_href = is_ee_prefixed ? "/ee/#{sec[:section_url]}" : "/#{dir}/#{sec[:section_url]}" %> - <a class="global-nav-link level-0 <% if @item.path == "/#{dir}/#{sec[:section_url]}" %>active<% end %>" href="<%= section_href %>"> + <a class="global-nav-link level-0 <% if sec[:section_categories] %>has-collapse<% end %> <% if @item.path == "/#{dir}/#{sec[:section_url]}" %>active<% end %>" href="<%= section_href %>"> <%= sec[:section_title] %> <% if sec[:ee_only] %> <span class="badges-drop global-nav-badges" data-toggle="tooltip" data-placement="top" title="Available in <%= sec[:ee_tier] %>"><i class="fa fa-info-circle" aria-hidden="true"></i></span> @@ -26,12 +26,12 @@ nav_items = nav_items_exists ? @items[nav_items_dir] : @items["/_data/default-na <% sec[:section_categories].each do |cat| %> <span class="global-nav-cat nav-link"> <% if cat[:external_url] %> - <a class="global-nav-link level-1" href="<%= cat[:category_url] %>" target="_blank"> + <a class="global-nav-link level-1 <% if cat[:docs] %>has-collapse<% end %>" href="<%= cat[:category_url] %>" target="_blank"> <%= cat[:category_title] %> </a> <% else %> <% category_href = is_ee_prefixed ? "/ee/#{cat[:category_url]}" : "/#{dir}/#{cat[:category_url]}" %> - <a class="global-nav-link level-1 <% if @item.path == "/#{dir}/#{cat[:category_url]}" %>active<% end %>" href="<%= category_href %>"> + <a class="global-nav-link level-1 <% if cat[:docs] %>has-collapse<% end %> <% if @item.path == "/#{dir}/#{cat[:category_url]}" %>active<% end %>" href="<%= category_href %>"> <%= cat[:category_title] %> <% if cat[:ee_only] %> <span class="badges-drop global-nav-badges" data-toggle="tooltip" data-placement="top" title="Available in <%= cat[:ee_tier] %>"><i class="fa fa-info-circle" aria-hidden="true"></i></span> diff --git a/layouts/instantsearch.html b/layouts/instantsearch.html index 615e60ca..c90a8165 100644 --- a/layouts/instantsearch.html +++ b/layouts/instantsearch.html @@ -8,14 +8,13 @@ <body> <%= render '/gtm.*' %> <%= render '/header.*' %> - <div class=wrapper> - <div id="doc-nav" class="doc-nav"></div> + <div class="wrapper d-flex justify-center"> + <div class="doc-nav"></div> <div class="main class instantsearch-input"> <%= yield %> <%= render '/footer.*' %> </div> - <hr> - <div class="clear"></div> + <div class="doc-nav"></div> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> <script type="application/javascript" src="<%= @items['/assets/javascripts/instantsearch.*'].path %>"></script> diff --git a/spec/frontend/default/components/__snapshots__/table_of_contents_spec.js.snap b/spec/frontend/default/components/__snapshots__/table_of_contents_spec.js.snap index 09072492..37c9400b 100644 --- a/spec/frontend/default/components/__snapshots__/table_of_contents_spec.js.snap +++ b/spec/frontend/default/components/__snapshots__/table_of_contents_spec.js.snap @@ -9,7 +9,7 @@ exports[`frontend/default/components/table_of_contents matches snapshot 1`] = ` class="table-of-contents" > <h4 - class="border-0 toc-sm" + class="border-0 toc-sm d-lg-none" > <a aria-controls="markdown-toc" |