diff options
author | Filipa Lacerda <filipa@gitlab.com> | 2017-10-07 18:17:13 +0000 |
---|---|---|
committer | Filipa Lacerda <filipa@gitlab.com> | 2017-10-07 18:17:13 +0000 |
commit | 4c020c8ca49c6e7a38cef86f061cc6b60e63a1bd (patch) | |
tree | 4cd558e5bf45becc080ad337946a09438aecde79 | |
parent | 2ef28db9a1b7d56c5dda6230dcffcf4e140ecc45 (diff) | |
parent | b352462d01e3c51d09314c282e84afe075d6ad01 (diff) | |
download | gitlab-ce-4c020c8ca49c6e7a38cef86f061cc6b60e63a1bd.tar.gz |
Merge branch 'cleanup_old_nav_stuff' into 'master'
Remove old navigation CSS
See merge request gitlab-org/gitlab-ce!14573
24 files changed, 501 insertions, 932 deletions
diff --git a/app/assets/images/new_nav.png b/app/assets/images/new_nav.png Binary files differdeleted file mode 100644 index f98ca15d787..00000000000 --- a/app/assets/images/new_nav.png +++ /dev/null diff --git a/app/assets/images/old_nav.png b/app/assets/images/old_nav.png Binary files differdeleted file mode 100644 index 23fae7aa19e..00000000000 --- a/app/assets/images/old_nav.png +++ /dev/null diff --git a/app/assets/javascripts/shortcuts.js b/app/assets/javascripts/shortcuts.js index e754f6c4460..f63b99ba1c5 100644 --- a/app/assets/javascripts/shortcuts.js +++ b/app/assets/javascripts/shortcuts.js @@ -18,23 +18,8 @@ import findAndFollowLink from './shortcuts_dashboard_navigation'; Mousetrap.bind('f', (e => this.focusFilter(e))); Mousetrap.bind('p b', this.onTogglePerfBar); - const $globalDropdownMenu = $('.global-dropdown-menu'); - const $globalDropdownToggle = $('.global-dropdown-toggle'); const findFileURL = document.body.dataset.findFile; - $('.global-dropdown').on('hide.bs.dropdown', () => { - $globalDropdownMenu.removeClass('shortcuts'); - }); - - Mousetrap.bind('n', () => { - $globalDropdownMenu.toggleClass('shortcuts'); - $globalDropdownToggle.trigger('click'); - - if (!$globalDropdownMenu.is(':visible')) { - $globalDropdownToggle.blur(); - } - }); - Mousetrap.bind('shift+t', () => findAndFollowLink('.shortcuts-todos')); Mousetrap.bind('shift+a', () => findAndFollowLink('.dashboard-shortcuts-activity')); Mousetrap.bind('shift+i', () => findAndFollowLink('.dashboard-shortcuts-issues')); diff --git a/app/assets/stylesheets/framework.scss b/app/assets/stylesheets/framework.scss index e8037c77aab..c7be94e2c8e 100644 --- a/app/assets/stylesheets/framework.scss +++ b/app/assets/stylesheets/framework.scss @@ -30,10 +30,9 @@ @import "framework/media_object"; @import "framework/mobile"; @import "framework/modal"; -@import "framework/nav"; -@import "framework/new-nav"; @import "framework/pagination"; @import "framework/panels"; +@import "framework/secondary-navigation-elements"; @import "framework/selects"; @import "framework/sidebar"; @import "framework/new-sidebar"; diff --git a/app/assets/stylesheets/framework/animations.scss b/app/assets/stylesheets/framework/animations.scss index 667b73e150d..f0e6b23757f 100644 --- a/app/assets/stylesheets/framework/animations.scss +++ b/app/assets/stylesheets/framework/animations.scss @@ -115,8 +115,7 @@ @return $unfoldedTransition; } -.btn, -.global-dropdown-toggle { +.btn { @include transition(background-color, border-color, color, box-shadow); } diff --git a/app/assets/stylesheets/framework/blocks.scss b/app/assets/stylesheets/framework/blocks.scss index 1d72a70f0f5..dbd990f84c1 100644 --- a/app/assets/stylesheets/framework/blocks.scss +++ b/app/assets/stylesheets/framework/blocks.scss @@ -207,6 +207,16 @@ &.user-cover-block { padding: 24px 0 0; + + .nav-links { + justify-content: center; + width: 100%; + float: none; + + &.scrolling-tabs { + float: none; + } + } } .group-info { diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss index fa92d4ccf4f..5b950ae0ba0 100644 --- a/app/assets/stylesheets/framework/dropdowns.scss +++ b/app/assets/stylesheets/framework/dropdowns.scss @@ -749,7 +749,7 @@ margin-bottom: $dropdown-vertical-offset; } - li { + li:not(.dropdown-bold-header) { display: block; padding: 0 1px; @@ -889,7 +889,7 @@ @include new-style-dropdown('.breadcrumbs-list .dropdown '); @include new-style-dropdown('.js-namespace-select + '); -header.navbar-gitlab-new .header-content .dropdown-menu.projects-dropdown-menu { +header.header-content .dropdown-menu.projects-dropdown-menu { padding: 0; } diff --git a/app/assets/stylesheets/framework/gitlab-theme.scss b/app/assets/stylesheets/framework/gitlab-theme.scss index a6bdcf46aa7..52b87de7a3d 100644 --- a/app/assets/stylesheets/framework/gitlab-theme.scss +++ b/app/assets/stylesheets/framework/gitlab-theme.scss @@ -5,7 +5,7 @@ @mixin gitlab-theme($color-100, $color-200, $color-500, $color-700, $color-800, $color-900, $color-alternate) { // Header - header.navbar-gitlab-new { + .navbar-gitlab { background-color: $color-900; .navbar-collapse { @@ -200,9 +200,9 @@ body { &.ui_light { @include gitlab-theme($theme-gray-900, $theme-gray-700, $theme-gray-800, $theme-gray-700, $theme-gray-700, $theme-gray-100, $theme-gray-700); - header.navbar-gitlab-new { + .navbar-gitlab { background-color: $theme-gray-100; - box-shadow: 0 2px 0 0 $border-color; + box-shadow: 0 1px 0 0 $border-color; .logo-text svg { fill: $theme-gray-900; diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss index d932ea8794f..22945e935ef 100644 --- a/app/assets/stylesheets/framework/header.scss +++ b/app/assets/stylesheets/framework/header.scss @@ -1,112 +1,37 @@ -/* - * Application Header - * - */ +.content-wrapper.page-with-new-nav { + margin-top: $header-height; +} -header { +.navbar-gitlab { @include new-style-dropdown; - transition: padding $sidebar-transition-duration; - - &.navbar-empty { - height: $header-height; - background: $white-light; - border-bottom: 1px solid $white-normal; - - .center-logo { - margin: 8px 0; - text-align: center; - - .tanuki-logo, - img { - height: 36px; - } - } - } - &.navbar-gitlab { padding: 0 16px; z-index: 1000; margin-bottom: 0; min-height: $header-height; - background-color: $gray-light; border: none; border-bottom: 1px solid $border-color; position: fixed; top: 0; left: 0; right: 0; - color: $gl-text-color-secondary; border-radius: 0; - @media (max-width: $screen-xs-min) { - padding: 0 16px; - } - - &.with-horizontal-nav { - border-bottom: 0; + .logo-text { + line-height: initial; - .navbar-border { - height: 1px; - position: absolute; - right: 0; - left: 0; - bottom: -1px; - background-color: $border-color; - opacity: 0; + svg { + width: 55px; + height: 14px; + margin: 0; + fill: $white-light; } } .container-fluid { - width: 100% !important; - filter: none; padding: 0; - .nav > li > a { - color: currentColor; - font-size: 18px; - padding: 0; - margin: (($header-height - 28) / 2) 3px; - margin-left: 8px; - height: 28px; - min-width: 32px; - line-height: 28px; - text-align: center; - - &.header-user-dropdown-toggle { - margin-left: 14px; - - &:hover, - &:focus, - &:active { - .header-user-avatar { - border-color: rgba($avatar-border, .2); - } - } - } - - &:hover, - &:focus, - &:active { - background-color: transparent; - color: $gl-text-color; - - svg { - fill: $gl-text-color; - } - } - - .fa-caret-down { - font-size: 14px; - } - - .fa-chevron-down { - position: relative; - top: -3px; - font-size: 10px; - } - } - .user-counter { svg { margin-right: 3px; @@ -114,81 +39,117 @@ header { } .navbar-toggle { - color: $nav-toggle-gray; - margin: 5px 0; - border-radius: 0; right: -10px; - padding: 6px 10px; + border-radius: 0; + min-width: 45px; + padding: 0; + margin-right: -7px; + font-size: 14px; + text-align: center; + color: currentColor; - &:hover { - background-color: $white-normal; + &:hover, + &:focus, + &.active { + color: currentColor; + background-color: transparent; } - &.active { - color: $gl-text-color-secondary; + .more-icon, + .close-icon { + fill: $white-light; + margin: auto; } } } } - &.navbar-gitlab-new { - .close-icon { + .close-icon { + display: none; + } + + .menu-expanded { + .more-icon { display: none; } - .menu-expanded { - .more-icon { - display: none; - } - - .close-icon { - display: block; - } + .close-icon { + display: block; } } - .global-dropdown { - position: absolute; - left: -10px; + .header-content { + display: -webkit-flex; + display: flex; + justify-content: space-between; + position: relative; + min-height: $header-height; + padding-left: 0; - .badge { - font-size: 11px; + .title-container { + display: -webkit-flex; + display: flex; + -webkit-align-items: stretch; + align-items: stretch; + -webkit-flex: 1 1 auto; + flex: 1 1 auto; + padding-top: 0; + overflow: visible; } - li { - &.active a { - font-weight: $gl-font-weight-bold; + .title { + padding-right: 0; + color: currentColor; + display: -webkit-flex; + display: flex; + position: relative; + margin: 0; + font-size: 18px; + vertical-align: top; + white-space: nowrap; + + img { + height: 28px; + margin-right: 8px; } - } - } - .global-dropdown-toggle { - margin: 7px 0; - font-size: 18px; - padding: 6px 10px; - border: none; - background-color: $gray-light; + &.wrap { + white-space: normal; + } - &:hover { - background-color: $white-normal; - } + &.initializing { + opacity: 0; + } + + a { + display: -webkit-flex; + display: flex; + align-items: center; + padding: 2px 8px; + margin: 5px 2px 5px -8px; + border-radius: $border-radius-default; - &:focus { - outline: none; - background-color: $white-normal; + svg { + @media (min-width: $screen-sm-min) { + margin-right: 8px; + } + } + } + + .project-item-select { + right: auto; + left: 0; + } } - } - .header-content { - display: flex; - justify-content: space-between; - position: relative; - min-height: $header-height; - padding-left: 30px; + .dropdown.open { + > a { + border-bottom-color: $white-light; + } + } &.menu-expanded { @media (max-width: $screen-xs-max) { - .header-logo, .title-container { display: none; } @@ -198,111 +159,180 @@ header { } } } + } - .dropdown-menu { - margin-top: -5px; - } + .dropdown-bold-header { + color: $gl-text-color-secondary; + font-size: 12px; + } - .header-logo { - display: inline-block; - margin: 0 12px 0 2px; - position: relative; - top: 10px; - transition-duration: .3s; + .navbar-collapse { + flex: 0 0 auto; + border-top: none; + padding: 0; - svg, - img { - height: 28px; - } + @media (max-width: $screen-xs-max) { + flex: 1 1 auto; + } - &:hover { - cursor: pointer; + .nav { + > li:not(.hidden-xs) a { + @media (max-width: $screen-xs-max) { + margin-left: 0; + min-width: 100%; + } } } + } - .group-name-toggle { - margin: 3px 5px; - } + .container-fluid { - .group-title { - &.is-hidden { - .hidable:not(:last-of-type) { - display: none; + .navbar-nav { + @media (max-width: $screen-xs-max) { + display: -webkit-flex; + display: flex; + padding-right: 10px; + } + + li { + .badge { + box-shadow: none; + font-weight: $gl-font-weight-bold; } } } - .title-container { - display: flex; - align-items: flex-start; - flex: 1 1 auto; - padding-top: 14px; - overflow: hidden; - } + .nav > li { + &.header-user { + @media (max-width: $screen-xs-max) { + padding-left: 10px; + } + } - .title { - position: relative; - padding-right: 20px; - margin: 0; - font-size: 18px; - line-height: 22px; - display: inline-block; - font-weight: $gl-font-weight-normal; - color: $gl-text-color; - vertical-align: top; - white-space: nowrap; + > a { + will-change: color; + margin: 4px 2px; + padding: 6px 8px; + height: 32px; - &.wrap { - white-space: normal; + @media (max-width: $screen-xs-max) { + padding: 0; + } + + &.header-user-dropdown-toggle { + margin-left: 2px; + + .header-user-avatar { + margin-right: 0; + } + } + + &:hover, + &:focus { + text-decoration: none; + outline: 0; + opacity: 1; + color: $white-light; + + svg { + fill: currentColor; + } + + &.header-user-dropdown-toggle { + .header-user-avatar { + border-color: $white-light; + } + } + } } - &.initializing { - opacity: 0; + .header-new-dropdown-toggle { + margin-right: 0; } - a { - color: currentColor; + .impersonated-user, + .impersonated-user:hover { + margin-right: 1px; + background-color: $white-light; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } - &:hover { - text-decoration: underline; - color: $gl-header-nav-hover-color; + .impersonation-btn, + .impersonation-btn:hover { + background-color: $white-light; + margin-left: 0; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + + i { + color: $orange-500; + font-size: 20px; } } - .dropdown-toggle-caret { - color: $gl-text-color; - border: transparent; - background: transparent; - position: absolute; - top: 2px; - right: 3px; - width: 12px; - line-height: 19px; - padding: 0; - font-size: 10px; - text-align: center; - cursor: pointer; + &.active > a, + &.dropdown.open > a { - &:hover { - color: $gl-header-nav-hover-color; + svg { + fill: currentColor; } } + } + } +} - .project-item-select { - right: auto; - left: 0; +.navbar-sub-nav, +.navbar-nav { + > li { + > a:hover, + > a:focus { + text-decoration: none; + outline: 0; + color: $white-light; + + svg { + fill: currentColor; } } - .navbar-collapse { - flex: 0 0 auto; - border-top: none; - padding: 0; - - @media (max-width: $screen-xs-max) { - flex: 1 1 auto; + > a { + display: -webkit-flex; + display: flex; + align-items: center; + justify-content: center; + padding: 6px 8px; + margin: 4px 2px; + font-size: 12px; + color: currentColor; + border-radius: $border-radius-default; + height: 32px; + font-weight: $gl-font-weight-bold; + + svg { + fill: currentColor; } } + + &.line-separator { + margin: 8px; + } + } +} + +.navbar-sub-nav { + display: -webkit-flex; + display: flex; + margin: 0 0 0 6px; + + .projects-dropdown-menu { + padding: 0; + } + + .dropdown-chevron { + position: relative; + top: -1px; + font-size: 10px; } .project-item-select-holder { @@ -314,8 +344,123 @@ header { } } -.with-performance-bar header.navbar-gitlab { - top: $performance-bar-height; +.caret-down { + height: 11px; + width: 11px; + margin-left: 4px; + fill: currentColor; +} + +.header-user .dropdown-menu-nav, +.header-new .dropdown-menu-nav { + margin-top: $dropdown-vertical-offset; +} + +.breadcrumbs { + display: -webkit-flex; + display: flex; + min-height: 48px; + color: $gl-text-color; +} + +.breadcrumbs-container { + display: -webkit-flex; + display: flex; + width: 100%; + position: relative; + padding-top: $gl-padding / 2; + padding-bottom: $gl-padding / 2; + align-items: center; + border-bottom: 1px solid $border-color; +} + +.breadcrumbs-links { + -webkit-flex: 1; + flex: 1; + min-width: 0; + align-self: center; + color: $gl-text-color-secondary; + + .avatar-tile { + margin-right: 4px; + border: 1px solid $border-color; + border-radius: 50%; + vertical-align: sub; + } + + .text-expander { + margin-left: 0; + margin-right: 2px; + + > i { + position: relative; + top: 1px; + } + } +} + +.breadcrumbs-list { + display: -webkit-flex; + display: flex; + flex-wrap: wrap; + margin-bottom: 0; + line-height: 16px; + + > li { + display: flex; + align-items: center; + position: relative; + padding: 2px 0; + + &:not(:last-child) { + margin-right: 20px; + } + + > a { + font-size: 12px; + color: currentColor; + } + } +} + +.breadcrumb-item-text { + @include str-truncated(128px); + text-decoration: inherit; +} + +.breadcrumbs-list-angle { + position: absolute; + right: -12px; + top: 50%; + color: $gl-text-color-tertiary; + transform: translateY(-50%); +} + +.breadcrumbs-extra { + display: -webkit-flex; + display: flex; + flex: 0 0 auto; + margin-left: auto; +} + +.breadcrumbs-sub-title { + margin: 0; + font-size: 12px; + font-weight: 600; + line-height: 16px; + + a { + color: $gl-text-color; + } +} + +.btn-sign-in { + margin-top: 3px; + font-weight: $gl-font-weight-bold; + + &:hover { + background-color: $white-light; + } } .navbar-nav { @@ -347,11 +492,10 @@ header { } @media (max-width: $screen-xs-max) { - header .container-fluid { + .navbar-gitlab .container-fluid { font-size: 18px; .navbar-nav { - display: table; table-layout: fixed; width: 100%; margin: 0; @@ -359,7 +503,8 @@ header { } .navbar-collapse { - padding-left: 5px; + margin-left: -8px; + margin-right: -10px; .nav > li:not(.hidden-xs) { display: table-cell !important; @@ -385,11 +530,11 @@ header { .dropdown-menu-nav { width: auto; min-width: 140px; - margin-top: -5px; + margin-top: 4px; color: $gl-text-color; left: auto; - .current-user { + li.current-user { padding: 5px 18px; .user-name { @@ -405,3 +550,23 @@ header { border-radius: 50%; border: 1px solid $avatar-border; } + +.with-performance-bar .navbar-gitlab { + top: $performance-bar-height; +} + +.navbar-empty { + height: $header-height; + background: $white-light; + border-bottom: 1px solid $white-normal; + + .center-logo { + margin: 8px 0; + text-align: center; + + .tanuki-logo, + img { + height: 36px; + } + } +} diff --git a/app/assets/stylesheets/framework/images.scss b/app/assets/stylesheets/framework/images.scss index 59bfc5a8d77..6819fd88b7f 100644 --- a/app/assets/stylesheets/framework/images.scss +++ b/app/assets/stylesheets/framework/images.scss @@ -28,6 +28,7 @@ svg { &.s8 { @include svg-size(8px); } + &.s12 { @include svg-size(12px); } &.s16 { @include svg-size(16px); } &.s18 { @include svg-size(18px); } &.s24 { @include svg-size(24px); } diff --git a/app/assets/stylesheets/framework/layout.scss b/app/assets/stylesheets/framework/layout.scss index bd521028c44..69d19ea2962 100644 --- a/app/assets/stylesheets/framework/layout.scss +++ b/app/assets/stylesheets/framework/layout.scss @@ -25,10 +25,6 @@ body { .content-wrapper { padding-bottom: 100px; - - &:not(.page-with-layout-nav) { - margin-top: $header-height; - } } .container { diff --git a/app/assets/stylesheets/framework/new-nav.scss b/app/assets/stylesheets/framework/new-nav.scss index 7899be2c2d3..e69de29bb2d 100644 --- a/app/assets/stylesheets/framework/new-nav.scss +++ b/app/assets/stylesheets/framework/new-nav.scss @@ -1,404 +0,0 @@ -@import "framework/variables"; -@import 'framework/tw_bootstrap_variables'; -@import "bootstrap/variables"; -@import "framework/mixins"; - -.content-wrapper.page-with-new-nav { - margin-top: $new-navbar-height; -} - -header.navbar-gitlab-new { - color: $white-light; - border-bottom: 0; - min-height: $new-navbar-height; - - .logo-text { - line-height: initial; - - svg { - width: 55px; - height: 14px; - margin: 0; - fill: $white-light; - } - } - - .header-content { - display: -webkit-flex; - display: flex; - padding-left: 0; - min-height: $new-navbar-height; - - .title-container { - display: -webkit-flex; - display: flex; - -webkit-align-items: stretch; - align-items: stretch; - -webkit-flex: 1 1 auto; - flex: 1 1 auto; - padding-top: 0; - overflow: visible; - } - - .title { - display: -webkit-flex; - display: flex; - padding-right: 0; - color: currentColor; - - img { - height: 28px; - margin-right: 8px; - } - - a { - display: -webkit-flex; - display: flex; - align-items: center; - padding: 2px 8px; - margin: 5px 2px 5px -8px; - border-radius: $border-radius-default; - - svg { - @media (min-width: $screen-sm-min) { - margin-right: 8px; - } - } - } - } - - .dropdown.open { - > a { - border-bottom-color: $white-light; - } - } - - .dropdown-menu { - margin-top: 4px; - min-width: 130px; - - @media (max-width: $screen-xs-max) { - left: auto; - right: 0; - } - } - - &.menu-expanded { - @media (max-width: $screen-xs-max) { - .title-container, - .header-logo, { - display: none; - } - } - } - } - - .dropdown-bold-header { - color: $gl-text-color-secondary; - font-size: 12px; - } - - .navbar-collapse { - padding-left: 0; - box-shadow: 0; - - @media (max-width: $screen-xs-max) { - margin-left: -8px; - margin-right: -10px; - } - - .nav { - > li:not(.hidden-xs) a { - @media (max-width: $screen-xs-max) { - margin-left: 0; - min-width: 100%; - } - } - } - } - - .container-fluid { - .navbar-toggle { - min-width: 45px; - padding: 0 $gl-padding; - margin-right: -7px; - text-align: center; - color: currentColor; - - svg { - fill: currentColor; - } - - &:hover, - &:focus, - &.active { - color: currentColor; - background-color: transparent; - - svg { - fill: currentColor; - } - } - } - - .navbar-nav { - @media (max-width: $screen-xs-max) { - display: flex; - padding-right: 10px; - } - - li { - .badge { - box-shadow: none; - font-weight: $gl-font-weight-bold; - } - } - } - - .nav > li { - &.header-user { - @media (max-width: $screen-xs-max) { - padding-left: 10px; - } - } - - > a { - will-change: color; - margin: 4px 2px; - padding: 6px 8px; - height: 32px; - - @media (max-width: $screen-xs-max) { - padding: 0; - } - - &.header-user-dropdown-toggle { - margin-left: 2px; - - .header-user-avatar { - margin-right: 0; - } - } - - &:hover, - &:focus { - text-decoration: none; - outline: 0; - opacity: 1; - color: $white-light; - - svg { - fill: currentColor; - } - - &.header-user-dropdown-toggle { - .header-user-avatar { - border-color: $white-light; - } - } - } - } - - .header-new-dropdown-toggle { - margin-right: 0; - } - - .impersonated-user, - .impersonated-user:hover { - margin-right: 1px; - background-color: $white-light; - border-top-right-radius: 0; - border-bottom-right-radius: 0; - } - - .impersonation-btn, - .impersonation-btn:hover { - background-color: $white-light; - margin-left: 0; - border-top-left-radius: 0; - border-bottom-left-radius: 0; - - i { - color: $orange-500; - font-size: 20px; - } - } - - &.active > a, - &.dropdown.open > a { - - svg { - fill: currentColor; - } - } - } - } -} - -.navbar-sub-nav { - display: -webkit-flex; - display: flex; - margin: 0 0 0 6px; - - .dropdown-chevron { - position: relative; - top: -1px; - font-size: 10px; - } -} - -.navbar-gitlab-new { - .navbar-sub-nav, - .navbar-nav { - > li { - > a:hover, - > a:focus { - text-decoration: none; - outline: 0; - color: $white-light; - - svg { - fill: currentColor; - } - } - - > a { - display: flex; - align-items: center; - justify-content: center; - padding: 6px 8px; - margin: 4px 2px; - font-size: 12px; - color: currentColor; - border-radius: $border-radius-default; - height: 32px; - font-weight: $gl-font-weight-bold; - - svg { - fill: currentColor; - } - } - - &.line-separator { - margin: 8px; - } - } - } -} - -.caret-down { - height: 11px; - width: 11px; - margin-left: 4px; - fill: currentColor; -} - -.header-user .dropdown-menu-nav, -.header-new .dropdown-menu-nav { - margin-top: $dropdown-vertical-offset; -} - -.breadcrumbs { - display: flex; - min-height: 48px; - color: $gl-text-color; -} - -.breadcrumbs-container { - display: -webkit-flex; - display: flex; - width: 100%; - position: relative; - padding-top: $gl-padding / 2; - padding-bottom: $gl-padding / 2; - align-items: center; - border-bottom: 1px solid $border-color; -} - -.breadcrumbs-links { - -webkit-flex: 1; - flex: 1; - min-width: 0; - align-self: center; - color: $gl-text-color-secondary; - - .avatar-tile { - margin-right: 4px; - border: 1px solid $border-color; - border-radius: 50%; - vertical-align: sub; - } - - .text-expander { - margin-left: 0; - margin-right: 2px; - - > i { - position: relative; - top: 1px; - } - } -} - -.breadcrumbs-list { - display: -webkit-flex; - display: flex; - flex-wrap: wrap; - margin-bottom: 0; - line-height: 16px; - - > li { - display: flex; - align-items: center; - position: relative; - padding: 2px 0; - - &:not(:last-child) { - margin-right: 20px; - } - - > a { - font-size: 12px; - color: currentColor; - } - } -} - -.breadcrumb-item-text { - @include str-truncated(128px); - text-decoration: inherit; -} - -.breadcrumbs-list-angle { - position: absolute; - right: -12px; - top: 50%; - color: $gl-text-color-tertiary; - transform: translateY(-50%); -} - -.breadcrumbs-extra { - display: flex; - flex: 0 0 auto; - margin-left: auto; -} - -.breadcrumbs-sub-title { - margin: 0; - font-size: 12px; - font-weight: 600; - line-height: 16px; - - a { - color: $gl-text-color; - } -} - -.btn-sign-in { - margin-top: 3px; - font-weight: $gl-font-weight-bold; - - &:hover { - background-color: $white-light; - } -} diff --git a/app/assets/stylesheets/framework/new-sidebar.scss b/app/assets/stylesheets/framework/new-sidebar.scss index 8332cec2962..caf4c7a40b1 100644 --- a/app/assets/stylesheets/framework/new-sidebar.scss +++ b/app/assets/stylesheets/framework/new-sidebar.scss @@ -24,7 +24,7 @@ $new-sidebar-collapsed-width: 50px; // Override position: absolute .right-sidebar { position: fixed; - height: calc(100% - #{$new-navbar-height}); + height: calc(100% - #{$header-height}); } .issues-bulk-update.right-sidebar.right-sidebar-expanded .issuable-sidebar-header { @@ -87,7 +87,7 @@ $new-sidebar-collapsed-width: 50px; z-index: 400; width: $new-sidebar-width; transition: left $sidebar-transition-duration; - top: $new-navbar-height; + top: $header-height; bottom: 0; left: 0; background-color: $gray-normal; @@ -197,7 +197,7 @@ $new-sidebar-collapsed-width: 50px; } .with-performance-bar .nav-sidebar { - top: $new-navbar-height + $performance-bar-height; + top: $header-height + $performance-bar-height; } .sidebar-sub-level-items { @@ -495,7 +495,7 @@ $new-sidebar-collapsed-width: 50px; // Make issue boards full-height now that sub-nav is gone .boards-list { - height: calc(100vh - #{$new-navbar-height}); + height: calc(100vh - #{$header-height}); @media (min-width: $screen-sm-min) { height: 475px; // Needed for PhantomJS @@ -506,5 +506,5 @@ $new-sidebar-collapsed-width: 50px; } .with-performance-bar .boards-list { - height: calc(100vh - #{$new-navbar-height} - #{$performance-bar-height}); + height: calc(100vh - #{$header-height} - #{$performance-bar-height}); } diff --git a/app/assets/stylesheets/framework/nav.scss b/app/assets/stylesheets/framework/secondary-navigation-elements.scss index f8777d1fd9d..5c96b3b78e7 100644 --- a/app/assets/stylesheets/framework/nav.scss +++ b/app/assets/stylesheets/framework/secondary-navigation-elements.scss @@ -1,12 +1,11 @@ - - +// For tabbed navigation links, scrolling tabs, etc. For all top/main navigation, +// please check nav.scss .nav-links { display: flex; padding: 0; margin: 0; list-style: none; height: auto; - border-bottom: 1px solid $border-color; li { display: flex; @@ -24,7 +23,6 @@ &:active, &:focus { text-decoration: none; - border-bottom: 2px solid $gray-darkest; color: $black; .badge { @@ -34,7 +32,6 @@ } &.active a { - border-bottom: 2px solid $link-underline-blue; color: $black; font-weight: $gl-font-weight-bold; @@ -43,35 +40,6 @@ } } } - - &.sub-nav { - text-align: center; - background-color: $gray-normal; - - .container-fluid { - background-color: $gray-normal; - margin-bottom: 0; - display: flex; - } - - li { - &.active a { - border-bottom: none; - color: $link-underline-blue; - } - - a { - margin: 0; - padding: 11px 10px 9px; - - &:hover, - &:active, - &:focus { - border-color: transparent; - } - } - } - } } .top-area { @@ -91,17 +59,6 @@ } } - .nav-search { - display: inline-block; - width: 100%; - padding: 11px 0; - - /* Small devices (phones, tablets, 768px and lower) */ - @media (min-width: $screen-sm-min) { - width: 50%; - } - } - .nav-links { margin-bottom: 0; border-bottom: none; @@ -150,12 +107,6 @@ } } - &.nav-controls-new-nav { - > .dropdown { - margin-right: 0; - } - } - > .btn-grouped { float: none; } @@ -248,114 +199,43 @@ pre { width: 100%; } -} - -.project-item-select-holder.btn-group { - display: flex; - max-width: 350px; - overflow: hidden; - float: right; - - .new-project-item-link { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - - .new-project-item-select-button { - width: 32px; - } -} - -.empty-state .project-item-select-holder.btn-group { - float: none; - display: inline-block; - - .btn { - // overrides styles applied to plain `.empty-state .btn` - margin: 10px 0; - max-width: 300px; - width: auto; - - @media(max-width: $screen-xs-max) { - max-width: 250px; - } - - } -} -.new-project-item-select-button .fa-caret-down { - margin-left: 2px; -} - -.layout-nav { - width: 100%; - background: $gray-light; - border-bottom: 1px solid $border-color; - transition: padding $sidebar-transition-duration; - text-align: center; - margin-top: $new-navbar-height; + @media (max-width: $screen-xs-max) { + flex-flow: row wrap; - .container-fluid { - position: relative; + .nav-controls { + $controls-margin: $btn-xs-side-margin - 2px; + flex: 0 0 100%; - .nav-control { - @media (max-width: $screen-sm-max) { - margin-right: 2px; + &.controls-flex { + display: flex; + flex-flow: row wrap; + align-items: center; + justify-content: center; + padding: 0 0 $gl-padding-top; } - } - } - - .controls { - float: right; - padding: 7px 0 0; - - i { - color: $layout-link-gray; - } - - .fa-rss, - .fa-cog { - font-size: 16px; - } - .fa-caret-down { - margin-left: 5px; - color: $gl-text-color-secondary; - } - - .dropdown { - position: absolute; - top: 7px; - right: 15px; - z-index: 300; + .controls-item, + .controls-item-full, + .controls-item:last-child { + flex: 1 1 35%; + display: block; + width: 100%; + margin: $controls-margin; - li.active { - font-weight: $gl-font-weight-bold; + .btn, + .dropdown { + margin: 0; + } } - } - } - .nav-links { - border-bottom: none; - height: 51px; - - @media (min-width: $screen-sm-min) { - justify-content: center; - } - - li { - a { - padding-top: 10px; + .controls-item-full { + flex: 1 1 100%; } } } } -.with-performance-bar .layout-nav { - margin-top: $header-height + $performance-bar-height; -} - .scrolling-tabs-container { position: relative; @@ -385,25 +265,41 @@ left: -7px; } } +} - &.sub-nav-scroll { +.inner-page-scroll-tabs { + position: relative; - .fade-right { - @include fade(left, $gray-normal); - right: 0; + .fade-right { + @include fade(left, $white-light); + right: 0; + text-align: right; - .fa { - right: -23px; - } + .fa { + right: 5px; } + } - .fade-left { - @include fade(right, $gray-normal); - left: 0; + .fade-left { + @include fade(right, $white-light); + left: 0; + text-align: left; - .fa { - left: 10px; - } + .fa { + left: 5px; + } + } + + .fade-right, + .fade-left { + top: 16px; + bottom: auto; + } + + &.is-smaller { + .fade-right, + .fade-left { + top: 11px; } } } @@ -432,41 +328,7 @@ } } } -} - -.page-with-layout-nav { - .right-sidebar { - top: ($header-height + 1) * 2; - } - - &.page-with-sub-nav { - .right-sidebar { - top: ($header-height + 1) * 3; - - &.affix { - top: $header-height; - } - } - } -} - -.with-performance-bar .page-with-layout-nav { - .right-sidebar { - top: ($header-height + 1) * 2 + $performance-bar-height; - } - - &.page-with-sub-nav { - .right-sidebar { - top: ($header-height + 1) * 3 + $performance-bar-height; - - &.affix { - top: $header-height + $performance-bar-height; - } - } - } -} -.nav-block { &.activities { border-bottom: 1px solid $border-color; @@ -476,76 +338,39 @@ } } -@media (max-width: $screen-xs-max) { - .top-area { - flex-flow: row wrap; - - .nav-controls { - $controls-margin: $btn-xs-side-margin - 2px; - flex: 0 0 100%; - - &.controls-flex { - display: flex; - flex-flow: row wrap; - align-items: center; - justify-content: center; - padding: 0 0 $gl-padding-top; - } - - .controls-item, - .controls-item-full, - .controls-item:last-child { - flex: 1 1 35%; - display: block; - width: 100%; - margin: $controls-margin; +.project-item-select-holder.btn-group { + display: flex; + max-width: 350px; + overflow: hidden; + float: right; - .btn, - .dropdown { - margin: 0; - } - } + .new-project-item-link { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } - .controls-item-full { - flex: 1 1 100%; - } - } + .new-project-item-select-button { + width: 32px; } } -.inner-page-scroll-tabs { - position: relative; - - .fade-right { - @include fade(left, $white-light); - right: 0; - text-align: right; - - .fa { - right: 5px; - } - } +.empty-state .project-item-select-holder.btn-group { + float: none; + display: inline-block; - .fade-left { - @include fade(right, $white-light); - left: 0; - text-align: left; + .btn { + // overrides styles applied to plain `.empty-state .btn` + margin: 10px 0; + max-width: 300px; + width: auto; - .fa { - left: 5px; + @media(max-width: $screen-xs-max) { + max-width: 250px; } } +} - .fade-right, - .fade-left { - top: 16px; - bottom: auto; - } - - &.is-smaller { - .fade-right, - .fade-left { - top: 11px; - } - } +.new-project-item-select-button .fa-caret-down { + margin-left: 2px; } diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss index 48dc25d343b..ef58382ba41 100644 --- a/app/assets/stylesheets/framework/sidebar.scss +++ b/app/assets/stylesheets/framework/sidebar.scss @@ -78,16 +78,16 @@ .right-sidebar { border-left: 1px solid $border-color; - height: calc(100% - #{$new-navbar-height}); + height: calc(100% - #{$header-height}); &.affix { position: fixed; - top: $new-navbar-height; + top: $header-height; } } .with-performance-bar .right-sidebar.affix { - top: $new-navbar-height + $performance-bar-height; + top: $header-height + $performance-bar-height; } @mixin maintain-sidebar-dimensions { diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss index 5f604680181..bbbd16322eb 100644 --- a/app/assets/stylesheets/framework/variables.scss +++ b/app/assets/stylesheets/framework/variables.scss @@ -225,8 +225,7 @@ $gl-sidebar-padding: 22px; $row-hover: $blue-50; $row-hover-border: $blue-200; $progress-color: #c0392b; -$header-height: 50px; -$new-navbar-height: 40px; +$header-height: 40px; $fixed-layout-width: 1280px; $limited-layout-width: 990px; $limited-layout-width-sm: 790px; diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss index 3305a482a0d..ca61f7a30c3 100644 --- a/app/assets/stylesheets/pages/boards.scss +++ b/app/assets/stylesheets/pages/boards.scss @@ -414,7 +414,6 @@ margin: 5px; } -.page-with-layout-nav.page-with-sub-nav .issue-boards-sidebar, .page-with-new-sidebar.page-with-sidebar .issue-boards-sidebar { .issuable-sidebar-header { position: relative; diff --git a/app/assets/stylesheets/pages/builds.scss b/app/assets/stylesheets/pages/builds.scss index 359dd388d05..50ec5110bf1 100644 --- a/app/assets/stylesheets/pages/builds.scss +++ b/app/assets/stylesheets/pages/builds.scss @@ -64,10 +64,10 @@ color: $gl-text-color; position: sticky; position: -webkit-sticky; - top: $new-navbar-height; + top: $header-height; &.affix { - top: $new-navbar-height; + top: $header-height; } // with sidebar @@ -174,10 +174,10 @@ .with-performance-bar .build-page { .top-bar { - top: $new-navbar-height + $performance-bar-height; + top: $header-height + $performance-bar-height; &.affix { - top: $new-navbar-height + $performance-bar-height; + top: $header-height + $performance-bar-height; } } } diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss index db3b7e89d7b..dae3ec7ac42 100644 --- a/app/assets/stylesheets/pages/issuable.scss +++ b/app/assets/stylesheets/pages/issuable.scss @@ -222,7 +222,7 @@ .right-sidebar { position: absolute; - top: $new-navbar-height; + top: $header-height; bottom: 0; right: 0; transition: width $right-sidebar-transition-duration; @@ -487,10 +487,10 @@ } .with-performance-bar .right-sidebar { - top: $new-navbar-height + $performance-bar-height; + top: $header-height + $performance-bar-height; .issuable-sidebar { - height: calc(100% - #{$new-navbar-height} - #{$performance-bar-height}); + height: calc(100% - #{$header-height} - #{$performance-bar-height}); } } diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss index 09a14578dd3..d9fb3b44d29 100644 --- a/app/assets/stylesheets/pages/merge_requests.scss +++ b/app/assets/stylesheets/pages/merge_requests.scss @@ -649,7 +649,7 @@ } .merge-request-tabs-holder { - top: $new-navbar-height; + top: $header-height; z-index: 200; background-color: $white-light; border-bottom: 1px solid $border-color; @@ -679,7 +679,7 @@ } .with-performance-bar .merge-request-tabs-holder { - top: $new-navbar-height + $performance-bar-height; + top: $header-height + $performance-bar-height; } .merge-request-tabs { diff --git a/app/assets/stylesheets/pages/search.scss b/app/assets/stylesheets/pages/search.scss index 89ebe3f9917..db0a04a5eb3 100644 --- a/app/assets/stylesheets/pages/search.scss +++ b/app/assets/stylesheets/pages/search.scss @@ -47,6 +47,7 @@ input[type="checkbox"]:hover { } .location-badge { + height: 32px; font-size: 12px; margin: -4px 4px -4px -4px; line-height: 25px; diff --git a/app/views/layouts/header/_default.html.haml b/app/views/layouts/header/_default.html.haml index 7e9b76da570..5ff6ac5fc00 100644 --- a/app/views/layouts/header/_default.html.haml +++ b/app/views/layouts/header/_default.html.haml @@ -1,4 +1,4 @@ -%header.navbar.navbar-gitlab.navbar-gitlab-new +%header.navbar.navbar-gitlab %a.sr-only.gl-accessibility{ href: "#content-body", tabindex: "1" } Skip to content .container-fluid .header-content @@ -73,7 +73,7 @@ %button.navbar-toggle.hidden-sm.hidden-md.hidden-lg{ type: 'button' } %span.sr-only Toggle navigation - = sprite_icon('more', size: 16, css_class: 'more-icon js-navbar-toggle-right') - = sprite_icon('close', size: 16, css_class: 'close-icon js-navbar-toggle-left') + = sprite_icon('more', size: 12, css_class: 'more-icon js-navbar-toggle-right') + = sprite_icon('close', size: 12, css_class: 'close-icon js-navbar-toggle-left') = render 'shared/outdated_browser' diff --git a/app/views/users/show.html.haml b/app/views/users/show.html.haml index d0ffcc88d43..6c3cd6ecefe 100644 --- a/app/views/users/show.html.haml +++ b/app/views/users/show.html.haml @@ -9,7 +9,7 @@ = auto_discovery_link_tag(:atom, user_url(@user, format: :atom), title: "#{@user.name} activity") .user-profile - .cover-block.user-cover-block.layout-nav + .cover-block.user-cover-block.top-area .cover-controls - if @user == current_user = link_to profile_path, class: 'btn btn-gray has-tooltip', title: 'Edit profile', 'aria-label': 'Edit profile' do diff --git a/spec/features/explore/new_menu_spec.rb b/spec/features/explore/new_menu_spec.rb index e1c74a24890..c5ec495a418 100644 --- a/spec/features/explore/new_menu_spec.rb +++ b/spec/features/explore/new_menu_spec.rb @@ -128,12 +128,6 @@ feature 'Top Plus Menu', :js do expect(find('.header-new.dropdown')).not_to have_selector('.header-new-project-snippet') end - scenario 'public project has no New Issue Button' do - visit project_path(public_project) - - hasnot_topmenuitem("New issue") - end - scenario 'public project has no New merge request menu item' do visit project_path(public_project) |