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/stylesheets/_variables.scss1
-rw-r--r--content/assets/stylesheets/stylesheet.scss370
-rw-r--r--content/assets/stylesheets/toc.scss8
-rw-r--r--content/frontend/header/index.js3
-rw-r--r--layouts/cta.html2
-rw-r--r--layouts/cta_omnibus.html4
-rw-r--r--layouts/default.html2
-rw-r--r--layouts/header.html96
-rw-r--r--layouts/partials/versions_list.html8
-rw-r--r--layouts/versions_dropdown.html47
10 files changed, 389 insertions, 152 deletions
diff --git a/content/assets/stylesheets/_variables.scss b/content/assets/stylesheets/_variables.scss
index 0e60d241..31490ca4 100644
--- a/content/assets/stylesheets/_variables.scss
+++ b/content/assets/stylesheets/_variables.scss
@@ -29,7 +29,6 @@ $sidebar-padding: 7px;
// Heights
$page-header-height: 40px;
$banner-height: 31px;
-$header-height: 48px;
// Width
$sidebar-width: 16.66667%;
diff --git a/content/assets/stylesheets/stylesheet.scss b/content/assets/stylesheets/stylesheet.scss
index b9819725..615c8e19 100644
--- a/content/assets/stylesheets/stylesheet.scss
+++ b/content/assets/stylesheets/stylesheet.scss
@@ -1,5 +1,5 @@
---
-version: 96
+version: 95
---
@import "variables";
@@ -18,7 +18,6 @@ body {
font-family: $sans-font-family;
font-size: $body-font-size;
color: $body-color;
- overflow-x: hidden;
>.wrapper {
min-height: 100vh;
@media(max-width: $md-width) {
@@ -284,7 +283,7 @@ h6 {
}
.main {
- padding: 0 5%;
+ padding: $page-header-height 5%;
background: $main-background-color;
z-index: 1;
&:not(.has-toc) {
@@ -454,10 +453,11 @@ h6 {
flex-direction: column;
position: fixed;
width: 50px;
- height: calc(100% - 46px);
+ height: 100%;
transition: all .3s;
border-right: 1px solid $gds-gray-200;
z-index: 2;
+ top: 0;
&.active {
width: $sidebar-width;
.nav-toggle {
@@ -526,6 +526,8 @@ h6 {
}
}
@media(max-width: $md-width) {
+ position: fixed;
+ top: 0;
width: 0;
.nav-toggle {
@@ -533,6 +535,8 @@ h6 {
}
&.active {
+ position: fixed;
+ top: 0;
width: $sidebar-mobile-width;
.nav-toggle {
@@ -555,7 +559,7 @@ h6 {
}
}
.global-nav-content {
- margin-top: 85px;
+ margin-top: 120px;
margin-bottom: 70px;
}
a {
@@ -614,82 +618,85 @@ h6 {
}
}
}
+}
- .global-nav-block {
- font-weight: 600;
- padding-left: 10px;
- }
+.global-nav-block {
+ font-weight: 600;
+ padding-left: 10px;
+}
- .global-nav-link,
- .nav-link {
- text-decoration: none;
- &:hover {
- color: $link-color-nav-hover;
- }
+// scss-lint:disable QualifyingElement
+a.global-nav-link,
+.nav-link {
+ text-decoration: none;
+ &:hover {
+ color: $link-color-nav-hover;
}
+}
- .global-nav-link {
- line-height: 1.25;
- font-size: 14px;
- width: 100%;
- }
+a.global-nav-link {
+ line-height: 1.25;
+ font-size: 14px;
+ width: 100%;
+}
- .nav-link {
- padding: 0;
- display: flex;
- justify-content: space-between;
- }
+.nav-link {
+ padding: 0;
+ display: flex;
+ justify-content: space-between;
+}
- .nav-link:hover {
- background-color: $link-color-bg-active;
- }
+.nav-link:hover {
+ background-color: $link-color-bg-active;
+}
- .global-nav-block-top {
- font-weight: 600;
- margin-bottom: 3px;
- margin-top: 3px;
- a {
- text-decoration: none;
- text-shadow: 3px 3px 5px $link-color-bg-active;
- }
+// scss-lint:enable QualifyingElement
+.global-nav-block-top {
+ font-weight: 600;
+ margin-bottom: 3px;
+ margin-top: 3px;
+ a {
+ text-decoration: none;
+ text-shadow: 3px 3px 5px $link-color-bg-active;
}
+}
- .level-0 {
+// use these classes to add color and padding-left to the nav links
+.level-0 {
+ color: $global-nav-link-level0;
+ padding-left: 18px;
+ &:visited {
color: $global-nav-link-level0;
- padding-left: 18px;
- &:visited {
- color: $global-nav-link-level0;
- }
}
+}
- .level-1 {
+.level-1 {
+ color: $global-nav-link-level1;
+ padding-left: 35px;
+ &:visited {
color: $global-nav-link-level1;
- padding-left: 35px;
- &:visited {
- color: $global-nav-link-level1;
- }
}
+}
- .level-2 {
+.level-2 {
+ color: $global-nav-link-level2;
+ padding-left: 53px;
+ &:visited {
color: $global-nav-link-level2;
- padding-left: 53px;
- &:visited {
- color: $global-nav-link-level2;
- }
- }
-
- .global-nav-badges {
- fill: $gds-gray-700;
}
+}
- .last-updated {
- color: $color-light-gray;
- font-size: 13px;
- padding-bottom: 10px;
- text-align: right;
- }
+.global-nav-badges {
+ fill: $gds-gray-700;
}
+//end of global-nav
+.last-updated {
+ color: $color-light-gray;
+ font-size: 13px;
+ padding-bottom: 10px;
+ text-align: right;
+}
.btn-tanuki {
&:hover {
@@ -931,48 +938,206 @@ h6 {
}
}
-// Main header CSS
-.navbar {
- min-height: $header-height;
- background-color: $header-background-color;
-
- .navbar-brand {
- font-size: 1.25rem;
-
- strong {
- font-size: 1.15rem;
+// End of banner alert box
+.header {
+ z-index: 10;
+ background: $header-background-color;
+ color: $header-font-color;
+ position: fixed;
+ width: 100%;
+ height: $page-header-height;
+ text-align: left;
+ display: flex;
+ justify-content: space-between;
+ white-space: nowrap;
+ .logo-container {
+ margin-right: 32px;
+ @media (max-width: $lg-width) {
+ margin-right: 16px;
}
}
-
- .btn {
- line-height: 1rem;
- font-size: .875rem;
+ @media all and (max-width: $lg-width) {
+ height: auto;
}
-
- .nav-link {
- color: $gds-indigo-100;
+ img {
+ height: 24px;
+ margin-right: 10px;
}
-
- .form-inline {
- .fa-search {
- z-index: 1;
+ p {
+ font-size: 16px;
+ color: $white;
+ display: inline-block;
+ margin: 0 0 0 4px;
+ }
+ .header-company-name {
+ @media (max-width: $lg-width) {
+ display: none;
}
-
- .docsearch {
- font-size: 1rem;
- height: 28px;
- min-width: 320px;
- text-indent: 1rem;
+ }
+ ul {
+ text-align: right;
+ list-style-type: none;
+ @media all and (max-width: $lg-width) {
+ display: none;
}
}
-
- .dropdown-toggle {
- background-color: $help-indigo-500;
+ .nav-item {
+ a {
+ color: $header-font-color;
+ }
+ .btn-nav-cta {
+ background-color: $button-cta-background;
+ color: $gds-white;
+ font-weight: 700;
+ padding-left: 10px;
+ padding-right: 10px;
+ padding-top: 1px;
+ padding-bottom: 1px;
+ }
+ .btn-nav-cta:hover {
+ background-color: $button-cta-background-hover;
+ }
}
-
- @media all and (max-width: $md-width) {
- .btn {
- width: 100%;
+ @media all and (max-width: $lg-width) {
+ &.active {
+ display: block;
+ .nav {
+ display: block;
+ text-align: left;
+ padding: 0;
+ width: 100%;
+ }
+ .nav-item {
+ margin: 10px;
+ }
+ }
+ }
+ &:not(.active) {
+ height: $page-header-height;
+ }
+ .dropdown {
+ display: flex;
+ align-items: center;
+ }
+ .dropdown-menu {
+ li {
+ display: block;
+ }
+ }
+ .choose-version {
+ font-size: 14px;
+ }
+ .btn-versions {
+ display: flex;
+ align-items: center;
+ font-size: 14px;
+ font-weight: bold;
+ line-height: inherit;
+ color: $header-font-color;
+ margin-left: 4px;
+ border: 0;
+ &:active {
+ box-shadow: none;
+ }
+ }
+ .versions-menu {
+ padding: 0;
+ li {
+ display: block;
+ margin: 5px 0;
+ text-align: left;
+ a {
+ color: $versions-link-color;
+ padding: 3px 20px;
+ font-size: 14px;
+ display: block;
+ line-height: 1.4;
+ &:hover {
+ color: $versions-link-color-hover;
+ background-color: $versions-link-color-bg-hover;
+ text-decoration: none;
+ }
+ &.active {
+ background-color: $versions-active-bg-color;
+ font-weight: 600;
+ color: $link-color-nav;
+ }
+ }
+ &.divider {
+ margin: 0;
+ }
+ i {
+ padding-left: 5px;
+ opacity: .5;
+ &:hover {
+ opacity: 1;
+ }
+ }
+ }
+ }
+ input {
+ box-sizing: content-box;
+ border-radius: $border-radius;
+ -webkit-appearance: none;
+ border: 0;
+ padding: 4px 12px;
+ width: 140px;
+ color: $search-input-font-color;
+ background: $search-background-color url("<%= @items['/assets/images/icon_search_white.svg'].path %>") 140px 9px / 14px no-repeat;
+ outline: 0;
+ @media(min-width: $lg-width) {
+ width: 355px;
+ background: $search-background-color url("<%= @items['/assets/images/icon_search_white.svg'].path %>") 355px 9px / 14px no-repeat;
+ }
+ }
+ input::placeholder {
+ color: $search-placeholder-font-color;
+ }
+ input:focus {
+ border: 0;
+ }
+ input:visited {
+ outline: 0;
+ border: 0;
+ }
+ .nav-container {
+ margin: auto 0;
+ }
+ .nav-toggle {
+ display: none;
+ @media all and (max-width: $lg-width) {
+ display: flex;
+ height: $page-header-height;
+ align-items: center;
+ position: absolute;
+ padding: 0 15px;
+ cursor: pointer;
+ top: 0;
+ right: 0;
+ color: $link-color-nav;
+ }
+ }
+ .nav {
+ >li {
+ margin: 0;
+ padding-right: 10px;
+ @media(min-width: $lg-width) {
+ padding-right: 25px;
+ }
+ }
+ // Override bootstrap
+ >a {
+ text-decoration: none;
+ font-size: 14px;
+ font-weight: bold;
+ color: $header-font-color;
+ }
+ // Override bootstrap
+ >a:focus,
+ >a:hover {
+ text-decoration: none;
+ background-color: transparent;
+ opacity: .8;
}
}
}
@@ -998,6 +1163,21 @@ h6 {
fill: $help-indigo-500;
}
}
+ .header {
+ a:hover,
+ a:visited:hover {
+ &:not(.dropdown-menu a) {
+ color: $header-font-color;
+ }
+ }
+ p {
+ color: $white;
+ }
+ }
+ .container-fluid {
+ padding-top: 40px;
+ background-color: $white;
+ }
.content {
max-width: $page-content-width;
}
diff --git a/content/assets/stylesheets/toc.scss b/content/assets/stylesheets/toc.scss
index 7fb7f22b..86d88db1 100644
--- a/content/assets/stylesheets/toc.scss
+++ b/content/assets/stylesheets/toc.scss
@@ -1,5 +1,5 @@
---
-version: 19
+version: 18
---
@import "variables";
@@ -12,7 +12,7 @@ $nav-link-font-size: 14px;
// ToC styles
.table-of-contents {
padding: 16px 0;
- margin-top: 35px;
+ margin-top: 60px;
li {
list-style: none;
@@ -64,8 +64,8 @@ $nav-link-font-size: 14px;
@for $i from 0 to 10 {
.nav-link.toc-level-#{$i} {
padding-left: $base-nav-link-padding * ($i + .75);
- padding-top: 0;
- line-height: 1rem;
+ padding-top: .25rem;
+ line-height: 1.25rem;
}
}
diff --git a/content/frontend/header/index.js b/content/frontend/header/index.js
index b6fe67d4..12a67f8a 100644
--- a/content/frontend/header/index.js
+++ b/content/frontend/header/index.js
@@ -1,6 +1,9 @@
document.addEventListener('DOMContentLoaded', () => {
+ const navBar = document.querySelector('.header');
+ const navToggle = document.querySelector('.nav-toggle');
const mobileToggle = document.querySelector('.mobile-nav-toggle');
const classes = [document.querySelector('.main'), document.querySelector('.nav-wrapper')];
+ navToggle.addEventListener('click', () => navBar.classList.toggle('active'));
if (!mobileToggle) {
return;
}
diff --git a/layouts/cta.html b/layouts/cta.html
index 54664e64..b9cce835 100644
--- a/layouts/cta.html
+++ b/layouts/cta.html
@@ -1,3 +1,3 @@
-<a class="btn btn-danger text-white mb-2 mb-lg-0" href="https://about.gitlab.com/free-trial/" target="_blank" rel="noopener noreferrer" role="button">
+<a class="btn btn-nav-cta" href="https://about.gitlab.com/free-trial/" target="_blank" rel="noopener noreferrer">
Get free trial
</a>
diff --git a/layouts/cta_omnibus.html b/layouts/cta_omnibus.html
index 23a00fcd..2ff33d99 100644
--- a/layouts/cta_omnibus.html
+++ b/layouts/cta_omnibus.html
@@ -1,3 +1,3 @@
-<a class="btn btn-danger text-white mb-2 mb-lg-0" href="https://about.gitlab.com/free-trial/self-managed/" target="_blank" rel="noopener noreferrer" role="button">
+<a class="btn btn-nav-cta" href="https://about.gitlab.com/free-trial/self-managed/" target="_blank" rel="noopener noreferrer">
Get free trial
-</a> \ No newline at end of file
+</a>
diff --git a/layouts/default.html b/layouts/default.html
index 69ff0243..c636e864 100644
--- a/layouts/default.html
+++ b/layouts/default.html
@@ -34,7 +34,7 @@
</div>
<div class="row">
<div class="col">
- <div class="mb-4 mb-lg-0">
+ <div class="mt-5 mt-lg-0 mb-4 mb-lg-0">
<a class="position-absolute text-muted mt-2 pt-1 text-decoration-none mobile-nav-toggle" href="#"><i class="fa fa-bars fa-lg" aria-hidden="true"></i> | </a>
<%= render '/breadcrumbs.*' %>
</div>
diff --git a/layouts/header.html b/layouts/header.html
index 0f5ea1fe..5182fe98 100644
--- a/layouts/header.html
+++ b/layouts/header.html
@@ -1,53 +1,57 @@
-<nav class="navbar navbar-expand-lg navbar-dark py-lg-0">
- <a class="navbar-brand d-flex align-items-center justify-content-center" href="/">
- <img src="<%= @items['/assets/images/gitlab-logo.svg'].path %>" alt="GitLab logo" class="logo" />
- <span class="d-none d-lg-block px-2">GitLab</span> <strong class="pl-2 pl-lg-0 pt-0">Docs</strong>
- </a>
- <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
- <span class="navbar-toggler-icon"></span>
- </button>
- <div class="collapse navbar-collapse" id="navbarSupportedContent">
- <ul class="navbar-nav mr-auto">
- <li class="nav-item active">
- <form class="form-inline my-2 my-lg-0">
- <span class="fa fa-search form-control-feedback position-absolute ml-2 text-muted"></span>
- <input class="form-control mr-sm-2 docsearch" type="search" placeholder="Search the docs..." aria-label="Search">
- </form>
+<div class="header align-items-center px-3">
+ <div class="d-flex align-items-center py-1">
+ <a class="header-link logo-container d-flex justify-content-center align-items-center" href="/">
+ <img src="<%= @items['/assets/images/gitlab-logo.svg'].path %>" alt="GitLab logo" class="logo" />
+ <p><span class="header-company-name">GitLab </span><strong>Docs</strong></p>
+ </a>
+ <% if @item[:searchbar].nil? %>
+ <% unless @item.identifier.to_s.split('/')[1] == 'search' %>
+ <form id="search-form" action="/search/" method="get">
+ <input type="text" name="query" class="docsearch" placeholder="Search our docs" required/>
+ <input type="submit" style="visibility: hidden; position:absolute;" />
+ </form>
+ <% end %>
+ <% end %>
+ </div>
+ <div class="nav-container w-100 ml-4">
+ <a class="nav-toggle" id="docs-nav-toggle">
+ <i class="fa fa-bars text-white" aria-hidden="true"></i>
+ </a>
+ <ul class="nav align-items-center">
+ <li class="nav-item flex-grow-1">
+ <div class="d-flex align-items-center">
+ <%= render '/versions_dropdown.*' %>
+ </div>
</li>
- </ul>
- <ul class="navbar-nav mr-0 mr-lg-3 my-2 my-lg-0">
- <li class="nav-item dropdown">
- <button class="btn dropdown-toggle text-white" type="button" id="navbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
- <%= version_dropdown_title %>
- </button>
- <div class="dropdown-menu" aria-labelledby="navbarDropdown">
- <a class="dropdown-item" <%= active_dropdown(ENV['CI_DEFAULT_BRANCH']) %> href='<%= @item.identifier.without_ext + '.html' %>' class="versions-tooltip"><%= dotcom %>
- <i class="fa fa-question-circle-o" aria-hidden="true" data-toggle="tooltip" data-placement="bottom" title="Latest pre-release version of GitLab, with features available or about to become available on GitLab.com. For self-managed GitLab installations, select your version number as listed at your GitLab instance's /help URL."></i>
- </a>
- <% if display_previous_versions? %>
- <!-- Start of online versions -->
- <div class="dropdown-divider"></div>
- <% data_versions[:online].each do |version| %>
- <%= render '/partials/versions_list.*', version: version %>
+ <% if production? %>
+ <% @config[:products].each do |name, product| %>
+ <% if product[:expose] == true %>
+ <li class="nav-item">
+ <a href="<%= @items["/#{product[:slug]}/#{product[:index_file]}"].path %>">
+ <%= product[:short_name] %>
+ </a>
+ </li>
<% end %>
- <!-- End of online versions -->
-
- <!-- Start of last major versions -->
- <div class="dropdown-divider"></div>
- <% data_versions[:previous_majors].each do |version| %>
- <%= render '/partials/versions_list.*', version: version %>
+ <% end %>
+ <% else %>
+ <% @config[:products].each do |name, product| %>
+ <% if Dir.exist?("#{@config[:content_dir]}/#{product[:slug]}")%>
+ <li class="nav-item">
+ <a href="<%= @items["/#{product[:slug]}/#{product[:index_file]}"].path %>">
+ <%= product[:short_name] %>
+ </a>
+ </li>
<% end %>
- <!-- End of last major versions -->
<% end %>
- <div class="dropdown-divider"></div>
- <a class="dropdown-item" <%= active_dropdown('archives') %> href='/archives/'>Archives</a>
- </div>
+ <% end %>
+ <li class="nav-item">
+ <!-- Check if the path is /omnibus and show a different CTA -->
+ <% if @item.identifier.to_s.split('/')[1] == 'omnibus' %>
+ <%= render '/cta_omnibus.*' %>
+ <% else %>
+ <%= render '/cta.*' %>
+ <% end %>
</li>
</ul>
- <% if @item.identifier.to_s.split('/')[1] == 'omnibus' %>
- <%= render '/cta_omnibus.*' %>
- <% else %>
- <%= render '/cta.*' %>
- <% end %>
</div>
-</nav>
+</div>
diff --git a/layouts/partials/versions_list.html b/layouts/partials/versions_list.html
index d35023e7..549f1d13 100644
--- a/layouts/partials/versions_list.html
+++ b/layouts/partials/versions_list.html
@@ -6,11 +6,15 @@
contains all current versions and offline archives.
-->
<% if archives? %>
- <a class="dropdown-item" href='/archives/'>
+<li>
+ <a href='/archives/'>
<%= version %>
</a>
+</li>
<% else %>
- <a class="dropdown-item" <%= active_dropdown(version) %> href='/<%= version %><%= @item.identifier.without_ext + '.html' %>'>
+<li>
+ <a<%= active_dropdown(version) %> href='/<%= version %><%= @item.identifier.without_ext + '.html' %>'>
<%= version %>
</a>
+</li>
<% end %>
diff --git a/layouts/versions_dropdown.html b/layouts/versions_dropdown.html
new file mode 100644
index 00000000..74fac920
--- /dev/null
+++ b/layouts/versions_dropdown.html
@@ -0,0 +1,47 @@
+<!-- versions dropdown-->
+<div class="choose-version">Version</div>
+
+<div class="dropdown">
+ <a role="button" class="btn btn-versions dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="versions" href="#">
+ <!--
+ Name the label dropdown after the release version so that you know
+ which version you're browsing. For `/archives` show 'Archives' since
+ they're supposed to be versionless.
+ If we build on the default and stable branches (versions), show the following
+ name in the drodown menu:
+ - GitLab.com if the default branch.
+ - The branch name otherwise.
+ For local development and review apps, show "Versions".
+ -->
+ <%= version_dropdown_title %>
+
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu versions-menu" aria-labelledby="versions">
+ <li>
+ <a<%= active_dropdown(ENV['CI_DEFAULT_BRANCH']) %> href='<%= @item.identifier.without_ext + '.html' %>' class="versions-tooltip"><%= dotcom %>
+ <i class="fa fa-question-circle-o" aria-hidden="true" data-toggle="tooltip" data-placement="bottom" title="Latest pre-release version of GitLab, with features available or about to become available on GitLab.com. For self-managed GitLab installations, select your version number as listed at your GitLab instance's /help URL."></i>
+ </a>
+ </li>
+
+ <% if display_previous_versions? %>
+ <!-- Start of online versions -->
+ <li class="dropdown-divider"></li>
+ <% data_versions[:online].each do |version| %>
+ <%= render '/partials/versions_list.*', version: version %>
+ <% end %>
+ <!-- End of online versions -->
+
+ <!-- Start of last major versions -->
+ <li class="dropdown-divider"></li>
+ <% data_versions[:previous_majors].each do |version| %>
+ <%= render '/partials/versions_list.*', version: version %>
+ <% end %>
+ <!-- End of last major versions -->
+ <% end %>
+
+ <li class="dropdown-divider"></li>
+ <li><a<%= active_dropdown('archives') %> href='/archives/'>Archives</a></li>
+ </ul>
+</div>
+<!-- versions dropdown-->
generated by cgit v1.2.3 (git 2.25.1) at 2024-07-11 11:24:44 +0300