Merge branch 'feature/jschatz1/sidebar-sizing' into 'master'

Sidebar overlaps content when screen is below 1200px.

When screen is below 1200px, the sidebar overlaps.
When screen is above 1200px, the sidebar pushes content out.
z-index change to make sure hamburger stays on top.
Fixes #12717
![screensize](/uploads/9a21fa06d583a49d6ebbf1ada34c6792/screensize.gif)

![screensize-small](/uploads/7c25f46e962248a40840562a01c83f8f/screensize-small.gif)

Also sorry I couldn't get the collapse button in the screen cap. It's there.

See merge request !2620

6 files changed, 35 insertions, 68 deletions

diff --git a/CHANGELOG b/CHANGELOG
index 342355ca75d..ae39506a86d 100644
--- a/CHANGELOG
+++ b/CHANGELOG
@@ -1,5 +1,8 @@
 Please view this file on the master branch, on stable branches it's out of date.
 
+v 8.5.2
+  - Fix sidebar overlapping content when screen width was below 1200px
+
 v 8.5.1
   - Fix group projects styles
   - Show Crowd login tab when sign in is disabled and Crowd is enabled (Peter Hudec)
diff --git a/app/assets/javascripts/sidebar.js.coffee b/app/assets/javascripts/sidebar.js.coffee
index ae59480af9e..cff309c5972 100644
--- a/app/assets/javascripts/sidebar.js.coffee
+++ b/app/assets/javascripts/sidebar.js.coffee
@@ -8,4 +8,10 @@ $(document).on("click", '.toggle-nav-collapse', (e) ->
   $('.sidebar-wrapper').toggleClass("sidebar-collapsed sidebar-expanded")
   $('.toggle-nav-collapse i').toggleClass("fa-angle-right fa-angle-left")
   $.cookie("collapsed_nav", $('.page-with-sidebar').hasClass(collapsed), { path: '/' })
+
+  setTimeout ( ->
+    niceScrollBars = $('.nicescroll').niceScroll();
+    niceScrollBars.updateScrollBar();
+  ), 300
+
 )
diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index a81e258573d..c2676cd1cc3 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -141,9 +141,13 @@ header {
 }
 
 @media (max-width: $screen-md-max) {
-  .header-collapsed, .header-expanded {
-    @include collapsed-header;
+  .header-collapsed {
+    margin-left: $sidebar_collapsed_width;
   }
+
+ .header-expanded {
+    margin-left: $sidebar_width;
+ }
 }
 
 @media(min-width: $screen-md-max) {
diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss
index b141928f706..e0ccd6f100f 100644
--- a/app/assets/stylesheets/framework/sidebar.scss
+++ b/app/assets/stylesheets/framework/sidebar.scss
@@ -12,6 +12,10 @@
     height: 100%;
     transition-duration: .3s;
   }
+
+  &.right-sidebar-expanded {
+    padding-right: $gutter_width;
+  }
 }
 
 .sidebar-wrapper {
@@ -45,19 +49,6 @@
     overflow: hidden;
     transition-duration: .3s;
 
-    .home {
-      z-index: 1;
-      position: absolute;
-      left: 0px;
-    }
-
-    #logo {
-      z-index: 2;
-      position: absolute;
-      width: 58px;
-      cursor: pointer;
-    }
-
     a {
       float: left;
       height: $header-height;
@@ -83,7 +74,7 @@
           width: 158px;
           float: left;
           margin: 0;
-          margin-left: 50px;
+          margin-left: 14px;
           font-size: 19px;
           line-height: 41px;
           font-weight: normal;
@@ -194,6 +185,10 @@
 @mixin expanded-sidebar {
   padding-left: $sidebar_width;
 
+  &.right-sidebar-collapsed {
+    padding-right: $sidebar_collapsed_width;
+  }
+
   .sidebar-wrapper {
     width: $sidebar_width;
 
@@ -213,17 +208,13 @@
   }
 }
 
-@mixin expanded-gutter {
-  padding-right: $gutter_width;
-}
-
-@mixin collapsed-gutter {
-  padding-right: $sidebar_collapsed_width;
-}
-
 @mixin collapsed-sidebar {
   padding-left: $sidebar_collapsed_width;
 
+  &.right-sidebar-collapsed {
+    padding-right: $sidebar_collapsed_width;
+  }
+
   .sidebar-wrapper {
     width: $sidebar_collapsed_width;
 
@@ -287,47 +278,10 @@
   background: #f2f6f7;
 }
 
-// page is small enough
-@media (max-width: $screen-md-max) {
-  .page-sidebar-collapsed {
-    @include collapsed-sidebar;
-  }
-
-  .page-sidebar-expanded {
-    @include collapsed-sidebar;
-  }
-
-  .page-gutter {
-    &.right-sidebar-collapsed {
-      @include collapsed-gutter;
-    }
-    &.right-sidebar-expanded {
-      @include expanded-gutter;
-    }
-  }
-
-  .collapse-nav {
-    display: none;
-  }
+.page-sidebar-collapsed {
+  @include collapsed-sidebar;
 }
 
-// page is large enough
-@media(min-width: $screen-md-max) {
-
-  .page-gutter {
-    &.right-sidebar-collapsed {
-      @include collapsed-gutter;
-    }
-    &.right-sidebar-expanded {
-      @include expanded-gutter;
-    }
-  }
-
-  .page-sidebar-collapsed {
-    @include collapsed-sidebar;
-  }
-
-  .page-sidebar-expanded {
-    @include expanded-sidebar;
-  }
-}
\ No newline at end of file
+.page-sidebar-expanded {
+  @include expanded-sidebar;
+}
diff --git a/features/support/capybara.rb b/features/support/capybara.rb
index 38069ff8835..f33379f76c9 100644
--- a/features/support/capybara.rb
+++ b/features/support/capybara.rb
@@ -6,7 +6,7 @@ timeout = (ENV['CI'] || ENV['CI_SERVER']) ? 90 : 15
 
 Capybara.javascript_driver = :poltergeist
 Capybara.register_driver :poltergeist do |app|
-  Capybara::Poltergeist::Driver.new(app, js_errors: true, timeout: timeout)
+  Capybara::Poltergeist::Driver.new(app, js_errors: true, timeout: timeout, window_size: [1366, 768])
 end
 
 Capybara.default_wait_time = timeout
diff --git a/spec/support/capybara.rb b/spec/support/capybara.rb
index a698f484df1..65d59e6813c 100644
--- a/spec/support/capybara.rb
+++ b/spec/support/capybara.rb
@@ -7,7 +7,7 @@ timeout = (ENV['CI'] || ENV['CI_SERVER']) ? 90 : 10
 
 Capybara.javascript_driver = :poltergeist
 Capybara.register_driver :poltergeist do |app|
-  Capybara::Poltergeist::Driver.new(app, js_errors: true, timeout: timeout)
+  Capybara::Poltergeist::Driver.new(app, js_errors: true, timeout: timeout, window_size: [1366, 768])
 end
 
 Capybara.default_wait_time = timeout