kotovalexarian-likes-gitlab/gitlab-org--gitlab-foss
1
0
Fork 0
Code Releases Activity

Merge branch 'static-navbar' into 'master'

Browse source 
Remove fixed positioning from navbar

See merge request !7547
This commit is contained in:
Jacob Schatz 2017-02-10 22:10:30 +00:00
commit a2aa5b7e8e
22 changed files with 62 additions and 70 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
app/assets/javascripts/build.js
View file

@ -67,16 +67,8 @@
Build.prototype.initSidebar = function() {
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.$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() {
@ -231,14 +223,6 @@
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) {
var shouldShow = typeof shouldHide === 'boolean' ? !shouldHide : undefined;
this.$buildScroll.toggleClass('sidebar-expanded', shouldShow)
@ -285,7 +269,7 @@
e.preventDefault();
$currentTarget = $(e.currentTarget);
$.scrollTo($currentTarget.attr('href'), {
offset: -($('.navbar-gitlab').outerHeight() + $('.layout-nav').outerHeight())
offset: 0
});
};

2
app/assets/javascripts/diff_notes/components/jump_to_discussion.js.es6
View file

@ -181,7 +181,7 @@ const Vue = require('vue');
}
$.scrollTo($target, {
offset: -($('.navbar-gitlab').outerHeight() + $('.layout-nav').outerHeight())
offset: 0
});
}
},

17
app/assets/javascripts/lib/utils/common_utils.js.es6
View file

@ -72,27 +72,18 @@
// This is required to handle non-unicode characters in 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
if (document.getElementById(hash) === null) {
var target = document.getElementById('user-content-' + hash);
if (target && target.scrollIntoView) {
target.scrollIntoView(true);
window.scrollBy(0, adjustment);
}
} else {
// only adjust for fixedTabs when not targeting user-generated content
var fixedTabs = document.querySelector('.js-tabs-affix');
if (fixedTabs) {
adjustment -= fixedTabs.offsetHeight;
window.scrollBy(0, -fixedTabs.offsetHeight);
}
window.scrollBy(0, adjustment);
}
};
@ -147,12 +138,10 @@
gl.utils.scrollToElement = function($el) {
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();
return $('body, html').animate({
scrollTop: top - (gl.navBarHeight + gl.navLinksHeight + gl.mrTabsHeight)
scrollTop: top - (gl.mrTabsHeight)
}, 200);
};

13
app/assets/javascripts/merge_request_tabs.js.es6
View file

@ -125,9 +125,8 @@ require('./flash');
if (this.diffViewType() === 'parallel') {
this.expandViewContainer();
}
const navBarHeight = $('.navbar-gitlab').outerHeight();
$.scrollTo('.merge-request-details .merge-request-tabs', {
offset: -navBarHeight,
offset: 0,
});
} else {
this.expandView();
@ -140,11 +139,7 @@ require('./flash');
scrollToElement(container) {
if (location.hash) {
const offset = 0 - (
$('.navbar-gitlab').outerHeight() +
$('.layout-nav').outerHeight() +
$('.js-tabs-affix').outerHeight()
);
const offset = -$('.js-tabs-affix').outerHeight();
const $el = $(`${container} ${location.hash}:not(.match)`);
if ($el.length) {
$.scrollTo($el[0], { offset });
@ -330,14 +325,12 @@ require('./flash');
if (Breakpoints.get().getBreakpointSize() === 'xs' || !$tabs.length) return;
const $diffTabs = $('#diff-notes-app');
const $fixedNav = $('.navbar-fixed-top');
const $layoutNav = $('.layout-nav');
$tabs.off('affix.bs.affix affix-top.bs.affix')
.affix({
offset: {
top: () => (
$diffTabs.offset().top - $tabs.height() - $fixedNav.height() - $layoutNav.height()
$diffTabs.offset().top - $tabs.height()
),
},
})

15
app/assets/javascripts/sidebar.js.es6
View file

@ -6,7 +6,7 @@
const sidebarBreakpoint = 1024;
const pageSelector = '.page-with-sidebar';
const navbarSelector = '.navbar-fixed-top';
const navbarSelector = '.navbar-gitlab';
const sidebarWrapperSelector = '.sidebar-wrapper';
const sidebarContentSelector = '.nav-sidebar';
@ -35,13 +35,16 @@
window.innerWidth >= sidebarBreakpoint &&
$(pageSelector).hasClass(expandedPageClass)
);
$(window).on('resize', () => this.setSidebarHeight());
$(document)
.on('click', sidebarToggleSelector, () => this.toggleSidebar())
.on('click', pinnedToggleSelector, () => this.togglePinnedState())
.on('click', 'html, body, a, button', (e) => this.handleClickEvent(e))
.on('DOMContentLoaded', () => this.renderState())
.on('scroll', () => this.setSidebarHeight())
.on('todo:toggle', (e, count) => this.updateTodoCount(count));
this.renderState();
this.setSidebarHeight();
}
handleClickEvent(e) {
@ -64,6 +67,16 @@
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() {
this.isPinned = !this.isPinned;
if (!this.isPinned) {

4
app/assets/stylesheets/framework/header.scss
View file

@ -222,6 +222,10 @@ header {
float: right;
border-top: none;
@media (min-width: $screen-md-min) {
padding: 0;
}
@media (max-width: $screen-xs-max) {
float: none;
}

14
app/assets/stylesheets/framework/nav.scss
View file

@ -283,10 +283,7 @@
}
.layout-nav {
position: fixed;
top: $header-height;
width: 100%;
z-index: 11;
background: $gray-light;
border-bottom: 1px solid $border-color;
transition: padding $sidebar-transition-duration;
@ -419,15 +416,20 @@
}
.page-with-layout-nav {
margin-top: $header-height + 2;
.right-sidebar {
top: ($header-height * 2) + 2;
}
.build-sidebar {
top: ($header-height * 3) + 3;
&.affix {
top: 0;
}
}
}
.activities {
.nav-block {
border-bottom: 1px solid $border-color;

15
app/assets/stylesheets/framework/sidebar.scss
View file

@ -1,5 +1,5 @@
.page-with-sidebar {
padding: $header-height 0 25px;
padding-bottom: 25px;
transition: padding $sidebar-transition-duration;
&.page-sidebar-pinned {
@ -208,7 +208,9 @@ header.header-sidebar-pinned {
padding-right: 0;
@media (min-width: $screen-sm-min) {
padding-right: $sidebar_collapsed_width;
.content-wrapper {
padding-right: $sidebar_collapsed_width;
}
.merge-request-tabs-holder.affix {
right: $sidebar_collapsed_width;
@ -234,7 +236,9 @@ header.header-sidebar-pinned {
}
@media (min-width: $screen-md-min) {
padding-right: $gutter_width;
.content-wrapper {
padding-right: $gutter_width;
}
&:not(.with-overlay) .merge-request-tabs-holder.affix {
right: $gutter_width;
@ -252,4 +256,9 @@ header.header-sidebar-pinned {
.right-sidebar {
border-left: 1px solid $border-color;
&.affix {
position: fixed;
top: 0;
}
}

6
app/assets/stylesheets/pages/boards.scss
View file

@ -298,12 +298,8 @@
.issue-boards-sidebar {
&.right-sidebar {
top: 153px;
top: 0;
bottom: 0;
@media (min-width: $screen-sm-min) {
top: 220px;
}
}
.issuable-sidebar-header {

2
app/assets/stylesheets/pages/issuable.scss
View file

@ -189,7 +189,7 @@
}
.right-sidebar {
position: fixed;
position: absolute;
top: $header-height;
bottom: 0;
right: 0;

2
app/assets/stylesheets/pages/merge_requests.scss
View file

@ -479,7 +479,7 @@
background-color: $white-light;
&.affix {
top: 100px;
top: 0;
left: 0;
z-index: 10;
transition: right .15s;

2
app/assets/stylesheets/pages/tree.scss
View file

@ -171,8 +171,6 @@
.tree-controls {
float: right;
margin-top: 11px;
position: relative;
z-index: 2;
.project-action-button {
margin-left: $btn-side-margin;

2
app/views/layouts/header/_default.html.haml
View file

@ -1,4 +1,4 @@
%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
.container-fluid
.header-content

2
app/views/projects/builds/_sidebar.html.haml
View file

@ -1,6 +1,6 @@
- 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
Job
%strong ##{@build.id}

2
app/views/projects/wikis/_sidebar.html.haml
View file

@ -1,4 +1,4 @@
%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
%a.gutter-toggle.pull-right.visible-xs-block.visible-sm-block.js-sidebar-wiki-toggle{ href: "#" }
= icon('angle-double-right')

2
app/views/shared/issuable/_sidebar.html.haml
View file

@ -2,7 +2,7 @@
- content_for :page_specific_javascripts do
= 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
- can_edit_issuable = can?(current_user, :"admin_#{issuable.to_ability_name}", @project)
.block.issuable-sidebar-header

4
changelogs/unreleased/static-navbar.yml Normal file
View file

@ -0,0 +1,4 @@
---
title: Remove fixed positioning from top nav
merge_request: !7547
author:

2
spec/features/boards/sidebar_spec.rb
View file

@ -54,7 +54,7 @@ describe 'Issue Boards', feature: true, js: true do
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')
end

2
spec/features/merge_requests/conflicts_spec.rb
View file

@ -141,7 +141,7 @@ feature 'Merge request conflict resolution', js: true, feature: true do
click_on 'Changes'
wait_for_ajax
find('.click-to-expand').click
click_link 'Expand all'
wait_for_ajax
expect(page).to have_content('Gregor Samsa woke from troubled dreams')

2
spec/javascripts/fixtures/header.html.haml
View file

@ -1,4 +1,4 @@
%header.navbar.navbar-fixed-top.navbar-gitlab.nav_header_class
%header.navbar.navbar-gitlab.nav_header_class
.container-fluid
.header-content
%button.side-nav-toggle

2
spec/support/slash_commands_helpers.rb
View file

@ -3,7 +3,7 @@ module SlashCommandsHelpers
Sidekiq::Testing.fake! do
page.within('.js-main-target-form') do
fill_in 'note[note]', with: text
click_button 'Comment'
find('.comment-btn').trigger('click')
end
end
end

2
spec/support/time_tracking_shared_examples.rb
View file

@ -77,6 +77,6 @@ end
def submit_time(slash_command)
fill_in 'note[note]', with: slash_command
click_button 'Comment'
find('.comment-btn').trigger('click')
wait_for_ajax
end