Merge branch 'animation-sidebar' into 'master'

Animation of Sidebar (video in here) Edited the CSS of header and sidebar; added a new div of gitlab-logo-container to the html to make things easier. The transition-duration is set to 0.3s and when the nav bar expands, it opens up over the text, essentially revealing hidden text. [animation-sidebar-2.mov](https://gitlab.com/gitlab-org/gitlab-ce/uploads/b15996a256d6bed03a19c68549d116e4/animation-sidebar-2.mov) /cc @JobV @nicolas2 See merge request !849

Merge branch 'animation-sidebar' into 'master'
615257b9 · Dmitriy Zaporozhets · f189c36d · 95e2ca76 · 615257b9 · 615257b9
Commit 615257b9 authored Jun 23, 2015 by Dmitriy Zaporozhets
4 changed files
--- a/app/assets/stylesheets/generic/header.scss
+++ b/app/assets/stylesheets/generic/header.scss
@@ -3,6 +3,8 @@
 *
 */
 header {
+  transition-duration: .3s;
+
  &.navbar-empty {
    background: #FFF;
    border-bottom: 1px solid #EEE;
@@ -67,28 +69,34 @@ header {
    float: left;
    height: $header-height;
    width: $sidebar_width;
+    transition-duration: .3s;

    a {
      float: left;
      height: $header-height;
      width: 100%;
      padding: ($header-height - 36 ) / 2 8px;
-
-      h3 {
-        width: 158px;
-        float: left;
-        margin: 0;
-        margin-left: 14px;
-        font-size: 18px;
-        line-height: $header-height - 14;
-        font-weight: normal;
-      }
+      overflow: hidden;

      img {
        width: 36px;
        height: 36px;
        float: left;
      }
+
+      .gitlab-text-container {
+        width: 230px;
+
+        h3 {
+          width: 158px;
+          float: left;
+          margin: 0;
+          margin-left: 14px;
+          font-size: 18px;
+          line-height: $header-height - 14;
+          font-weight: normal;
+        }
+      }
    }

    &:hover {

--- a/app/assets/stylesheets/generic/sidebar.scss
+++ b/app/assets/stylesheets/generic/sidebar.scss
@@ -4,12 +4,14 @@
    top: 0;
    left: 0;
    height: 100%;
+    transition-duration: .3s;
  }
 }

 .sidebar-wrapper {
  z-index: 99;
  background: $background-color;
+  transition-duration: .3s;
 }

 .content-wrapper {
@@ -19,8 +21,10 @@
 }

 .nav-sidebar {
+  transition-duration: .3s;
  margin: 0;
  list-style: none;
+  overflow: hidden;

  &.navbar-collapse {
    padding: 0px !important;
@@ -35,9 +39,6 @@
 }

 .nav-sidebar li {
-}
-
-.nav-sidebar li {
  &.separate-item {
    padding-top: 10px;
    margin-top: 10px;
@@ -48,7 +49,7 @@
    display: block;
    text-decoration: none;
    padding: 8px 15px;
-    font-size: 13px;
+    font-size: 14px;
    line-height: 20px;
    padding-left: 16px;

@@ -79,6 +80,7 @@

 @mixin expanded-sidebar {
  padding-left: $sidebar_width;
+  transition-duration: .3s;

  .sidebar-wrapper {
    width: $sidebar_width;
@@ -89,6 +91,10 @@
      top: $header-height;
      width: $sidebar_width;
    }
+
+    .nav-sidebar li a{
+      width: 230px;
+    }
  }

  .content-wrapper {
@@ -98,6 +104,7 @@

 @mixin folded-sidebar {
  padding-left: 50px;
+  transition-duration: .3s;

  .sidebar-wrapper {
    width: $sidebar_collapsed_width;
@@ -109,10 +116,10 @@
      width: $sidebar_collapsed_width;

      li a {
-        padding-left: 18px;
        font-size: 14px;
        padding: 8px 15px;
-        text-align: center;
+        text-align: left;
+        padding-left: 16px;


        & > span {
@@ -144,6 +151,7 @@
  height: 28px;
  text-align: center;
  line-height: 28px;
+  transition-duration: .3s;
 }

 .collapse-nav a:hover {
@@ -180,8 +188,10 @@
  bottom: 0;
  width: 100%;
  padding: 10px;
+  overflow: hidden;

  .username {
    margin-top: 5px;
+    width: 230px;
  }
 }
--- a/app/views/layouts/header/_default.html.haml
+++ b/app/views/layouts/header/_default.html.haml
@@ -3,7 +3,8 @@
    .header-logo
      = link_to root_path, class: 'home', title: 'Dashboard', id: 'js-shortcuts-home', data: {toggle: 'tooltip', placement: 'bottom'} do
        = brand_header_logo
-        %h3 GitLab
+        .gitlab-text-container
+          %h3 GitLab
    .header-content
      %button.navbar-toggle{type: 'button'}
        %span.sr-only Toggle navigation

--- a/app/views/layouts/header/_public.html.haml
+++ b/app/views/layouts/header/_public.html.haml
@@ -3,7 +3,8 @@
    .header-logo
      = link_to explore_root_path, class: "home" do
        = brand_header_logo
-        %h3 GitLab
+        .gitlab-text-container
+          %h3 GitLab
    .header-content
      - unless current_controller?('sessions')
        .pull-right