Keep sidebars absolute until fixed at top; remove unneeded JS

8 files changed, 21 insertions, 17 deletions

diff --git a/app/assets/javascripts/build.js b/app/assets/javascripts/build.js
index a378e5e27b8..eed447d54a0 100644
--- a/app/assets/javascripts/build.js
+++ b/app/assets/javascripts/build.js
@@ -67,6 +67,7 @@
 
     Build.prototype.initSidebar = function() {
       this.$sidebar = $('.js-build-sidebar');
+<<<<<<< 36beffc12461d2e479ad8b000b7ba5b6ea40cd33
       this.sidebarTranslationLimits = {
 <<<<<<< 3ee255139ab555ec49a177d3b2eed65580f36c4f
         min: $('.navbar-gitlab').outerHeight() + $('.layout-nav').outerHeight()
@@ -80,9 +81,10 @@
       this.$sidebar.css({
         top: this.sidebarTranslationLimits.max
       });
+=======
+>>>>>>> Keep sidebars absolute until fixed at top; remove unneeded JS
       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() {
@@ -237,14 +239,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)
diff --git a/app/assets/javascripts/merge_request_tabs.js.es6 b/app/assets/javascripts/merge_request_tabs.js.es6
index af1ba9ecaf3..e74658d59bd 100644
--- a/app/assets/javascripts/merge_request_tabs.js.es6
+++ b/app/assets/javascripts/merge_request_tabs.js.es6
@@ -337,7 +337,7 @@ require('./flash');
         .affix({
           offset: {
             top: () => (
-              $diffTabs.offset().top - $tabs.height() - $fixedNav.height() - $layoutNav.height()
+              $diffTabs.offset().top - $tabs.height()
             ),
           },
         })
diff --git a/app/assets/stylesheets/framework/nav.scss b/app/assets/stylesheets/framework/nav.scss
index d62f34ccb85..674d3bb45aa 100644
--- a/app/assets/stylesheets/framework/nav.scss
+++ b/app/assets/stylesheets/framework/nav.scss
@@ -416,14 +416,20 @@
 }
 
 .page-with-layout-nav {
-
   .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;
 
diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss
index d60661222e9..20bcb1eeb23 100644
--- a/app/assets/stylesheets/framework/sidebar.scss
+++ b/app/assets/stylesheets/framework/sidebar.scss
@@ -256,4 +256,9 @@ header.header-sidebar-pinned {
 
 .right-sidebar {
   border-left: 1px solid $border-color;
+
+  &.affix {
+    position: fixed;
+    top: 0;
+  }
 }
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index 1a53730bed5..130103a2702 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -189,7 +189,8 @@
 }
 
 .right-sidebar {
-  position: fixed;
+  position: absolute;
+  height: 100%;
   top: $header-height;
   bottom: 0;
   right: 0;
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index 1431673027f..c02a65b0903 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/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;
diff --git a/app/assets/stylesheets/pages/tree.scss b/app/assets/stylesheets/pages/tree.scss
index 948921efc0b..8fafe472621 100644
--- a/app/assets/stylesheets/pages/tree.scss
+++ b/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;
diff --git a/app/views/projects/builds/_sidebar.html.haml b/app/views/projects/builds/_sidebar.html.haml
index 56fc5f5e68b..f4a49ba71c6 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
+%aside.right-sidebar.right-sidebar-expanded.build-sidebar.js-build-sidebar{ data: { "offset-top" => "151", "spy" => "affix" } }
   .block.build-sidebar-header.visible-xs-block.visible-sm-block.append-bottom-default
     Job
     %strong ##{@build.id}