diff options
-rw-r--r-- | app/assets/images/new_nav.png | bin | 14322 -> 0 bytes | |||
-rw-r--r-- | app/assets/images/old_nav.png | bin | 25617 -> 0 bytes | |||
-rw-r--r-- | app/assets/stylesheets/framework.scss | 1 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/blocks.scss | 4 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/layout.scss | 4 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/nav.scss | 515 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/new-nav.scss | 5 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/secondary-navigation-elements.scss | 337 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/boards.scss | 1 | ||||
-rw-r--r-- | app/views/users/show.html.haml | 2 |
10 files changed, 343 insertions, 526 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/stylesheets/framework.scss b/app/assets/stylesheets/framework.scss index e8037c77aab..09a29d41823 100644 --- a/app/assets/stylesheets/framework.scss +++ b/app/assets/stylesheets/framework.scss @@ -34,6 +34,7 @@ @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/blocks.scss b/app/assets/stylesheets/framework/blocks.scss index 1d72a70f0f5..d63145771c9 100644 --- a/app/assets/stylesheets/framework/blocks.scss +++ b/app/assets/stylesheets/framework/blocks.scss @@ -207,6 +207,10 @@ &.user-cover-block { padding: 24px 0 0; + + .nav-links { + justify-content: center; + } } .group-info { 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/nav.scss b/app/assets/stylesheets/framework/nav.scss index f8777d1fd9d..ca206ce818f 100644 --- a/app/assets/stylesheets/framework/nav.scss +++ b/app/assets/stylesheets/framework/nav.scss @@ -1,255 +1,3 @@ - - -.nav-links { - display: flex; - padding: 0; - margin: 0; - list-style: none; - height: auto; - border-bottom: 1px solid $border-color; - - li { - display: flex; - - a { - padding: $gl-btn-padding; - padding-bottom: 11px; - font-size: 14px; - line-height: 28px; - color: $gl-text-color-secondary; - border-bottom: 2px solid transparent; - white-space: nowrap; - - &:hover, - &:active, - &:focus { - text-decoration: none; - border-bottom: 2px solid $gray-darkest; - color: $black; - - .badge { - color: $black; - } - } - } - - &.active a { - border-bottom: 2px solid $link-underline-blue; - color: $black; - font-weight: $gl-font-weight-bold; - - .badge { - color: $black; - } - } - } - - &.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 { - @include clearfix; - border-bottom: 1px solid $border-color; - - .nav-text { - padding-top: 16px; - padding-bottom: 11px; - display: inline-block; - line-height: 28px; - white-space: normal; - - /* Small devices (phones, tablets, 768px and lower) */ - @media (max-width: $screen-xs-max) { - width: 100%; - } - } - - .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; - float: left; - - &.wide { - width: 100%; - display: block; - } - - &.scrolling-tabs { - float: left; - } - - li a { - padding: 16px 15px 11px; - } - - /* Small devices (phones, tablets, 768px and lower) */ - @media (max-width: $screen-xs-max) { - width: 100%; - } - } - - .nav-controls { - @include new-style-dropdown; - - display: inline-block; - float: right; - text-align: right; - padding: 11px 0; - margin-bottom: 0; - - > .btn, - > .btn-container, - > .dropdown, - > input, - > form { - margin-right: $gl-padding-top; - display: inline-block; - vertical-align: top; - - &:last-child { - margin-right: 0; - float: right; - } - } - - &.nav-controls-new-nav { - > .dropdown { - margin-right: 0; - } - } - - > .btn-grouped { - float: none; - } - - .icon-label { - display: none; - } - - input { - display: inline-block; - position: relative; - - /* Medium devices (desktops, 992px and up) */ - @media (min-width: $screen-md-min) { width: 200px; } - - /* Large devices (large desktops, 1200px and up) */ - @media (min-width: $screen-lg-min) { width: 250px; } - - &.input-short { - /* Medium devices (desktops, 992px and up) */ - @media (min-width: $screen-md-min) { width: 170px; } - - /* Large devices (large desktops, 1200px and up) */ - @media (min-width: $screen-lg-min) { width: 210px; } - } - } - - @media (max-width: $screen-xs-max) { - padding-bottom: 0; - width: 100%; - - .btn, - form, - .dropdown, - .dropdown-toggle, - .dropdown-menu-toggle, - .form-control { - margin: 0 0 10px; - display: block; - width: 100%; - } - - form { - display: block; - height: auto; - margin-bottom: 14px; - - input { - width: 100%; - margin: 0 0 10px; - } - } - - .input-short { - width: 100%; - } - - .icon-label { - display: inline-block; - } - - // Applies on /dashboard/issues - .project-item-select-holder { - margin: 0; - } - } - } - - &.adjust { - .nav-text, - .nav-controls { - width: auto; - - @media (max-width: $screen-xs-max) { - width: 100%; - } - } - } - - &.multi-line { - .nav-text { - line-height: 20px; - } - - .nav-controls { - padding: 17px 0; - } - } - - pre { - width: 100%; - } -} - .project-item-select-holder.btn-group { display: flex; max-width: 350px; @@ -280,272 +28,9 @@ @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; - - .container-fluid { - position: relative; - - .nav-control { - @media (max-width: $screen-sm-max) { - margin-right: 2px; - } - } - } - - .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; - - li.active { - font-weight: $gl-font-weight-bold; - } - } - } - - .nav-links { - border-bottom: none; - height: 51px; - - @media (min-width: $screen-sm-min) { - justify-content: center; - } - - li { - a { - padding-top: 10px; - } - } - } -} - -.with-performance-bar .layout-nav { - margin-top: $header-height + $performance-bar-height; -} - -.scrolling-tabs-container { - position: relative; - - .merge-request-tabs-container & { - overflow: hidden; - } - - .nav-links { - @include scrolling-links(); - } - - .fade-right { - @include fade(left, $gray-light); - right: -5px; - - .fa { - right: -7px; - } - } - - .fade-left { - @include fade(right, $gray-light); - left: -5px; - text-align: center; - - .fa { - left: -7px; - } - } - - &.sub-nav-scroll { - - .fade-right { - @include fade(left, $gray-normal); - right: 0; - - .fa { - right: -23px; - } - } - - .fade-left { - @include fade(right, $gray-normal); - left: 0; - - .fa { - left: 10px; - } - } - } -} - -.nav-block { - position: relative; - - .nav-links { - @include scrolling-links(); - - .fade-right { - @include fade(left, $white-light); - right: -5px; - - .fa { - right: -7px; - } - } - - .fade-left { - @include fade(right, $white-light); - left: -5px; - - .fa { - left: -7px; - } - } - } -} - -.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; - - .nav-links { - border-bottom: none; - } - } -} - -@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; - - .btn, - .dropdown { - margin: 0; - } - } - - .controls-item-full { - flex: 1 1 100%; - } - } - } -} - -.inner-page-scroll-tabs { - position: relative; - - .fade-right { - @include fade(left, $white-light); - right: 0; - text-align: right; - - .fa { - right: 5px; - } - } - - .fade-left { - @include fade(right, $white-light); - left: 0; - text-align: left; - - .fa { - left: 5px; - } - } - - .fade-right, - .fade-left { - top: 16px; - bottom: auto; - } - - &.is-smaller { - .fade-right, - .fade-left { - top: 11px; - } - } -} diff --git a/app/assets/stylesheets/framework/new-nav.scss b/app/assets/stylesheets/framework/new-nav.scss index 7899be2c2d3..3663ebf3039 100644 --- a/app/assets/stylesheets/framework/new-nav.scss +++ b/app/assets/stylesheets/framework/new-nav.scss @@ -1,8 +1,3 @@ -@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; } diff --git a/app/assets/stylesheets/framework/secondary-navigation-elements.scss b/app/assets/stylesheets/framework/secondary-navigation-elements.scss new file mode 100644 index 00000000000..1b9a26512b4 --- /dev/null +++ b/app/assets/stylesheets/framework/secondary-navigation-elements.scss @@ -0,0 +1,337 @@ +// 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; + + li { + display: flex; + + a { + font-size: 14px; + line-height: 28px; + color: $gl-text-color-secondary; + border-bottom: 2px solid transparent; + white-space: nowrap; + + &:hover, + &:active, + &:focus { + text-decoration: none; + color: $black; + + .badge { + color: $black; + } + } + } + + &.active a { + color: $black; + font-weight: $gl-font-weight-bold; + + .badge { + color: $black; + } + } + } +} + +.top-area { + @include clearfix; + border-bottom: 1px solid $border-color; + + .nav-text { + padding-top: 16px; + padding-bottom: 11px; + display: inline-block; + line-height: 28px; + white-space: normal; + + /* Small devices (phones, tablets, 768px and lower) */ + @media (max-width: $screen-xs-max) { + width: 100%; + } + } + + .nav-links { + margin-bottom: 0; + border-bottom: none; + float: left; + + &.wide { + width: 100%; + display: block; + } + + &.scrolling-tabs { + float: left; + } + + li a { + padding: 16px 15px 11px; + } + + /* Small devices (phones, tablets, 768px and lower) */ + @media (max-width: $screen-xs-max) { + width: 100%; + } + } + + .nav-controls { + @include new-style-dropdown; + + display: inline-block; + float: right; + text-align: right; + padding: 11px 0; + margin-bottom: 0; + + > .btn, + > .btn-container, + > .dropdown, + > input, + > form { + margin-right: $gl-padding-top; + display: inline-block; + vertical-align: top; + + &:last-child { + margin-right: 0; + float: right; + } + } + + > .btn-grouped { + float: none; + } + + .icon-label { + display: none; + } + + input { + display: inline-block; + position: relative; + + /* Medium devices (desktops, 992px and up) */ + @media (min-width: $screen-md-min) { width: 200px; } + + /* Large devices (large desktops, 1200px and up) */ + @media (min-width: $screen-lg-min) { width: 250px; } + + &.input-short { + /* Medium devices (desktops, 992px and up) */ + @media (min-width: $screen-md-min) { width: 170px; } + + /* Large devices (large desktops, 1200px and up) */ + @media (min-width: $screen-lg-min) { width: 210px; } + } + } + + @media (max-width: $screen-xs-max) { + padding-bottom: 0; + width: 100%; + + .btn, + form, + .dropdown, + .dropdown-toggle, + .dropdown-menu-toggle, + .form-control { + margin: 0 0 10px; + display: block; + width: 100%; + } + + form { + display: block; + height: auto; + margin-bottom: 14px; + + input { + width: 100%; + margin: 0 0 10px; + } + } + + .input-short { + width: 100%; + } + + .icon-label { + display: inline-block; + } + + // Applies on /dashboard/issues + .project-item-select-holder { + margin: 0; + } + } + } + + &.adjust { + .nav-text, + .nav-controls { + width: auto; + + @media (max-width: $screen-xs-max) { + width: 100%; + } + } + } + + &.multi-line { + .nav-text { + line-height: 20px; + } + + .nav-controls { + padding: 17px 0; + } + } + + pre { + width: 100%; + } + + @media (max-width: $screen-xs-max) { + 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; + + .btn, + .dropdown { + margin: 0; + } + } + + .controls-item-full { + flex: 1 1 100%; + } + } + } +} + +.scrolling-tabs-container { + position: relative; + + .merge-request-tabs-container & { + overflow: hidden; + } + + .nav-links { + @include scrolling-links(); + } + + .fade-right { + @include fade(left, $gray-light); + right: -5px; + + .fa { + right: -7px; + } + } + + .fade-left { + @include fade(right, $gray-light); + left: -5px; + text-align: center; + + .fa { + left: -7px; + } + } +} + +.inner-page-scroll-tabs { + position: relative; + + .fade-right { + @include fade(left, $white-light); + right: 0; + text-align: right; + + .fa { + right: 5px; + } + } + + .fade-left { + @include fade(right, $white-light); + left: 0; + text-align: left; + + .fa { + left: 5px; + } + } + + .fade-right, + .fade-left { + top: 16px; + bottom: auto; + } + + &.is-smaller { + .fade-right, + .fade-left { + top: 11px; + } + } +} + +.nav-block { + position: relative; + + .nav-links { + @include scrolling-links(); + + .fade-right { + @include fade(left, $white-light); + right: -5px; + + .fa { + right: -7px; + } + } + + .fade-left { + @include fade(right, $white-light); + left: -5px; + + .fa { + left: -7px; + } + } + } + + &.activities { + border-bottom: 1px solid $border-color; + + .nav-links { + border-bottom: none; + } + } +} 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/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 |