Commit a2aa5b7e authored by Jacob Schatz's avatar Jacob Schatz

Merge branch 'static-navbar' into 'master'

Remove fixed positioning from navbar

See merge request !7547
parents 58131ac9 c34517ad
...@@ -67,16 +67,8 @@ ...@@ -67,16 +67,8 @@
Build.prototype.initSidebar = function() { Build.prototype.initSidebar = function() {
this.$sidebar = $('.js-build-sidebar'); this.$sidebar = $('.js-build-sidebar');
this.sidebarTranslationLimits = {
min: $('.navbar-gitlab').outerHeight() + $('.layout-nav').outerHeight()
};
this.sidebarTranslationLimits.max = this.sidebarTranslationLimits.min + $('.scrolling-tabs-container').outerHeight();
this.$sidebar.css({
top: this.sidebarTranslationLimits.max
});
this.$sidebar.niceScroll(); this.$sidebar.niceScroll();
this.$document.off('click', '.js-sidebar-build-toggle').on('click', '.js-sidebar-build-toggle', this.toggleSidebar); this.$document.off('click', '.js-sidebar-build-toggle').on('click', '.js-sidebar-build-toggle', this.toggleSidebar);
this.$document.off('scroll.translateSidebar').on('scroll.translateSidebar', this.translateSidebar.bind(this));
}; };
Build.prototype.location = function() { Build.prototype.location = function() {
...@@ -231,14 +223,6 @@ ...@@ -231,14 +223,6 @@
return bootstrapBreakpoint === 'xs' || bootstrapBreakpoint === 'sm'; return bootstrapBreakpoint === 'xs' || bootstrapBreakpoint === 'sm';
}; };
Build.prototype.translateSidebar = function(e) {
var newPosition = this.sidebarTranslationLimits.max - (document.body.scrollTop || document.documentElement.scrollTop);
if (newPosition < this.sidebarTranslationLimits.min) newPosition = this.sidebarTranslationLimits.min;
this.$sidebar.css({
top: newPosition
});
};
Build.prototype.toggleSidebar = function(shouldHide) { Build.prototype.toggleSidebar = function(shouldHide) {
var shouldShow = typeof shouldHide === 'boolean' ? !shouldHide : undefined; var shouldShow = typeof shouldHide === 'boolean' ? !shouldHide : undefined;
this.$buildScroll.toggleClass('sidebar-expanded', shouldShow) this.$buildScroll.toggleClass('sidebar-expanded', shouldShow)
...@@ -285,7 +269,7 @@ ...@@ -285,7 +269,7 @@
e.preventDefault(); e.preventDefault();
$currentTarget = $(e.currentTarget); $currentTarget = $(e.currentTarget);
$.scrollTo($currentTarget.attr('href'), { $.scrollTo($currentTarget.attr('href'), {
offset: -($('.navbar-gitlab').outerHeight() + $('.layout-nav').outerHeight()) offset: 0
}); });
}; };
......
...@@ -181,7 +181,7 @@ const Vue = require('vue'); ...@@ -181,7 +181,7 @@ const Vue = require('vue');
} }
$.scrollTo($target, { $.scrollTo($target, {
offset: -($('.navbar-gitlab').outerHeight() + $('.layout-nav').outerHeight()) offset: 0
}); });
} }
}, },
......
...@@ -72,27 +72,18 @@ ...@@ -72,27 +72,18 @@
// This is required to handle non-unicode characters in hash // This is required to handle non-unicode characters in hash
hash = decodeURIComponent(hash); hash = decodeURIComponent(hash);
var navbar = document.querySelector('.navbar-gitlab');
var subnav = document.querySelector('.layout-nav');
var fixedTabs = document.querySelector('.js-tabs-affix');
var adjustment = 0;
if (navbar) adjustment -= navbar.offsetHeight;
if (subnav) adjustment -= subnav.offsetHeight;
// scroll to user-generated markdown anchor if we cannot find a match // scroll to user-generated markdown anchor if we cannot find a match
if (document.getElementById(hash) === null) { if (document.getElementById(hash) === null) {
var target = document.getElementById('user-content-' + hash); var target = document.getElementById('user-content-' + hash);
if (target && target.scrollIntoView) { if (target && target.scrollIntoView) {
target.scrollIntoView(true); target.scrollIntoView(true);
window.scrollBy(0, adjustment);
} }
} else { } else {
// only adjust for fixedTabs when not targeting user-generated content // only adjust for fixedTabs when not targeting user-generated content
var fixedTabs = document.querySelector('.js-tabs-affix');
if (fixedTabs) { if (fixedTabs) {
adjustment -= fixedTabs.offsetHeight; window.scrollBy(0, -fixedTabs.offsetHeight);
} }
window.scrollBy(0, adjustment);
} }
}; };
...@@ -147,12 +138,10 @@ ...@@ -147,12 +138,10 @@
gl.utils.scrollToElement = function($el) { gl.utils.scrollToElement = function($el) {
var top = $el.offset().top; var top = $el.offset().top;
gl.navBarHeight = gl.navBarHeight || $('.navbar-gitlab').height();
gl.navLinksHeight = gl.navLinksHeight || $('.nav-links').height();
gl.mrTabsHeight = gl.mrTabsHeight || $('.merge-request-tabs').height(); gl.mrTabsHeight = gl.mrTabsHeight || $('.merge-request-tabs').height();
return $('body, html').animate({ return $('body, html').animate({
scrollTop: top - (gl.navBarHeight + gl.navLinksHeight + gl.mrTabsHeight) scrollTop: top - (gl.mrTabsHeight)
}, 200); }, 200);
}; };
......
...@@ -125,9 +125,8 @@ require('./flash'); ...@@ -125,9 +125,8 @@ require('./flash');
if (this.diffViewType() === 'parallel') { if (this.diffViewType() === 'parallel') {
this.expandViewContainer(); this.expandViewContainer();
} }
const navBarHeight = $('.navbar-gitlab').outerHeight();
$.scrollTo('.merge-request-details .merge-request-tabs', { $.scrollTo('.merge-request-details .merge-request-tabs', {
offset: -navBarHeight, offset: 0,
}); });
} else { } else {
this.expandView(); this.expandView();
...@@ -140,11 +139,7 @@ require('./flash'); ...@@ -140,11 +139,7 @@ require('./flash');
scrollToElement(container) { scrollToElement(container) {
if (location.hash) { if (location.hash) {
const offset = 0 - ( const offset = -$('.js-tabs-affix').outerHeight();
$('.navbar-gitlab').outerHeight() +
$('.layout-nav').outerHeight() +
$('.js-tabs-affix').outerHeight()
);
const $el = $(`${container} ${location.hash}:not(.match)`); const $el = $(`${container} ${location.hash}:not(.match)`);
if ($el.length) { if ($el.length) {
$.scrollTo($el[0], { offset }); $.scrollTo($el[0], { offset });
...@@ -330,14 +325,12 @@ require('./flash'); ...@@ -330,14 +325,12 @@ require('./flash');
if (Breakpoints.get().getBreakpointSize() === 'xs' || !$tabs.length) return; if (Breakpoints.get().getBreakpointSize() === 'xs' || !$tabs.length) return;
const $diffTabs = $('#diff-notes-app'); const $diffTabs = $('#diff-notes-app');
const $fixedNav = $('.navbar-fixed-top');
const $layoutNav = $('.layout-nav');
$tabs.off('affix.bs.affix affix-top.bs.affix') $tabs.off('affix.bs.affix affix-top.bs.affix')
.affix({ .affix({
offset: { offset: {
top: () => ( top: () => (
$diffTabs.offset().top - $tabs.height() - $fixedNav.height() - $layoutNav.height() $diffTabs.offset().top - $tabs.height()
), ),
}, },
}) })
......
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
const sidebarBreakpoint = 1024; const sidebarBreakpoint = 1024;
const pageSelector = '.page-with-sidebar'; const pageSelector = '.page-with-sidebar';
const navbarSelector = '.navbar-fixed-top'; const navbarSelector = '.navbar-gitlab';
const sidebarWrapperSelector = '.sidebar-wrapper'; const sidebarWrapperSelector = '.sidebar-wrapper';
const sidebarContentSelector = '.nav-sidebar'; const sidebarContentSelector = '.nav-sidebar';
...@@ -35,13 +35,16 @@ ...@@ -35,13 +35,16 @@
window.innerWidth >= sidebarBreakpoint && window.innerWidth >= sidebarBreakpoint &&
$(pageSelector).hasClass(expandedPageClass) $(pageSelector).hasClass(expandedPageClass)
); );
$(window).on('resize', () => this.setSidebarHeight());
$(document) $(document)
.on('click', sidebarToggleSelector, () => this.toggleSidebar()) .on('click', sidebarToggleSelector, () => this.toggleSidebar())
.on('click', pinnedToggleSelector, () => this.togglePinnedState()) .on('click', pinnedToggleSelector, () => this.togglePinnedState())
.on('click', 'html, body, a, button', (e) => this.handleClickEvent(e)) .on('click', 'html, body, a, button', (e) => this.handleClickEvent(e))
.on('DOMContentLoaded', () => this.renderState()) .on('DOMContentLoaded', () => this.renderState())
.on('scroll', () => this.setSidebarHeight())
.on('todo:toggle', (e, count) => this.updateTodoCount(count)); .on('todo:toggle', (e, count) => this.updateTodoCount(count));
this.renderState(); this.renderState();
this.setSidebarHeight();
} }
handleClickEvent(e) { handleClickEvent(e) {
...@@ -64,6 +67,16 @@ ...@@ -64,6 +67,16 @@
this.renderState(); this.renderState();
} }
setSidebarHeight() {
const $navHeight = $('.navbar-gitlab').outerHeight() + $('.layout-nav').outerHeight();
const diff = $navHeight - $('body').scrollTop();
if (diff > 0) {
$('.js-right-sidebar').outerHeight($(window).height() - diff);
} else {
$('.js-right-sidebar').outerHeight('100%');
}
}
togglePinnedState() { togglePinnedState() {
this.isPinned = !this.isPinned; this.isPinned = !this.isPinned;
if (!this.isPinned) { if (!this.isPinned) {
......
...@@ -222,6 +222,10 @@ header { ...@@ -222,6 +222,10 @@ header {
float: right; float: right;
border-top: none; border-top: none;
@media (min-width: $screen-md-min) {
padding: 0;
}
@media (max-width: $screen-xs-max) { @media (max-width: $screen-xs-max) {
float: none; float: none;
} }
......
...@@ -283,10 +283,7 @@ ...@@ -283,10 +283,7 @@
} }
.layout-nav { .layout-nav {
position: fixed;
top: $header-height;
width: 100%; width: 100%;
z-index: 11;
background: $gray-light; background: $gray-light;
border-bottom: 1px solid $border-color; border-bottom: 1px solid $border-color;
transition: padding $sidebar-transition-duration; transition: padding $sidebar-transition-duration;
...@@ -419,15 +416,20 @@ ...@@ -419,15 +416,20 @@
} }
.page-with-layout-nav { .page-with-layout-nav {
margin-top: $header-height + 2;
.right-sidebar { .right-sidebar {
top: ($header-height * 2) + 2; top: ($header-height * 2) + 2;
} }
.build-sidebar {
top: ($header-height * 3) + 3;
&.affix {
top: 0;
}
}
} }
.activities { .activities {
.nav-block { .nav-block {
border-bottom: 1px solid $border-color; border-bottom: 1px solid $border-color;
......
.page-with-sidebar { .page-with-sidebar {
padding: $header-height 0 25px; padding-bottom: 25px;
transition: padding $sidebar-transition-duration; transition: padding $sidebar-transition-duration;
&.page-sidebar-pinned { &.page-sidebar-pinned {
...@@ -208,7 +208,9 @@ header.header-sidebar-pinned { ...@@ -208,7 +208,9 @@ header.header-sidebar-pinned {
padding-right: 0; padding-right: 0;
@media (min-width: $screen-sm-min) { @media (min-width: $screen-sm-min) {
.content-wrapper {
padding-right: $sidebar_collapsed_width; padding-right: $sidebar_collapsed_width;
}
.merge-request-tabs-holder.affix { .merge-request-tabs-holder.affix {
right: $sidebar_collapsed_width; right: $sidebar_collapsed_width;
...@@ -234,7 +236,9 @@ header.header-sidebar-pinned { ...@@ -234,7 +236,9 @@ header.header-sidebar-pinned {
} }
@media (min-width: $screen-md-min) { @media (min-width: $screen-md-min) {
.content-wrapper {
padding-right: $gutter_width; padding-right: $gutter_width;
}
&:not(.with-overlay) .merge-request-tabs-holder.affix { &:not(.with-overlay) .merge-request-tabs-holder.affix {
right: $gutter_width; right: $gutter_width;
...@@ -252,4 +256,9 @@ header.header-sidebar-pinned { ...@@ -252,4 +256,9 @@ header.header-sidebar-pinned {
.right-sidebar { .right-sidebar {
border-left: 1px solid $border-color; border-left: 1px solid $border-color;
&.affix {
position: fixed;
top: 0;
}
} }
...@@ -298,12 +298,8 @@ ...@@ -298,12 +298,8 @@
.issue-boards-sidebar { .issue-boards-sidebar {
&.right-sidebar { &.right-sidebar {
top: 153px; top: 0;
bottom: 0; bottom: 0;
@media (min-width: $screen-sm-min) {
top: 220px;
}
} }
.issuable-sidebar-header { .issuable-sidebar-header {
......
...@@ -189,7 +189,7 @@ ...@@ -189,7 +189,7 @@
} }
.right-sidebar { .right-sidebar {
position: fixed; position: absolute;
top: $header-height; top: $header-height;
bottom: 0; bottom: 0;
right: 0; right: 0;
......
...@@ -479,7 +479,7 @@ ...@@ -479,7 +479,7 @@
background-color: $white-light; background-color: $white-light;
&.affix { &.affix {
top: 100px; top: 0;
left: 0; left: 0;
z-index: 10; z-index: 10;
transition: right .15s; transition: right .15s;
......
...@@ -171,8 +171,6 @@ ...@@ -171,8 +171,6 @@
.tree-controls { .tree-controls {
float: right; float: right;
margin-top: 11px; margin-top: 11px;
position: relative;
z-index: 2;
.project-action-button { .project-action-button {
margin-left: $btn-side-margin; margin-left: $btn-side-margin;
......
%header.navbar.navbar-fixed-top.navbar-gitlab{ class: nav_header_class } %header.navbar.navbar-gitlab{ class: nav_header_class }
%a.sr-only.gl-accessibility{ href: "#content-body", tabindex: "1" } Skip to content %a.sr-only.gl-accessibility{ href: "#content-body", tabindex: "1" } Skip to content
.container-fluid .container-fluid
.header-content .header-content
......
- builds = @build.pipeline.builds.to_a - builds = @build.pipeline.builds.to_a
%aside.right-sidebar.right-sidebar-expanded.build-sidebar.js-build-sidebar %aside.right-sidebar.right-sidebar-expanded.build-sidebar.js-build-sidebar.js-right-sidebar{ data: { "offset-top" => "151", "spy" => "affix" } }
.block.build-sidebar-header.visible-xs-block.visible-sm-block.append-bottom-default .block.build-sidebar-header.visible-xs-block.visible-sm-block.append-bottom-default
Job Job
%strong ##{@build.id} %strong ##{@build.id}
......
%aside.right-sidebar.right-sidebar-expanded.wiki-sidebar.js-wiki-sidebar %aside.right-sidebar.right-sidebar-expanded.wiki-sidebar.js-wiki-sidebar.js-right-sidebar{ data: { "offset-top" => "101", "spy" => "affix" } }
.block.wiki-sidebar-header.append-bottom-default .block.wiki-sidebar-header.append-bottom-default
%a.gutter-toggle.pull-right.visible-xs-block.visible-sm-block.js-sidebar-wiki-toggle{ href: "#" } %a.gutter-toggle.pull-right.visible-xs-block.visible-sm-block.js-sidebar-wiki-toggle{ href: "#" }
= icon('angle-double-right') = icon('angle-double-right')
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
- content_for :page_specific_javascripts do - content_for :page_specific_javascripts do
= page_specific_javascript_bundle_tag('issuable') = page_specific_javascript_bundle_tag('issuable')
%aside.right-sidebar{ class: sidebar_gutter_collapsed_class, 'aria-live' => 'polite' } %aside.right-sidebar.js-right-sidebar{ data: { "offset-top" => "101", "spy" => "affix" }, class: sidebar_gutter_collapsed_class, 'aria-live' => 'polite' }
.issuable-sidebar .issuable-sidebar
- can_edit_issuable = can?(current_user, :"admin_#{issuable.to_ability_name}", @project) - can_edit_issuable = can?(current_user, :"admin_#{issuable.to_ability_name}", @project)
.block.issuable-sidebar-header .block.issuable-sidebar-header
......
---
title: Remove fixed positioning from top nav
merge_request: !7547
author:
...@@ -54,7 +54,7 @@ describe 'Issue Boards', feature: true, js: true do ...@@ -54,7 +54,7 @@ describe 'Issue Boards', feature: true, js: true do
expect(page).to have_selector('.issue-boards-sidebar') expect(page).to have_selector('.issue-boards-sidebar')
find('.gutter-toggle').click find('.gutter-toggle').trigger('click')
expect(page).not_to have_selector('.issue-boards-sidebar') expect(page).not_to have_selector('.issue-boards-sidebar')
end end
......
...@@ -141,7 +141,7 @@ feature 'Merge request conflict resolution', js: true, feature: true do ...@@ -141,7 +141,7 @@ feature 'Merge request conflict resolution', js: true, feature: true do
click_on 'Changes' click_on 'Changes'
wait_for_ajax wait_for_ajax
find('.click-to-expand').click click_link 'Expand all'
wait_for_ajax wait_for_ajax
expect(page).to have_content('Gregor Samsa woke from troubled dreams') expect(page).to have_content('Gregor Samsa woke from troubled dreams')
......
%header.navbar.navbar-fixed-top.navbar-gitlab.nav_header_class %header.navbar.navbar-gitlab.nav_header_class
.container-fluid .container-fluid
.header-content .header-content
%button.side-nav-toggle %button.side-nav-toggle
......
...@@ -3,7 +3,7 @@ module SlashCommandsHelpers ...@@ -3,7 +3,7 @@ module SlashCommandsHelpers
Sidekiq::Testing.fake! do Sidekiq::Testing.fake! do
page.within('.js-main-target-form') do page.within('.js-main-target-form') do
fill_in 'note[note]', with: text fill_in 'note[note]', with: text
click_button 'Comment' find('.comment-btn').trigger('click')
end end
end end
end end
......
...@@ -77,6 +77,6 @@ end ...@@ -77,6 +77,6 @@ end
def submit_time(slash_command) def submit_time(slash_command)
fill_in 'note[note]', with: slash_command fill_in 'note[note]', with: slash_command
click_button 'Comment' find('.comment-btn').trigger('click')
wait_for_ajax wait_for_ajax
end end
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment