From c37e5bc69d2b6f679c53d5edbc1bea27dbc262ac Mon Sep 17 00:00:00 2001 From: Jacob Schatz Date: Tue, 26 Jan 2016 19:09:55 -0500 Subject: [PATCH 1/6] 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 --- app/assets/javascripts/application.js.coffee | 6 +- app/assets/stylesheets/framework/header.scss | 2 +- app/assets/stylesheets/framework/sidebar.scss | 81 ++++--------------- 3 files changed, 22 insertions(+), 67 deletions(-) diff --git a/app/assets/javascripts/application.js.coffee b/app/assets/javascripts/application.js.coffee index 367bd098bfdb..dde71f33d2e1 100644 --- a/app/assets/javascripts/application.js.coffee +++ b/app/assets/javascripts/application.js.coffee @@ -188,9 +188,13 @@ $ -> $container.remove() $('.navbar-toggle').on 'click', -> + $this = $(this); $('.header-content .title').toggle() $('.header-content .navbar-collapse').toggle() - $('.navbar-toggle').toggleClass('active') + if $this.toggleClass('active').hasClass('active') + $this.closest('header').css('z-index',100) + else + $this.closest('header').css('z-index',99) # Show/hide comments on diff $("body").on "click", ".js-toggle-diff-comments", (e) -> diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss index a81e258573dc..93d74bf30f18 100644 --- a/app/assets/stylesheets/framework/header.scss +++ b/app/assets/stylesheets/framework/header.scss @@ -23,7 +23,7 @@ header { &.navbar-gitlab { padding: 0 20px; - z-index: 100; + z-index: 99; margin-bottom: 0; min-height: $header-height; background-color: #fff; diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss index b141928f706f..194bd8039303 100644 --- a/app/assets/stylesheets/framework/sidebar.scss +++ b/app/assets/stylesheets/framework/sidebar.scss @@ -45,19 +45,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 +70,7 @@ width: 158px; float: left; margin: 0; - margin-left: 50px; + margin-left: 14px; font-size: 19px; line-height: 41px; font-weight: normal; @@ -192,7 +179,16 @@ } @mixin expanded-sidebar { - padding-left: $sidebar_width; + + // when the screen is small enough + @media (max-width: $screen-md-max) { + padding-left: $sidebar_collapsed_width; + } + + // when the screen is big enough + @media(min-width: $screen-md-max) { + padding-left: $sidebar_width; + } .sidebar-wrapper { width: $sidebar_width; @@ -213,14 +209,6 @@ } } -@mixin expanded-gutter { - padding-right: $gutter_width; -} - -@mixin collapsed-gutter { - padding-right: $sidebar_collapsed_width; -} - @mixin collapsed-sidebar { padding-left: $sidebar_collapsed_width; @@ -287,47 +275,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; +} -- GitLab From c69d478d79a96cc57a83b7d2820a472a7e3ed147 Mon Sep 17 00:00:00 2001 From: Alfredo Sumaran Date: Tue, 16 Feb 2016 16:05:53 -0500 Subject: [PATCH 2/6] Add padding to prevent content overlapping --- app/assets/stylesheets/framework/sidebar.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss index 194bd8039303..84d8d510b983 100644 --- a/app/assets/stylesheets/framework/sidebar.scss +++ b/app/assets/stylesheets/framework/sidebar.scss @@ -179,6 +179,7 @@ } @mixin expanded-sidebar { + padding-right: $sidebar_collapsed_width; // when the screen is small enough @media (max-width: $screen-md-max) { @@ -211,6 +212,7 @@ @mixin collapsed-sidebar { padding-left: $sidebar_collapsed_width; + padding-right: $sidebar_collapsed_width; .sidebar-wrapper { width: $sidebar_collapsed_width; -- GitLab From 2ea60eb7aa9406e86cc3347e1de79927081dbc9f Mon Sep 17 00:00:00 2001 From: Alfredo Sumaran Date: Tue, 16 Feb 2016 17:04:01 -0500 Subject: [PATCH 3/6] Update scrollbars after toggle sidebar --- app/assets/javascripts/sidebar.js.coffee | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/app/assets/javascripts/sidebar.js.coffee b/app/assets/javascripts/sidebar.js.coffee index ae59480af9e6..cff309c5972e 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 + ) -- GitLab From 160eafe1a78b1c88e6306e2e1be7968a6cedfea3 Mon Sep 17 00:00:00 2001 From: Alfredo Sumaran Date: Mon, 22 Feb 2016 15:32:45 -0500 Subject: [PATCH 4/6] Set window_size to 1366*768 --- features/support/capybara.rb | 2 +- spec/support/capybara.rb | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/features/support/capybara.rb b/features/support/capybara.rb index 38069ff8835c..f33379f76c92 100644 --- a/features/support/capybara.rb +++ b/features/support/capybara.rb @@ -6,7 +6,7 @@ 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 a698f484df19..65d59e6813cb 100644 --- a/spec/support/capybara.rb +++ b/spec/support/capybara.rb @@ -7,7 +7,7 @@ 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 -- GitLab From 6c0b20b8d8a824d0de73dc2d7f45217699ee0eab Mon Sep 17 00:00:00 2001 From: Alfredo Sumaran Date: Mon, 22 Feb 2016 15:33:04 -0500 Subject: [PATCH 5/6] Adjust left sidebar to content --- app/assets/stylesheets/framework/sidebar.scss | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss index 84d8d510b983..80d39897114e 100644 --- a/app/assets/stylesheets/framework/sidebar.scss +++ b/app/assets/stylesheets/framework/sidebar.scss @@ -179,8 +179,6 @@ } @mixin expanded-sidebar { - padding-right: $sidebar_collapsed_width; - // when the screen is small enough @media (max-width: $screen-md-max) { padding-left: $sidebar_collapsed_width; @@ -212,7 +210,6 @@ @mixin collapsed-sidebar { padding-left: $sidebar_collapsed_width; - padding-right: $sidebar_collapsed_width; .sidebar-wrapper { width: $sidebar_collapsed_width; @@ -277,6 +274,16 @@ background: #f2f6f7; } +.page-gutter { + &.right-sidebar-expanded { + padding-right: $gutter_width; + } + + &.right-sidebar-collapsed { + padding-right: $gutter_collapsed_width; + } +} + .page-sidebar-collapsed { @include collapsed-sidebar; } -- GitLab From 608012629cc90337aba6c5bd4b2b73b530091fb0 Mon Sep 17 00:00:00 2001 From: Alfredo Sumaran Date: Mon, 22 Feb 2016 19:59:22 -0500 Subject: [PATCH 6/6] Fix failing spec --- features/project/shortcuts.feature | 1 - 1 file changed, 1 deletion(-) diff --git a/features/project/shortcuts.feature b/features/project/shortcuts.feature index 10e7c2346105..1144ea2e133f 100644 --- a/features/project/shortcuts.feature +++ b/features/project/shortcuts.feature @@ -12,7 +12,6 @@ Feature: Project Shortcuts @javascript Scenario: Navigate to commits tab - Given I visit my project's files page Given I press "g" and "c" Then the active main tab should be Commits -- GitLab