From 883d7b5c91920860980904e15ac6a5b6b9dabe6a Mon Sep 17 00:00:00 2001 From: Dennis Tang Date: Mon, 26 Nov 2018 11:38:34 +0000 Subject: [PATCH] Resolve main nav clipping in certain breakpoints Makes the following changes in order to have all the items of the top nav fit within all of the new Bootstrap 4 breakpoints: - Change GitLab logo to show only on desktop breakpoint (lg and up) - Move margin from logo to logo text, saving 8px - Move the following icon links to the "More" nav dropdown - Instance Statistics (ConDev Index) - Admin area (if Admin) - Sherlock Transactions (if enabled) - Removed separator between Admin icons - Change search input width from 240px to 200px - Move "Activity", "Milestone", and "Snippets" into "More" menu on lg breakpoints - Show "More" menu of lg breakpoints --- app/assets/stylesheets/framework/header.scss | 6 ---- .../stylesheets/framework/variables.scss | 2 +- app/helpers/nav_helper.rb | 4 +-- app/views/layouts/header/_default.html.haml | 2 +- app/views/layouts/nav/_dashboard.html.haml | 35 +++++++++++++------ ...r-is-broken-in-certain-viewport-widths.yml | 5 +++ locale/gitlab.pot | 3 -- 7 files changed, 34 insertions(+), 23 deletions(-) create mode 100644 changelogs/unreleased/49713-main-navbar-is-broken-in-certain-viewport-widths.yml diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss index 78009f43ced..45a52d99302 100644 --- a/app/assets/stylesheets/framework/header.scss +++ b/app/assets/stylesheets/framework/header.scss @@ -90,12 +90,6 @@ padding: 2px 8px; margin: 5px 2px 5px -8px; border-radius: $border-radius-default; - - .tanuki-logo { - @include media-breakpoint-up(sm) { - margin-right: 8px; - } - } } .project-item-select { diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss index 2dba2c61631..5310195d9c5 100644 --- a/app/assets/stylesheets/framework/variables.scss +++ b/app/assets/stylesheets/framework/variables.scss @@ -400,7 +400,7 @@ $award-emoji-positive-add-lines: #bb9c13; * Search Box */ $search-input-border-color: rgba($blue-400, 0.8); -$search-input-width: 240px; +$search-input-width: 200px; $search-input-active-width: 320px; $location-icon-color: #e7e9ed; diff --git a/app/helpers/nav_helper.rb b/app/helpers/nav_helper.rb index a7fe8c3d59c..05da5ebdb22 100644 --- a/app/helpers/nav_helper.rb +++ b/app/helpers/nav_helper.rb @@ -47,8 +47,8 @@ module NavHelper class_names end - def show_separator? - Gitlab::Sherlock.enabled? || can?(current_user, :read_instance_statistics) + def has_extra_nav_icons? + Gitlab::Sherlock.enabled? || can?(current_user, :read_instance_statistics) || current_user.admin? end def page_has_markdown? diff --git a/app/views/layouts/header/_default.html.haml b/app/views/layouts/header/_default.html.haml index b7d69539eb7..e8d0d809181 100644 --- a/app/views/layouts/header/_default.html.haml +++ b/app/views/layouts/header/_default.html.haml @@ -15,7 +15,7 @@ = brand_header_logo - logo_text = brand_header_logo_type - if logo_text.present? - %span.logo-text.d-none.d-sm-block + %span.logo-text.d-none.d-lg-block.prepend-left-8 = logo_text - if current_user diff --git a/app/views/layouts/nav/_dashboard.html.haml b/app/views/layouts/nav/_dashboard.html.haml index ea5f2b166b4..7057a5a142f 100644 --- a/app/views/layouts/nav/_dashboard.html.haml +++ b/app/views/layouts/nav/_dashboard.html.haml @@ -1,3 +1,5 @@ +-# WAIT! Before adding more items to the nav bar, please see +-# https://gitlab.com/gitlab-org/gitlab-ce/issues/49713 for more information. %ul.list-unstyled.navbar-sub-nav - if dashboard_nav_link?(:projects) = nav_link(path: ['root#index', 'projects#trending', 'projects#starred', 'dashboard/projects#index'], html_options: { id: 'nav-projects-dropdown', class: "home dropdown header-projects qa-projects-dropdown" }) do @@ -16,22 +18,22 @@ = render "layouts/nav/groups_dropdown/show" - if dashboard_nav_link?(:activity) - = nav_link(path: 'dashboard#activity', html_options: { class: "d-none d-lg-block d-xl-block" }) do + = nav_link(path: 'dashboard#activity', html_options: { class: ["d-none d-xl-block", ("d-lg-block" unless has_extra_nav_icons?)] }) do = link_to activity_dashboard_path, class: 'dashboard-shortcuts-activity', title: _('Activity') do = _('Activity') - if dashboard_nav_link?(:milestones) - = nav_link(controller: 'dashboard/milestones', html_options: { class: "d-none d-lg-block d-xl-block" }) do + = nav_link(controller: 'dashboard/milestones', html_options: { class: ["d-none d-xl-block", ("d-lg-block" unless has_extra_nav_icons?)] }) do = link_to dashboard_milestones_path, class: 'dashboard-shortcuts-milestones', title: _('Milestones') do = _('Milestones') - if dashboard_nav_link?(:snippets) - = nav_link(controller: 'dashboard/snippets', html_options: { class: "d-none d-lg-block d-xl-block" }) do + = nav_link(controller: 'dashboard/snippets', html_options: { class: ["d-none d-xl-block", ("d-lg-block" unless has_extra_nav_icons?)] }) do = link_to dashboard_snippets_path, class: 'dashboard-shortcuts-snippets', title: _('Snippets') do = _('Snippets') - if any_dashboard_nav_link?([:groups, :milestones, :activity, :snippets]) - %li.header-more.dropdown.d-lg-none.d-xl-none + %li.header-more.dropdown.d-xl-none{ class: ('d-lg-none' unless has_extra_nav_icons?) } %a{ href: "#", data: { toggle: "dropdown" } } = _('More') = sprite_icon('angle-down', css_class: 'caret-down') @@ -52,6 +54,21 @@ = link_to dashboard_snippets_path, class: 'dashboard-shortcuts-snippets', title: _('Snippets') do = _('Snippets') + = render_if_exists 'dashboard/operations/nav_link' + - if can?(current_user, :read_instance_statistics) + = nav_link(controller: [:conversational_development_index, :cohorts]) do + = link_to instance_statistics_root_path, title: _('Instance Statistics'), aria: { label: _('Instance Statistics') }, data: {toggle: 'tooltip', placement: 'bottom', container: 'body'} do + = _('Instance Statistics') + - if current_user.admin? + = nav_link(controller: 'admin/dashboard') do + = link_to admin_root_path, class: 'admin-icon qa-admin-area-link', title: _('Admin Area'), aria: { label: _('Admin Area') }, data: {toggle: 'tooltip', placement: 'bottom', container: 'body'} do + = _('Admin Area') + - if Gitlab::Sherlock.enabled? + %li + = link_to sherlock_transactions_path, class: 'admin-icon', title: _('Sherlock Transactions'), + data: {toggle: 'tooltip', placement: 'bottom', container: 'body'} do + = _('Sherlock Transactions') + -# Shortcut to Dashboard > Projects - if dashboard_nav_link?(:projects) %li.hidden @@ -64,19 +81,17 @@ = link_to '#', class: 'dashboard-shortcuts-web-ide', title: _('Web IDE') do = _('Web IDE') - - if show_separator? - %li.line-separator.d-none.d-sm-block = render_if_exists 'dashboard/operations/nav_link' - if can?(current_user, :read_instance_statistics) - = nav_link(controller: [:conversational_development_index, :cohorts]) do + = nav_link(controller: [:conversational_development_index, :cohorts], html_options: { class: "d-none d-lg-block d-xl-block"}) do = link_to instance_statistics_root_path, title: _('Instance Statistics'), aria: { label: _('Instance Statistics') }, data: {toggle: 'tooltip', placement: 'bottom', container: 'body'} do = sprite_icon('chart', size: 18) - if current_user.admin? - = nav_link(controller: 'admin/dashboard') do - = link_to admin_root_path, class: 'admin-icon qa-admin-area-link', title: _('Admin area'), aria: { label: _('Admin area') }, data: {toggle: 'tooltip', placement: 'bottom', container: 'body'} do + = nav_link(controller: 'admin/dashboard', html_options: { class: "d-none d-lg-block d-xl-block"}) do + = link_to admin_root_path, class: 'admin-icon qa-admin-area-link', title: _('Admin Area'), aria: { label: _('Admin Area') }, data: {toggle: 'tooltip', placement: 'bottom', container: 'body'} do = sprite_icon('admin', size: 18) - if Gitlab::Sherlock.enabled? %li - = link_to sherlock_transactions_path, class: 'admin-icon', title: _('Sherlock Transactions'), + = link_to sherlock_transactions_path, class: 'admin-icon d-none d-lg-block d-xl-block', title: _('Sherlock Transactions'), data: {toggle: 'tooltip', placement: 'bottom', container: 'body'} do = icon('tachometer fw') diff --git a/changelogs/unreleased/49713-main-navbar-is-broken-in-certain-viewport-widths.yml b/changelogs/unreleased/49713-main-navbar-is-broken-in-certain-viewport-widths.yml new file mode 100644 index 00000000000..0b5d1a6b05a --- /dev/null +++ b/changelogs/unreleased/49713-main-navbar-is-broken-in-certain-viewport-widths.yml @@ -0,0 +1,5 @@ +--- +title: Resolve Main navbar is broken in certain viewport widths +merge_request: 23348 +author: +type: fixed diff --git a/locale/gitlab.pot b/locale/gitlab.pot index 043864fd47e..032498babec 100644 --- a/locale/gitlab.pot +++ b/locale/gitlab.pot @@ -405,9 +405,6 @@ msgstr "" msgid "Admin Overview" msgstr "" -msgid "Admin area" -msgstr "" - msgid "AdminArea| You are about to permanently delete the user %{username}. Issues, merge requests, and groups linked to them will be transferred to a system-wide \"Ghost-user\". To avoid data loss, consider using the %{strong_start}block user%{strong_end} feature instead. Once you %{strong_start}Delete user%{strong_end}, it cannot be undone or recovered." msgstr "" -- GitLab