From 52accce3854df8f6258c1699aacff8d460c8048d Mon Sep 17 00:00:00 2001 From: Annabel Dunstone Gray Date: Mon, 17 Apr 2017 15:54:26 -0500 Subject: Add fixed positioning to top level navbar --- app/assets/javascripts/merge_request_tabs.js | 3 ++- app/assets/stylesheets/framework/header.scss | 3 +++ app/assets/stylesheets/framework/layout.scss | 4 ++++ app/assets/stylesheets/framework/nav.scss | 3 ++- app/assets/stylesheets/framework/sidebar.scss | 2 +- app/views/projects/builds/_sidebar.html.haml | 2 +- app/views/projects/wikis/_sidebar.html.haml | 2 +- app/views/shared/issuable/_sidebar.html.haml | 3 +-- app/views/shared/milestones/_sidebar.html.haml | 2 +- 9 files changed, 16 insertions(+), 8 deletions(-) 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..f70f8c51bd4 100644 --- a/app/assets/stylesheets/framework/header.scss +++ b/app/assets/stylesheets/framework/header.scss @@ -30,6 +30,9 @@ header { background-color: $gray-light; border: none; border-bottom: 1px solid $border-color; + position: fixed; + top: 0; + width: 100%; @media (max-width: $screen-xs-min) { padding: 0 16px; 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..74a9c2ccc4c 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/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..38d90086700 100644 --- a/app/views/shared/issuable/_sidebar.html.haml +++ b/app/views/shared/issuable/_sidebar.html.haml @@ -3,8 +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' } - .issuable-sidebar{ data: { endpoint: "#{issuable_json_path(issuable)}" } } +%aside.right-sidebar.js-right-sidebar{ data: { "offset-top" => "50", "spy" => "affix" }, class: sidebar_gutter_collapsed_class, 'aria-live' => 'polite' } - can_edit_issuable = can?(current_user, :"admin_#{issuable.to_ability_name}", @project) .block.issuable-sidebar-header - if current_user 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' } -- cgit v1.2.1