Merge branch 'static-navbar' into 'master'

Remove fixed positioning from navbar

See merge request !7547

app/assets/javascripts/build.js

@@ -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
       });
     };
 

app/assets/javascripts/diff_notes/components/jump_to_discussion.js.es6

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

app/assets/javascripts/lib/utils/common_utils.js.es6

@@ -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);
     };
 

app/assets/javascripts/merge_request_tabs.js.es6

@@ -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()
             ),
           },
         })

app/assets/javascripts/sidebar.js.es6

@@ -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) {

app/assets/stylesheets/framework/header.scss

@@ -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;
       }

app/assets/stylesheets/framework/nav.scss

@@ -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;
 

app/assets/stylesheets/framework/sidebar.scss

 .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;
+  }
 }

app/assets/stylesheets/pages/boards.scss

@@ -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 {

app/assets/stylesheets/pages/issuable.scss

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

app/assets/stylesheets/pages/merge_requests.scss

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

app/assets/stylesheets/pages/tree.scss

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

app/views/layouts/header/_default.html.haml

-%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

app/views/projects/builds/_sidebar.html.haml

 - 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}

app/views/projects/wikis/_sidebar.html.haml

-%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')

app/views/shared/issuable/_sidebar.html.haml

@@ -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

changelogs/unreleased/static-navbar.yml

+---
+title: Remove fixed positioning from top nav
+merge_request: !7547
+author:

spec/features/boards/sidebar_spec.rb

@@ -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

spec/features/merge_requests/conflicts_spec.rb

@@ -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')

spec/javascripts/fixtures/header.html.haml

-%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

spec/support/slash_commands_helpers.rb

@@ -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

spec/support/time_tracking_shared_examples.rb

@@ -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