diff options
| author | Phil Hughes <me@iamphill.com> | 2017-09-18 12:32:23 +0100 |
|---|---|---|
| committer | Phil Hughes <me@iamphill.com> | 2017-09-19 09:20:10 +0100 |
| commit | 2778549e1a19af662b9872b1e456c599067e12ba (patch) | |
| tree | 11db6abaf80c3a99a6d65226dab5cd113e5dc4bc | |
| parent | 1f4911541d03a257c38a63c6aa36a1c7ca4c3b43 (diff) | |
| download | gitlab-ce-sidebar-sidebars-only-when-scroll.tar.gz | |
Only show the sidebar scroll bars if the user can scrollsidebar-sidebars-only-when-scroll
Closes #37972
| -rw-r--r-- | app/assets/javascripts/new_sidebar.js | 11 | ||||
| -rw-r--r-- | app/assets/stylesheets/new_sidebar.scss | 6 |
2 files changed, 16 insertions, 1 deletions
diff --git a/app/assets/javascripts/new_sidebar.js b/app/assets/javascripts/new_sidebar.js index f2eb2338a1e..997550b37fb 100644 --- a/app/assets/javascripts/new_sidebar.js +++ b/app/assets/javascripts/new_sidebar.js @@ -11,6 +11,7 @@ export default class NewNavSidebar { initDomElements() { this.$page = $('.page-with-sidebar'); this.$sidebar = $('.nav-sidebar'); + this.$innerScroll = $('.nav-sidebar-inner-scroll', this.$sidebar); this.$overlay = $('.mobile-overlay'); this.$openSidebar = $('.toggle-mobile-nav'); this.$closeSidebar = $('.close-nav-button'); @@ -55,6 +56,16 @@ export default class NewNavSidebar { this.$page.toggleClass('page-with-icon-sidebar', breakpoint === 'sm' ? true : collapsed); } NewNavSidebar.setCollapsedCookie(collapsed); + + this.toggleSidebarOverflow(); + } + + toggleSidebarOverflow() { + if (this.$innerScroll.prop('scrollHeight') > this.$innerScroll.prop('offsetHeight')) { + this.$innerScroll.css('overflow-y', 'scroll'); + } else { + this.$innerScroll.css('overflow-y', ''); + } } render() { diff --git a/app/assets/stylesheets/new_sidebar.scss b/app/assets/stylesheets/new_sidebar.scss index 8030854e527..4d5e3d1eceb 100644 --- a/app/assets/stylesheets/new_sidebar.scss +++ b/app/assets/stylesheets/new_sidebar.scss @@ -192,7 +192,11 @@ $new-sidebar-collapsed-width: 50px; .nav-sidebar-inner-scroll { height: 100%; width: 100%; - overflow: scroll; + overflow: auto; + + @media (min-width: $screen-sm-min) { + overflow: hidden; + } } .with-performance-bar .nav-sidebar { |