Increased speed of sidebar transition

5 files changed, 30 insertions, 80 deletions

diff --git a/app/assets/javascripts/application.js.coffee b/app/assets/javascripts/application.js.coffee
index 030ef3a60b7..704911aa13d 100644
--- a/app/assets/javascripts/application.js.coffee
+++ b/app/assets/javascripts/application.js.coffee
@@ -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')
diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index 595b541379a..dca4dbb9f7d 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -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;
 
diff --git a/app/assets/stylesheets/framework/nav.scss b/app/assets/stylesheets/framework/nav.scss
index 829222509f0..c1a860b0d74 100644
--- a/app/assets/stylesheets/framework/nav.scss
+++ b/app/assets/stylesheets/framework/nav.scss
@@ -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 {
diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss
index 64b2725abfa..1ac11989d7f 100644
--- a/app/assets/stylesheets/framework/sidebar.scss
+++ b/app/assets/stylesheets/framework/sidebar.scss
@@ -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;
+    }
   }
 }
 
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 752d8ec8788..670edb9300d 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -6,6 +6,7 @@ $sidebar_width: 220px;
 $gutter_collapsed_width: 62px;
 $gutter_width: 290px;
 $gutter_inner_width: 258px;
+$sidebar-transition-duration: .15s;
 
 /*
  * UI elements