From a3713050f712c4bb80b496186e8499a4fc879d5e Mon Sep 17 00:00:00 2001 From: Alfredo Sumaran Date: Tue, 23 Feb 2016 15:28:21 -0500 Subject: [PATCH] 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 dde71f33d2e..0651bd20d26 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 93d74bf30f1..c2676cd1cc3 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 e2b978b50bd..e0ccd6f100f 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;