diff options
author | David O'Regan <doregan@gitlab.com> | 2021-02-08 03:11:51 +0300 |
---|---|---|
committer | Evan Read <eread@gitlab.com> | 2021-02-08 03:11:51 +0300 |
commit | 6c62f1842936aaef3d2498f887d90f2d25899ebf (patch) | |
tree | 3cb53c2face6040253c83e9626f5c6a9798e1ad8 /layouts | |
parent | 90627b80a7dfb6c38bd577d94a99379f0bfd7f8a (diff) |
feat(header): update header component
Diffstat (limited to 'layouts')
-rw-r--r-- | layouts/cta.html | 2 | ||||
-rw-r--r-- | layouts/cta_omnibus.html | 4 | ||||
-rw-r--r-- | layouts/default.html | 2 | ||||
-rw-r--r-- | layouts/header.html | 96 | ||||
-rw-r--r-- | layouts/partials/versions_list.html | 8 | ||||
-rw-r--r-- | layouts/versions_dropdown.html | 47 |
6 files changed, 52 insertions, 107 deletions
diff --git a/layouts/cta.html b/layouts/cta.html index b9cce835..54664e64 100644 --- a/layouts/cta.html +++ b/layouts/cta.html @@ -1,3 +1,3 @@ -<a class="btn btn-nav-cta" href="https://about.gitlab.com/free-trial/" target="_blank" rel="noopener noreferrer"> +<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"> Get free trial </a> diff --git a/layouts/cta_omnibus.html b/layouts/cta_omnibus.html index 2ff33d99..23a00fcd 100644 --- a/layouts/cta_omnibus.html +++ b/layouts/cta_omnibus.html @@ -1,3 +1,3 @@ -<a class="btn btn-nav-cta" href="https://about.gitlab.com/free-trial/self-managed/" target="_blank" rel="noopener noreferrer"> +<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"> Get free trial -</a> +</a>
\ No newline at end of file diff --git a/layouts/default.html b/layouts/default.html index c636e864..69ff0243 100644 --- a/layouts/default.html +++ b/layouts/default.html @@ -34,7 +34,7 @@ </div> <div class="row"> <div class="col"> - <div class="mt-5 mt-lg-0 mb-4 mb-lg-0"> + <div class="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 5182fe98..0f5ea1fe 100644 --- a/layouts/header.html +++ b/layouts/header.html @@ -1,57 +1,53 @@ -<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> +<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> </li> - <% 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> + </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 %> <% end %> - <% 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 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 %> + <!-- End of last major versions --> <% end %> - <% 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 %> + <div class="dropdown-divider"></div> + <a class="dropdown-item" <%= active_dropdown('archives') %> href='/archives/'>Archives</a> + </div> </li> </ul> + <% if @item.identifier.to_s.split('/')[1] == 'omnibus' %> + <%= render '/cta_omnibus.*' %> + <% else %> + <%= render '/cta.*' %> + <% end %> </div> -</div> +</nav> diff --git a/layouts/partials/versions_list.html b/layouts/partials/versions_list.html index 549f1d13..d35023e7 100644 --- a/layouts/partials/versions_list.html +++ b/layouts/partials/versions_list.html @@ -6,15 +6,11 @@ contains all current versions and offline archives. --> <% if archives? %> -<li> - <a href='/archives/'> + <a class="dropdown-item" href='/archives/'> <%= version %> </a> -</li> <% else %> -<li> - <a<%= active_dropdown(version) %> href='/<%= version %><%= @item.identifier.without_ext + '.html' %>'> + <a class="dropdown-item" <%= 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 deleted file mode 100644 index 74fac920..00000000 --- a/layouts/versions_dropdown.html +++ /dev/null @@ -1,47 +0,0 @@ -<!-- 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--> |