From b0864a9f5db79bd0dfdbe5adb66d69e166c22cf4 Mon Sep 17 00:00:00 2001 From: Jacob Schatz Date: Wed, 24 Feb 2016 23:09:29 +0000 Subject: 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 --- CHANGELOG | 3 + app/assets/javascripts/sidebar.js.coffee | 6 ++ app/assets/stylesheets/framework/header.scss | 8 ++- app/assets/stylesheets/framework/sidebar.scss | 82 ++++++--------------------- features/support/capybara.rb | 2 +- spec/support/capybara.rb | 2 +- 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 -- cgit v1.2.3