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

Increased speed of sidebar transition

Browse source
This commit is contained in:
Phil Hughes 2016-06-15 18:14:20 +01:00
parent e3529d5432
commit 9d74eb4622
5 changed files with 30 additions and 80 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -275,8 +275,12 @@ $ ->
if $.cookie('pin_nav') is 'true'
$.cookie 'pin_nav', 'false'
$('.page-with-sidebar').removeClass('page-sidebar-pinned')
$('.navbar-fixed-top').removeClass('header-pinned-nav')
$('.page-with-sidebar')
.removeClass('page-sidebar-pinned')
.toggleClass('page-sidebar-collapsed page-sidebar-expanded')
$('.navbar-fixed-top')
.removeClass('header-pinned-nav')
.toggleClass('header-collapsed header-expanded')
else
$.cookie 'pin_nav', 'true'
$('.page-with-sidebar').addClass('page-sidebar-pinned')

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

@ -3,7 +3,7 @@
*
*/
header {
transition-duration: .3s;
transition: padding $sidebar-transition-duration;
&.navbar-empty {
height: $header-height;
@ -103,9 +103,7 @@ header {
.header-content {
position: relative;
height: $header-height;
padding-right: 40px;
padding-left: 30px;
transition-duration: .3s;
@media (min-width: $screen-sm-min) {
padding-right: 0;
@ -193,18 +191,6 @@ header {
}
}
.header-collapsed {
margin-left: 0;
.header-content {
@media (min-width: $screen-sm-max) {
padding-left: 30px;
transition-duration: .3s;
}
}
}
.tanuki-shape {
transition: all 0.8s;

2
app/assets/stylesheets/framework/nav.scss
View file

@ -251,7 +251,7 @@
z-index: 11;
background: $background-color;
border-bottom: 1px solid $border-color;
transition-duration: .3s;
transition: padding $sidebar-transition-duration;
text-align: center;
.container-fluid {

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

@ -1,6 +1,6 @@
.page-with-sidebar {
padding-top: $header-height;
transition-duration: .3s;
transition: padding $sidebar-transition-duration;
.sidebar-wrapper {
position: fixed;
@ -8,7 +8,8 @@
bottom: 0;
left: 0;
height: 100%;
transition-duration: .3s;
overflow: hidden;
transition: width $sidebar-transition-duration;
}
}
@ -24,6 +25,7 @@
.content-wrapper {
width: 100%;
transition: padding $sidebar-transition-duration;
.container-fluid {
background: #fff;
@ -44,13 +46,9 @@
bottom: 0;
width: $sidebar_width;
overflow: hidden;
transition-duration: .3s;
.username {
margin-left: 10px;
font-size: 16px;
line-height: 36px;
}
font-size: 16px;
line-height: 36px;
transition: width $sidebar-transition-duration, padding $sidebar-transition-duration;
}
@ -68,8 +66,7 @@
position: absolute;
top: 50px;
bottom: 65px;
width: 100%;
transition-duration: .3s;
width: $sidebar_width;
overflow-y: auto;
overflow-x: hidden;
@ -99,11 +96,9 @@
outline: none;
white-space: nowrap;
&:hover {
text-decoration: none;
}
&:active, &:focus {
&:hover,
&:active,
&:focus {
text-decoration: none;
}
@ -115,10 +110,6 @@
svg {
margin-right: 13px;
}
&.back-link i {
transition-duration: .3s;
}
}
}
@ -129,20 +120,12 @@
}
}
.sidebar-subnav {
margin-left: 0;
padding-left: 0;
li {
list-style: none;
}
}
.collapse-nav {
width: 100%;
position: absolute;;
position: absolute;
top: 0;
left: 0;
min-height: 50px;
padding: 5px 0;
font-size: 18px;
background: transparent;
@ -187,38 +170,6 @@
.sidebar-wrapper {
width: 0;
.nav-sidebar {
width: 0;
li {
width: auto;
a {
span {
display: none;
}
}
}
}
.collapse-nav a {
width: 0;
i {
display: none;
}
}
.sidebar-user {
width: 0;
padding-left: 0;
padding-right: 0;
.username {
display: none;
}
}
}
}
@ -240,6 +191,14 @@
header.header-pinned-nav {
@media (min-width: $screen-lg-min) {
padding-left: ($sidebar_width + $gl-padding);
.side-nav-toggle {
display: none;
}
.header-content {
padding-left: 0;
}
}
}

1
app/assets/stylesheets/framework/variables.scss
View file

@ -6,6 +6,7 @@ $sidebar_width: 220px;
$gutter_collapsed_width: 62px;
$gutter_width: 290px;
$gutter_inner_width: 258px;
$sidebar-transition-duration: .15s;
/*
* UI elements