Cache js selectors; fix css26200-convert-sidebar-to-dropdown

3 files changed, 16 insertions, 12 deletions

diff --git a/app/assets/javascripts/right_sidebar.js b/app/assets/javascripts/right_sidebar.js
index 82c17956f06..f8e42e7a350 100644
--- a/app/assets/javascripts/right_sidebar.js
+++ b/app/assets/javascripts/right_sidebar.js
@@ -21,13 +21,16 @@
     };
 
     Sidebar.prototype.addEventListeners = function() {
+      const $document = $(document);
+      const throttledSetSidebarHeight = _.throttle(this.setSidebarHeight, 10);
+
       this.sidebar.on('click', '.sidebar-collapsed-icon', this, this.sidebarCollapseClicked);
       $('.dropdown').on('hidden.gl.dropdown', this, this.onSidebarDropdownHidden);
       $('.dropdown').on('loading.gl.dropdown', this.sidebarDropdownLoading);
       $('.dropdown').on('loaded.gl.dropdown', this.sidebarDropdownLoaded);
-      $(window).on('resize', () => this.setSidebarHeight());
-      $(document).on('scroll', () => this.setSidebarHeight());
-      $(document).on('click', '.js-sidebar-toggle', function(e, triggered) {
+      $(window).on('resize', () => throttledSetSidebarHeight());
+      $document.on('scroll', () => throttledSetSidebarHeight());
+      $document.on('click', '.js-sidebar-toggle', function(e, triggered) {
         var $allGutterToggleIcons, $this, $thisIcon;
         e.preventDefault();
         $this = $(this);
@@ -195,11 +198,12 @@
 
     Sidebar.prototype.setSidebarHeight = function() {
       const $navHeight = $('.navbar-gitlab').outerHeight() + $('.layout-nav').outerHeight();
+      const $rightSidebar = $('.js-right-sidebar');
       const diff = $navHeight - $('body').scrollTop();
       if (diff > 0) {
-        $('.js-right-sidebar').outerHeight($(window).height() - diff);
+        $rightSidebar.outerHeight($(window).height() - diff);
       } else {
-        $('.js-right-sidebar').outerHeight('100%');
+        $rightSidebar.outerHeight('100%');
       }
     };
 
diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index 044d3517650..367289968c9 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -110,15 +110,15 @@ header {
       font-size: 11px;
     }
 
-    li.active {
-      a {
+    li {
+      .active a {
         font-weight: bold;
       }
-    }
 
-    li:hover {
-      .badge {
-        background-color: $white-light;
+      &:hover {
+        .badge {
+          background-color: $white-light;
+        }
       }
     }
   }
diff --git a/app/views/layouts/_page.html.haml b/app/views/layouts/_page.html.haml
index 5d227d1d52a..a35a918d501 100644
--- a/app/views/layouts/_page.html.haml
+++ b/app/views/layouts/_page.html.haml
@@ -1,4 +1,4 @@
-.page-with-sidebar{ class: "#{page_gutter_class}" }
+.page-with-sidebar{ class: page_gutter_class }
   - if defined?(nav) && nav
     .layout-nav
       .container-fluid