Commit fc357792 authored by Evan Read's avatar Evan Read
Browse files

Merge branch '770' into 'master'

Docs sidebar re-design

See merge request !948
parents b0e8f05b 67783d67
Pipeline #159743814 passed with stages
in 5 minutes and 38 seconds
---
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;
}
});
});
})();
......@@ -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
......
---
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;
......
---
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 {
......
---
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;
}
}
......@@ -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="#"
......
......@@ -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));
......
......@@ -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>
......
......@@ -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>
......
<% 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
......@@ -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>
......
......@@ -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>
......
......@@ -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>
......
......@@ -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"
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment