diff options
author | Tim Zallmann <tzallmann@gitlab.com> | 2017-06-20 17:45:26 +0300 |
---|---|---|
committer | kushalpandya <kushal@gitlab.com> | 2017-06-21 15:40:22 +0300 |
commit | 71efad75c37fccae40d9a399a0ae9545f3f63a41 (patch) | |
tree | 4a44dc96f11f23377c088b386140c50b8d727ca8 | |
parent | aa699276fecb5b21ad56f321ca3485e3df2db13f (diff) |
Fixes scrolling + improves Performance through assigning found $ elements to variables
-rw-r--r-- | app/assets/javascripts/right_sidebar.js | 21 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/issuable.scss | 2 |
2 files changed, 16 insertions, 7 deletions
diff --git a/app/assets/javascripts/right_sidebar.js b/app/assets/javascripts/right_sidebar.js index b71c3097706..da7c0c5a36c 100644 --- a/app/assets/javascripts/right_sidebar.js +++ b/app/assets/javascripts/right_sidebar.js @@ -7,6 +7,13 @@ import Cookies from 'js-cookie'; function Sidebar(currentUser) { this.toggleTodo = this.toggleTodo.bind(this); this.sidebar = $('aside'); + + this.$sidebarInner = this.sidebar.find('.issuable-sidebar'); + this.$navGitlab = $('.navbar-gitlab'); + this.$layoutNav = $('.layout-nav'); + this.$subScroll = $('.sub-nav-scroll'); + this.$rightSidebar = $('.js-right-sidebar'); + this.removeListeners(); this.addEventListeners(); } @@ -21,14 +28,15 @@ import Cookies from 'js-cookie'; Sidebar.prototype.addEventListeners = function() { const $document = $(document); - const throttledSetSidebarHeight = _.throttle(this.setSidebarHeight, 10); + const throttledSetSidebarHeight = _.throttle(this.setSidebarHeight.bind(this), 20); + const debouncedSetSidebarHeight = _.debounce(this.setSidebarHeight.bind(this), 200); 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', () => throttledSetSidebarHeight()); - $document.on('scroll', () => throttledSetSidebarHeight()); + $document.on('scroll', () => debouncedSetSidebarHeight()); $document.on('click', '.js-sidebar-toggle', function(e, triggered) { var $allGutterToggleIcons, $this, $thisIcon; e.preventDefault(); @@ -207,13 +215,14 @@ import Cookies from 'js-cookie'; }; Sidebar.prototype.setSidebarHeight = function() { - const $navHeight = $('.navbar-gitlab').outerHeight() + $('.layout-nav').outerHeight() + $('.sub-nav-scroll').outerHeight(); - const $rightSidebar = $('.js-right-sidebar'); + const $navHeight = this.$navGitlab.outerHeight() + this.$layoutNav.outerHeight() + (this.$subScroll ? this.$subScroll.outerHeight() : 0); const diff = $navHeight - $(window).scrollTop(); if (diff > 0) { - $rightSidebar.outerHeight($(window).height() - diff); + this.$rightSidebar.outerHeight($(window).height() - diff); + this.$sidebarInner.height('100%'); } else { - $rightSidebar.outerHeight('100%'); + this.$rightSidebar.outerHeight('100%'); + this.$sidebarInner.height(''); } }; diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss index 4abad3f2697..20f2eec9af5 100644 --- a/app/assets/stylesheets/pages/issuable.scss +++ b/app/assets/stylesheets/pages/issuable.scss @@ -204,7 +204,7 @@ .issuable-sidebar { width: calc(100% + 100px); - height: 100%; + height: calc(100% - #{$header-height}); overflow-y: scroll; overflow-x: hidden; -webkit-overflow-scrolling: touch; |