From c37e5bc69d2b6f679c53d5edbc1bea27dbc262ac Mon Sep 17 00:00:00 2001 From: Jacob Schatz Date: Tue, 26 Jan 2016 19:09:55 -0500 Subject: [PATCH 1/7] 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 13047483b3180c0966fffdb60dfe687820a72818 Mon Sep 17 00:00:00 2001 From: Alfredo Sumaran Date: Tue, 16 Feb 2016 17:04:01 -0500 Subject: [PATCH 2/7] 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 c684bcc8b7b9361e65197841db69d82176206b88 Mon Sep 17 00:00:00 2001 From: Alfredo Sumaran Date: Tue, 23 Feb 2016 15:15:24 -0500 Subject: [PATCH 3/7] Fixes padding when right sidebar is not present --- app/assets/stylesheets/framework/sidebar.scss | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss index 194bd8039303..e2b978b50bdb 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 { @@ -179,6 +183,9 @@ } @mixin expanded-sidebar { + &.right-sidebar-collapsed { + padding-right: $sidebar_collapsed_width; + } // when the screen is small enough @media (max-width: $screen-md-max) { @@ -212,6 +219,10 @@ @mixin collapsed-sidebar { padding-left: $sidebar_collapsed_width; + &.right-sidebar-collapsed { + padding-right: $sidebar_collapsed_width; + } + .sidebar-wrapper { width: $sidebar_collapsed_width; -- GitLab From a3713050f712c4bb80b496186e8499a4fc879d5e Mon Sep 17 00:00:00 2001 From: Alfredo Sumaran Date: Tue, 23 Feb 2016 15:28:21 -0500 Subject: [PATCH 4/7] Ability to toggle sidebar on smaller screens --- app/assets/javascripts/application.js.coffee | 10 +++------- app/assets/stylesheets/framework/header.scss | 10 +++++++--- app/assets/stylesheets/framework/sidebar.scss | 12 ++---------- 3 files changed, 12 insertions(+), 20 deletions(-) diff --git a/app/assets/javascripts/application.js.coffee b/app/assets/javascripts/application.js.coffee index dde71f33d2e1..0651bd20d263 100644 --- a/app/assets/javascripts/application.js.coffee +++ b/app/assets/javascripts/application.js.coffee @@ -188,13 +188,9 @@ $ -> $container.remove() $('.navbar-toggle').on 'click', -> - $this = $(this); $('.header-content .title').toggle() $('.header-content .navbar-collapse').toggle() - if $this.toggleClass('active').hasClass('active') - $this.closest('header').css('z-index',100) - else - $this.closest('header').css('z-index',99) + $('.navbar-toggle').toggleClass('active') # Show/hide comments on diff $("body").on "click", ".js-toggle-diff-comments", (e) -> @@ -214,7 +210,7 @@ $ -> $this = $(this) $this.attr 'value', $this.val() return - + $(document) .off 'keyup', 'input[type="search"]' .on 'keyup', 'input[type="search"]' , (e) -> @@ -257,7 +253,7 @@ $ -> $('.page-with-sidebar') .removeClass('right-sidebar-collapsed') .addClass('right-sidebar-expanded') - $.cookie("collapsed_gutter", + $.cookie("collapsed_gutter", $('.right-sidebar') .hasClass('right-sidebar-collapsed'), { path: '/' }) diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss index 93d74bf30f18..c2676cd1cc39 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: 99; + z-index: 100; margin-bottom: 0; min-height: $header-height; background-color: #fff; @@ -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 e2b978b50bdb..e0ccd6f100fa 100644 --- a/app/assets/stylesheets/framework/sidebar.scss +++ b/app/assets/stylesheets/framework/sidebar.scss @@ -183,20 +183,12 @@ } @mixin expanded-sidebar { + padding-left: $sidebar_width; + &.right-sidebar-collapsed { padding-right: $sidebar_collapsed_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; -- GitLab From 78bf02e93dfece32767b49737f3dd1a40afb70af Mon Sep 17 00:00:00 2001 From: Alfredo Sumaran Date: Mon, 22 Feb 2016 15:32:45 -0500 Subject: [PATCH 5/7] 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 5507c24ffd249c52a9673c618eed525b34174cde Mon Sep 17 00:00:00 2001 From: Alfredo Sumaran Date: Mon, 22 Feb 2016 19:59:22 -0500 Subject: [PATCH 6/7] 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 From be0f97a6d4a170aaf181f00078367b356015292e Mon Sep 17 00:00:00 2001 From: Alfredo Sumaran Date: Tue, 23 Feb 2016 20:04:20 -0500 Subject: [PATCH 7/7] Initialize navigation shortcuts on project's files page --- app/assets/javascripts/dispatcher.js.coffee | 1 + features/project/shortcuts.feature | 1 + 2 files changed, 2 insertions(+) diff --git a/app/assets/javascripts/dispatcher.js.coffee b/app/assets/javascripts/dispatcher.js.coffee index b17f8e514701..67a92d822e0e 100644 --- a/app/assets/javascripts/dispatcher.js.coffee +++ b/app/assets/javascripts/dispatcher.js.coffee @@ -88,6 +88,7 @@ class Dispatcher when 'groups:new', 'groups:edit', 'admin:groups:edit', 'admin:groups:new' new GroupAvatar() when 'projects:tree:show' + shortcut_handler = new ShortcutsNavigation() new TreeView() when 'projects:find_file:show' shortcut_handler = true diff --git a/features/project/shortcuts.feature b/features/project/shortcuts.feature index 1144ea2e133f..10e7c2346105 100644 --- a/features/project/shortcuts.feature +++ b/features/project/shortcuts.feature @@ -12,6 +12,7 @@ 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