Commit c37e5bc6 authored by Jacob Schatz's avatar Jacob Schatz Committed by Alfredo Sumaran

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
parent 7cc4b739
......@@ -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) ->
......
......@@ -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;
......
......@@ -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 {
// 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 {
.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 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 {
.page-sidebar-expanded {
@include expanded-sidebar;
}
}
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment