Replace SidebarHeightManager by CSS ruleswinh-newnav-issuable-sidebar

10 files changed, 58 insertions, 139 deletions

diff --git a/app/assets/javascripts/issuable_bulk_update_sidebar.js b/app/assets/javascripts/issuable_bulk_update_sidebar.js
index d314f3c4d43..f5190bfd9fe 100644
--- a/app/assets/javascripts/issuable_bulk_update_sidebar.js
+++ b/app/assets/javascripts/issuable_bulk_update_sidebar.js
@@ -5,7 +5,6 @@
 /* global SubscriptionSelect */
 
 import IssuableBulkUpdateActions from './issuable_bulk_update_actions';
-import SidebarHeightManager from './sidebar_height_manager';
 
 const HIDDEN_CLASS = 'hidden';
 const DISABLED_CONTENT_CLASS = 'disabled-content';
@@ -87,7 +86,6 @@ export default class IssuableBulkUpdateSidebar {
 
     if (enable) {
       this.initAffix();
-      SidebarHeightManager.init();
     }
   }
 
diff --git a/app/assets/javascripts/right_sidebar.js b/app/assets/javascripts/right_sidebar.js
index fa958d75fa4..10c47c2d4a4 100644
--- a/app/assets/javascripts/right_sidebar.js
+++ b/app/assets/javascripts/right_sidebar.js
@@ -2,7 +2,6 @@
 
 import _ from 'underscore';
 import Cookies from 'js-cookie';
-import SidebarHeightManager from './sidebar_height_manager';
 
 (function() {
   this.Sidebar = (function() {
@@ -23,7 +22,6 @@ import SidebarHeightManager from './sidebar_height_manager';
     };
 
     Sidebar.prototype.addEventListeners = function() {
-      SidebarHeightManager.init();
       const $document = $(document);
 
       this.sidebar.on('click', '.sidebar-collapsed-icon', this, this.sidebarCollapseClicked);
diff --git a/app/assets/javascripts/sidebar_height_manager.js b/app/assets/javascripts/sidebar_height_manager.js
deleted file mode 100644
index 2752fe2b911..00000000000
--- a/app/assets/javascripts/sidebar_height_manager.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import _ from 'underscore';
-import Cookies from 'js-cookie';
-
-export default {
-  init() {
-    if (!this.initialized) {
-      if (Cookies.get('new_nav') === 'true' && $('.js-issuable-sidebar').length) return;
-
-      this.$window = $(window);
-      this.$rightSidebar = $('.js-right-sidebar');
-      this.$navHeight = $('.navbar-gitlab').outerHeight() +
-        $('.layout-nav').outerHeight() +
-        $('.sub-nav-scroll').outerHeight();
-
-      const throttledSetSidebarHeight = _.throttle(() => this.setSidebarHeight(), 20);
-      const debouncedSetSidebarHeight = _.debounce(() => this.setSidebarHeight(), 200);
-
-      this.$window.on('scroll', throttledSetSidebarHeight);
-      this.$window.on('resize', debouncedSetSidebarHeight);
-      this.initialized = true;
-    }
-  },
-
-  setSidebarHeight() {
-    const currentScrollDepth = window.pageYOffset || 0;
-    const diff = this.$navHeight - currentScrollDepth;
-
-    if (diff > 0) {
-      const newSidebarHeight = window.innerHeight - diff;
-      this.$rightSidebar.outerHeight(newSidebarHeight);
-      this.sidebarHeightIsCustom = true;
-    } else if (this.sidebarHeightIsCustom) {
-      this.$rightSidebar.outerHeight('100%');
-      this.sidebarHeightIsCustom = false;
-    }
-  },
-};
diff --git a/app/assets/stylesheets/framework/layout.scss b/app/assets/stylesheets/framework/layout.scss
index bd521028c44..024a2684b87 100644
--- a/app/assets/stylesheets/framework/layout.scss
+++ b/app/assets/stylesheets/framework/layout.scss
@@ -25,6 +25,7 @@ body {
 
 .content-wrapper {
   padding-bottom: 100px;
+  position: relative;
 
   &:not(.page-with-layout-nav) {
     margin-top: $header-height;
diff --git a/app/assets/stylesheets/framework/nav.scss b/app/assets/stylesheets/framework/nav.scss
index e20108b171b..6a22f2d9ed4 100644
--- a/app/assets/stylesheets/framework/nav.scss
+++ b/app/assets/stylesheets/framework/nav.scss
@@ -359,7 +359,7 @@
 
   .nav-links {
     border-bottom: none;
-    height: 51px;
+    height: $header-height;
 
     @media (min-width: $screen-sm-min) {
       justify-content: center;
@@ -455,38 +455,6 @@
   }
 }
 
-.page-with-layout-nav {
-  .right-sidebar {
-    top: ($header-height + 1) * 2;
-  }
-
-  &.page-with-sub-nav {
-    .right-sidebar {
-      top: ($header-height + 1) * 3;
-
-      &.affix {
-        top: $header-height;
-      }
-    }
-  }
-}
-
-.with-performance-bar .page-with-layout-nav {
-  .right-sidebar {
-    top: ($header-height + 1) * 2 + $performance-bar-height;
-  }
-
-  &.page-with-sub-nav {
-    .right-sidebar {
-      top: ($header-height + 1) * 3 + $performance-bar-height;
-
-      &.affix {
-        top: $header-height + $performance-bar-height;
-      }
-    }
-  }
-}
-
 .nav-block {
   &.activities {
     border-bottom: 1px solid $border-color;
diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss
index 40e8a928e6e..934571b39b6 100644
--- a/app/assets/stylesheets/framework/sidebar.scss
+++ b/app/assets/stylesheets/framework/sidebar.scss
@@ -78,16 +78,31 @@
 
 .right-sidebar {
   border-left: 1px solid $border-color;
-  height: calc(100% - #{$header-height});
+  bottom: 0;
+  height: auto;
+  right: 0;
+}
+
+.page-with-new-nav .right-sidebar,
+.page-with-layout-nav .right-sidebar.affix {
+  position: fixed;
+  top: $header-height;
+}
 
-  &.affix {
-    position: fixed;
-    top: $header-height;
+.with-performance-bar {
+  .page-with-new-nav .right-sidebar,
+  .page-with-layout-nav .right-sidebar.affix {
+    top: #{$performance-bar-height + $header-height};
   }
 }
 
-.with-performance-bar .right-sidebar.affix {
-  top: $header-height + $performance-bar-height;
+.page-with-layout-nav .right-sidebar.affix {
+  margin-top: 1px; // header bottom border
+}
+
+.page-with-layout-nav .right-sidebar:not(.affix) {
+  position: absolute;
+  top: 0;
 }
 
 @mixin maintain-sidebar-dimensions {
@@ -132,3 +147,9 @@
     width: calc(100% + 35px);
   }
 }
+
+.page-with-new-nav {
+  .right-sidebar.right-sidebar-expanded .issuable-sidebar-header {
+    padding: 10px 0 15px;
+  }
+}
diff --git a/app/assets/stylesheets/new_sidebar.scss b/app/assets/stylesheets/new_sidebar.scss
index f624b130e19..2d7c31536bb 100644
--- a/app/assets/stylesheets/new_sidebar.scss
+++ b/app/assets/stylesheets/new_sidebar.scss
@@ -22,16 +22,6 @@ $new-sidebar-collapsed-width: 50px;
   @media (min-width: $screen-lg-min) {
     padding-left: $new-sidebar-width;
   }
-
-  // Override position: absolute
-  .right-sidebar {
-    position: fixed;
-    height: calc(100% - #{$header-height});
-  }
-
-  .issues-bulk-update.right-sidebar.right-sidebar-expanded .issuable-sidebar-header {
-    padding: 10px 0 15px;
-  }
 }
 
 .page-with-icon-sidebar {
diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss
index 0f3074076ce..b3e867988b4 100644
--- a/app/assets/stylesheets/pages/boards.scss
+++ b/app/assets/stylesheets/pages/boards.scss
@@ -433,45 +433,40 @@
   margin: 5px;
 }
 
-.page-with-layout-nav.page-with-sub-nav .issue-boards-sidebar,
-.page-with-new-sidebar.page-with-sidebar .issue-boards-sidebar {
-  position: absolute;
-
-  &.right-sidebar {
-    top: 0;
-    bottom: 0;
-  }
-
-  .issuable-sidebar-header {
-    position: relative;
-  }
-
-  .gutter-toggle {
-    position: absolute;
-    top: 0;
-    bottom: 15px;
-    right: 0;
-    width: 22px;
-    color: $gray-darkest;
+.page-with-layout-nav.page-with-sub-nav,
+.page-with-new-nav {
+  .issue-boards-sidebar {
+    .issuable-sidebar-header {
+      position: relative;
+    }
 
-    svg {
+    .gutter-toggle {
       position: absolute;
-      top: 50%;
-      margin-top: (-11px / 2);
-    }
+      top: 0;
+      bottom: 15px;
+      right: 0;
+      width: 22px;
+      color: $gray-darkest;
 
-    &:hover {
-      path {
-        fill: $gray-darkest;
+      svg {
+        position: absolute;
+        top: 50%;
+        margin-top: (-11px / 2);
+      }
+
+      &:hover {
+        path {
+          fill: $gray-darkest;
+        }
       }
     }
-  }
 
-  .issuable-header-text {
-    padding-right: 35px;
+    .issuable-header-text {
+      padding-right: 35px;
 
-    > strong {
-      font-weight: $gl-font-weight-bold;
+      > strong {
+        font-weight: $gl-font-weight-bold;
+      }
     }
   }
 }
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index ab5a901da71..8d167047892 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -219,10 +219,6 @@
 }
 
 .right-sidebar {
-  position: absolute;
-  top: $header-height;
-  bottom: 0;
-  right: 0;
   transition: width .3s;
   background: $gray-light;
   z-index: 200;
@@ -230,16 +226,12 @@
 
   .issuable-sidebar {
     width: calc(100% + 100px);
-    height: calc(100% - #{$header-height});
+    height: 100%;
     overflow-y: scroll;
     overflow-x: hidden;
     -webkit-overflow-scrolling: touch;
   }
 
-  &.affix-top .issuable-sidebar {
-    height: 100%;
-  }
-
   &.right-sidebar-expanded {
     width: $gutter_width;
 
@@ -478,14 +470,6 @@
   }
 }
 
-.with-performance-bar .right-sidebar {
-  top: $header-height + $performance-bar-height;
-
-  .issuable-sidebar {
-    height: calc(100% - #{$header-height} - #{$performance-bar-height});
-  }
-}
-
 .detail-page-description {
   padding: 16px 0;
 
diff --git a/app/helpers/nav_helper.rb b/app/helpers/nav_helper.rb
index b63b3b70903..2374937571b 100644
--- a/app/helpers/nav_helper.rb
+++ b/app/helpers/nav_helper.rb
@@ -1,6 +1,7 @@
 module NavHelper
   def page_with_sidebar_class
     class_name = page_gutter_class
+    class_name << 'page-with-new-nav' if show_new_nav?
     class_name << 'page-with-new-sidebar' if defined?(@new_sidebar) && @new_sidebar
     class_name << 'page-with-icon-sidebar' if collapsed_sidebar? && @new_sidebar