Commit 329fd857 authored by Jacob Schatz's avatar Jacob Schatz Committed by Rémy Coutable

Merge branch 'issue-sidebar-overlap' into 'master'

Issue sidebar overlaps on tablet

Closes #14180

![Screen_Shot_2016-03-18_at_13.10.53](/uploads/d1e81778740a034aa98c881a70e55254/Screen_Shot_2016-03-18_at_13.10.53.png)

See merge request !3299
parent 9dc8f3d4
...@@ -4,6 +4,7 @@ v 8.6.3 (unreleased) ...@@ -4,6 +4,7 @@ v 8.6.3 (unreleased)
v 8.6.2 v 8.6.2
- Fix dropdown alignment. !3298 - Fix dropdown alignment. !3298
- Fix issuable sidebar overlaps on tablet. !3299
v 8.6.1 v 8.6.1
- Add option to reload the schema before restoring a database backup. !2807 - Add option to reload the schema before restoring a database backup. !2807
......
...@@ -4,7 +4,6 @@ expanded = 'page-sidebar-expanded' ...@@ -4,7 +4,6 @@ expanded = 'page-sidebar-expanded'
toggleSidebar = -> toggleSidebar = ->
$('.page-with-sidebar').toggleClass("#{collapsed} #{expanded}") $('.page-with-sidebar').toggleClass("#{collapsed} #{expanded}")
$('header').toggleClass("header-collapsed header-expanded") $('header').toggleClass("header-collapsed header-expanded")
$('.sidebar-wrapper').toggleClass("sidebar-collapsed sidebar-expanded")
$('.toggle-nav-collapse i').toggleClass("fa-angle-right fa-angle-left") $('.toggle-nav-collapse i').toggleClass("fa-angle-right fa-angle-left")
$.cookie("collapsed_nav", $('.page-with-sidebar').hasClass(collapsed), { path: '/' }) $.cookie("collapsed_nav", $('.page-with-sidebar').hasClass(collapsed), { path: '/' })
......
#logo {
z-index: 2;
position: absolute;
width: 58px;
cursor: pointer;
}
.page-with-sidebar { .page-with-sidebar {
padding-top: $header-height; padding-top: $header-height;
transition-duration: .3s; transition-duration: .3s;
...@@ -18,24 +25,6 @@ ...@@ -18,24 +25,6 @@
position: absolute; position: absolute;
left: 0; left: 0;
} }
#logo {
z-index: 2;
position: absolute;
width: 58px;
cursor: pointer;
}
&.right-sidebar-expanded {
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
padding-right: 0;
/* Small devices (tablets, 768px and up) */
@media (min-width: $screen-sm-min) {
padding-right: $gutter_width;
}
}
} }
.sidebar-wrapper { .sidebar-wrapper {
...@@ -202,53 +191,27 @@ ...@@ -202,53 +191,27 @@
} }
} }
@mixin expanded-sidebar { .collapse-nav a {
padding-left: $sidebar_collapsed_width;
@media (min-width: $screen-md-min) {
padding-left: $sidebar_width;
}
&.right-sidebar-collapsed {
/* Extra small devices (phones, less than 768px) */
padding-right: 0;
/* Small devices (tablets, 768px and up) */
@media (min-width: $screen-sm-min) {
padding-right: $sidebar_collapsed_width;
}
}
.sidebar-wrapper {
width: $sidebar_width;
.nav-sidebar {
width: $sidebar_width; width: $sidebar_width;
} position: fixed;
bottom: 0;
.nav-sidebar li a{ left: 0;
width: 230px; font-size: 13px;
background: transparent;
height: 40px;
text-align: center;
line-height: 40px;
transition-duration: .3s;
outline: none;
&.back-link { &:hover {
i { text-decoration: none;
opacity: 0;
}
}
}
} }
} }
@mixin collapsed-sidebar { .page-sidebar-collapsed {
padding-left: $sidebar_collapsed_width; padding-left: $sidebar_collapsed_width;
&.right-sidebar-collapsed {
/* Extra small devices (phones, less than 768px) */
padding-right: 0;
/* Small devices (tablets, 768px and up) */
@media (min-width: $screen-sm-min) {
padding-right: $sidebar_collapsed_width;
}
}
.sidebar-wrapper { .sidebar-wrapper {
width: $sidebar_collapsed_width; width: $sidebar_collapsed_width;
...@@ -293,35 +256,48 @@ ...@@ -293,35 +256,48 @@
} }
} }
.collapse-nav a { .page-sidebar-expanded {
padding-left: $sidebar_collapsed_width;
@media (min-width: $screen-md-min) {
padding-left: $sidebar_width;
}
.sidebar-wrapper {
width: $sidebar_width; width: $sidebar_width;
position: fixed;
bottom: 0;
left: 0;
font-size: 13px;
background: transparent;
height: 40px;
text-align: center;
line-height: 40px;
transition-duration: .3s;
outline: none;
}
.collapse-nav a:hover { .nav-sidebar {
text-decoration: none; width: $sidebar_width;
background: #f2f6f7; }
.nav-sidebar li a {
width: 230px;
&.back-link {
i {
opacity: 0;
}
}
}
}
} }
.page-sidebar-collapsed { .right-sidebar-collapsed {
/* Extra small devices (phones, less than 768px) */
@include collapsed-sidebar;
padding-right: 0; padding-right: 0;
/* Small devices (tablets, 768px and up) */
@media (min-width: $screen-sm-min) { @media (min-width: $screen-sm-min) {
@include collapsed-sidebar; padding-right: $sidebar_collapsed_width;
} }
} }
.page-sidebar-expanded { .right-sidebar-expanded {
@include expanded-sidebar; padding-right: 0;
@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
padding-right: $sidebar_collapsed_width;
}
@media (min-width: $screen-md-min) {
padding-right: $gutter_width;
}
} }
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