Welcome to mirror list, hosted at ThFree Co, Russian Federation.

gitlab.com/gitlab-org/gitlab-docs.git - Unnamed repository; edit this file 'description' to name the repository.
summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--content/assets/javascripts/docs.js21
-rw-r--r--content/assets/stylesheets/_variables.scss11
-rw-r--r--content/assets/stylesheets/footer.scss4
-rw-r--r--content/assets/stylesheets/stylesheet.scss67
-rw-r--r--content/assets/stylesheets/toc.scss65
-rw-r--r--content/frontend/default/components/table_of_contents.vue2
-rw-r--r--content/frontend/default/setup_table_of_contents.js4
-rw-r--r--layouts/404.html8
-rw-r--r--layouts/archives.html5
-rw-r--r--layouts/breadcrumbs.html11
-rw-r--r--layouts/default.html24
-rw-r--r--layouts/global_nav.html6
-rw-r--r--layouts/instantsearch.html7
-rw-r--r--spec/frontend/default/components/__snapshots__/table_of_contents_spec.js.snap2
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"
generated by cgit v1.2.3 (git 2.25.1) at 2024-07-11 18:21:57 +0300