diff options
Diffstat (limited to 'app')
| -rw-r--r-- | app/assets/javascripts/layout_nav.js | 10 | ||||
| -rw-r--r-- | app/assets/javascripts/merge_request_tabs.js | 3 | ||||
| -rw-r--r-- | app/assets/stylesheets/framework/header.scss | 16 | ||||
| -rw-r--r-- | app/assets/stylesheets/framework/layout.scss | 4 | ||||
| -rw-r--r-- | app/assets/stylesheets/framework/nav.scss | 3 | ||||
| -rw-r--r-- | app/assets/stylesheets/framework/sidebar.scss | 2 | ||||
| -rw-r--r-- | app/assets/stylesheets/pages/merge_requests.scss | 2 | ||||
| -rw-r--r-- | app/views/layouts/header/_default.html.haml | 1 | ||||
| -rw-r--r-- | app/views/projects/builds/_sidebar.html.haml | 2 | ||||
| -rw-r--r-- | app/views/projects/wikis/_sidebar.html.haml | 2 | ||||
| -rw-r--r-- | app/views/shared/issuable/_sidebar.html.haml | 2 | ||||
| -rw-r--r-- | app/views/shared/milestones/_sidebar.html.haml | 2 |
12 files changed, 40 insertions, 9 deletions
diff --git a/app/assets/javascripts/layout_nav.js b/app/assets/javascripts/layout_nav.js index a5f99bcdd8f..71064ccc539 100644 --- a/app/assets/javascripts/layout_nav.js +++ b/app/assets/javascripts/layout_nav.js @@ -1,4 +1,5 @@ /* eslint-disable func-names, space-before-function-paren, no-var, prefer-arrow-callback, no-unused-vars, one-var, one-var-declaration-per-line, vars-on-top, max-len */ +import _ from 'underscore'; (function() { var hideEndFade; @@ -45,4 +46,13 @@ } }); }); + + function applyScrollNavClass() { + const scrollOpacityHeight = 40; + $('.navbar-border').css('opacity', Math.min($(window).scrollTop() / scrollOpacityHeight, 1)); + } + + $(() => { + $(window).on('scroll', _.throttle(applyScrollNavClass, 100)); + }); }).call(window); diff --git a/app/assets/javascripts/merge_request_tabs.js b/app/assets/javascripts/merge_request_tabs.js index a3dff25c93b..ebb217ab13a 100644 --- a/app/assets/javascripts/merge_request_tabs.js +++ b/app/assets/javascripts/merge_request_tabs.js @@ -353,6 +353,7 @@ import BlobForkSuggestion from './blob/blob_fork_suggestion'; initAffix() { const $tabs = $('.js-tabs-affix'); + const $fixedNav = $('.navbar-gitlab'); // Screen space on small screens is usually very sparse // So we dont affix the tabs on these @@ -371,7 +372,7 @@ import BlobForkSuggestion from './blob/blob_fork_suggestion'; .affix({ offset: { top: () => ( - $diffTabs.offset().top - $tabs.height() + $diffTabs.offset().top - $tabs.height() - $fixedNav.height() ), }, }) diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss index 6d9218310eb..586511fe8d4 100644 --- a/app/assets/stylesheets/framework/header.scss +++ b/app/assets/stylesheets/framework/header.scss @@ -30,13 +30,17 @@ header { background-color: $gray-light; border: none; border-bottom: 1px solid $border-color; + position: fixed; + top: 0; + left: 0; + right: 0; @media (max-width: $screen-xs-min) { padding: 0 16px; } &.with-horizontal-nav { - border-bottom: none; + border-color: transparent; } .container-fluid { @@ -110,6 +114,16 @@ header { } } + .navbar-border { + height: 1px; + position: absolute; + right: 0; + left: 0; + bottom: 0; + background-color: $border-color; + opacity: 0; + } + .global-dropdown { position: absolute; left: -10px; diff --git a/app/assets/stylesheets/framework/layout.scss b/app/assets/stylesheets/framework/layout.scss index 20c7bc93c28..9e8acf4e73c 100644 --- a/app/assets/stylesheets/framework/layout.scss +++ b/app/assets/stylesheets/framework/layout.scss @@ -25,6 +25,10 @@ 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 b6cf5101d60..64e6ab391b6 100644 --- a/app/assets/stylesheets/framework/nav.scss +++ b/app/assets/stylesheets/framework/nav.scss @@ -291,6 +291,7 @@ border-bottom: 1px solid $border-color; transition: padding $sidebar-transition-duration; text-align: center; + margin-top: $header-height; .container-fluid { position: relative; @@ -428,7 +429,7 @@ top: ($header-height + 1) * 3; &.affix { - top: 0; + top: $header-height; } } } diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss index 746c9c25620..2b5ab539955 100644 --- a/app/assets/stylesheets/framework/sidebar.scss +++ b/app/assets/stylesheets/framework/sidebar.scss @@ -80,6 +80,6 @@ &.affix { position: fixed; - top: 0; + top: $header-height; } } diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss index 8f5db1b3b9c..0173a05b403 100644 --- a/app/assets/stylesheets/pages/merge_requests.scss +++ b/app/assets/stylesheets/pages/merge_requests.scss @@ -689,7 +689,7 @@ } .merge-request-tabs-holder { - top: 0; + top: $header-height; z-index: 10; background-color: $white-light; diff --git a/app/views/layouts/header/_default.html.haml b/app/views/layouts/header/_default.html.haml index 659d548df18..9db98451f1d 100644 --- a/app/views/layouts/header/_default.html.haml +++ b/app/views/layouts/header/_default.html.haml @@ -1,4 +1,5 @@ %header.navbar.navbar-gitlab{ class: nav_header_class } + .navbar-border %a.sr-only.gl-accessibility{ href: "#content-body", tabindex: "1" } Skip to content .container-fluid .header-content diff --git a/app/views/projects/builds/_sidebar.html.haml b/app/views/projects/builds/_sidebar.html.haml index 43191fae9e6..8a5c8e2429c 100644 --- a/app/views/projects/builds/_sidebar.html.haml +++ b/app/views/projects/builds/_sidebar.html.haml @@ -1,6 +1,6 @@ - builds = @build.pipeline.builds.to_a -%aside.right-sidebar.right-sidebar-expanded.build-sidebar.js-build-sidebar.js-right-sidebar{ data: { "offset-top" => "153", "spy" => "affix" } } +%aside.right-sidebar.right-sidebar-expanded.build-sidebar.js-build-sidebar.js-right-sidebar{ data: { "offset-top" => "101", "spy" => "affix" } } .block.build-sidebar-header.visible-xs-block.visible-sm-block.append-bottom-default Job %strong ##{@build.id} diff --git a/app/views/projects/wikis/_sidebar.html.haml b/app/views/projects/wikis/_sidebar.html.haml index 713b758727e..c2f9e65015d 100644 --- a/app/views/projects/wikis/_sidebar.html.haml +++ b/app/views/projects/wikis/_sidebar.html.haml @@ -1,4 +1,4 @@ -%aside.right-sidebar.right-sidebar-expanded.wiki-sidebar.js-wiki-sidebar.js-right-sidebar{ data: { "offset-top" => "102", "spy" => "affix" } } +%aside.right-sidebar.right-sidebar-expanded.wiki-sidebar.js-wiki-sidebar.js-right-sidebar{ data: { "offset-top" => "50", "spy" => "affix" } } .block.wiki-sidebar-header.append-bottom-default %a.gutter-toggle.pull-right.visible-xs-block.visible-sm-block.js-sidebar-wiki-toggle{ href: "#" } = icon('angle-double-right') diff --git a/app/views/shared/issuable/_sidebar.html.haml b/app/views/shared/issuable/_sidebar.html.haml index 305d1c36a73..ac84fffe831 100644 --- a/app/views/shared/issuable/_sidebar.html.haml +++ b/app/views/shared/issuable/_sidebar.html.haml @@ -3,7 +3,7 @@ = page_specific_javascript_bundle_tag('common_vue') = page_specific_javascript_bundle_tag('sidebar') -%aside.right-sidebar.js-right-sidebar{ data: { "offset-top" => "102", "spy" => "affix" }, class: sidebar_gutter_collapsed_class, 'aria-live' => 'polite' } +%aside.right-sidebar.js-right-sidebar{ data: { "offset-top" => "50", "spy" => "affix" }, class: sidebar_gutter_collapsed_class, 'aria-live' => 'polite' } .issuable-sidebar{ data: { endpoint: "#{issuable_json_path(issuable)}" } } - can_edit_issuable = can?(current_user, :"admin_#{issuable.to_ability_name}", @project) .block.issuable-sidebar-header diff --git a/app/views/shared/milestones/_sidebar.html.haml b/app/views/shared/milestones/_sidebar.html.haml index 5e8a2a0f5d8..9bb87640319 100644 --- a/app/views/shared/milestones/_sidebar.html.haml +++ b/app/views/shared/milestones/_sidebar.html.haml @@ -1,4 +1,4 @@ -- affix_offset = local_assigns.fetch(:affix_offset, "102") +- affix_offset = local_assigns.fetch(:affix_offset, "50") - project = local_assigns[:project] %aside.right-sidebar.js-right-sidebar{ data: { "offset-top" => affix_offset, "spy" => "affix" }, class: sidebar_gutter_collapsed_class, 'aria-live' => 'polite' } |