kotovalexarian-likes-gitlab/gitlab-org--gitlab-foss
1
0
Fork 0
Code Releases Activity

Ability to toggle sidebar on smaller screens

Browse source
This commit is contained in:
Alfredo Sumaran 2016-02-23 15:28:21 -05:00
parent c684bcc8b7
commit a3713050f7
3 changed files with 12 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
app/assets/javascripts/application.js.coffee
View file

@ -188,13 +188,9 @@ $ ->
$container.remove() $container.remove()
$('.navbar-toggle').on 'click', -> $('.navbar-toggle').on 'click', ->
$this = $(this);
$('.header-content .title').toggle() $('.header-content .title').toggle()
$('.header-content .navbar-collapse').toggle() $('.header-content .navbar-collapse').toggle()
if $this.toggleClass('active').hasClass('active') $('.navbar-toggle').toggleClass('active')
$this.closest('header').css('z-index',100)
else
$this.closest('header').css('z-index',99)
# Show/hide comments on diff # Show/hide comments on diff
$("body").on "click", ".js-toggle-diff-comments", (e) -> $("body").on "click", ".js-toggle-diff-comments", (e) ->

10
app/assets/stylesheets/framework/header.scss
View file

@ -23,7 +23,7 @@ header {
&.navbar-gitlab { &.navbar-gitlab {
padding: 0 20px; padding: 0 20px;
z-index: 99; z-index: 100;
margin-bottom: 0; margin-bottom: 0;
min-height: $header-height; min-height: $header-height;
background-color: #fff; background-color: #fff;
@ -141,8 +141,12 @@ header {
} }
@media (max-width: $screen-md-max) { @media (max-width: $screen-md-max) {
.header-collapsed, .header-expanded { .header-collapsed {
@include collapsed-header; margin-left: $sidebar_collapsed_width;
}
.header-expanded {
margin-left: $sidebar_width;
} }
} }

12
app/assets/stylesheets/framework/sidebar.scss
View file

@ -183,20 +183,12 @@
} }
@mixin expanded-sidebar { @mixin expanded-sidebar {
padding-left: $sidebar_width;
&.right-sidebar-collapsed { &.right-sidebar-collapsed {
padding-right: $sidebar_collapsed_width; 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 { .sidebar-wrapper {
width: $sidebar_width; width: $sidebar_width;