Fix logo at all screen widths, update sidebar text

app/assets/javascripts/application.js.coffee

@@ -207,6 +207,7 @@ $ ->
 
   $('.navbar-toggle').on 'click', ->
     $('.header-content .title').toggle()
+    $('.header-content .header-logo').toggle()
     $('.header-content .navbar-collapse').toggle()
     $('.navbar-toggle').toggleClass('active')
     $('.navbar-toggle i').toggleClass("fa-angle-right fa-angle-left")
@@ -258,7 +259,7 @@ $ ->
 
   checkInitialSidebarSize = ->
     bootstrapBreakpoint = bp.getBreakpointSize()
-    if bootstrapBreakpoint is "xs"
+    if bootstrapBreakpoint is "xs" or "sm"
       $(document).trigger('breakpoint:change', [bootstrapBreakpoint])
 
   $(window)

app/assets/stylesheets/framework/gitlab-theme.scss

@@ -8,7 +8,7 @@
  */
 @mixin gitlab-theme($color-light, $color, $color-darker, $color-dark) {
   .page-with-sidebar {
-    .header-logo {
+    .gitlab-text-container {
       background: $color-darker;
 
       a {
@@ -23,6 +23,7 @@
         background-color: $color-dark;
         a {
           color: $white-light;
+          text-decoration: none;
 
           h3 {
             color: $white-light;

app/assets/stylesheets/framework/header.scss

@@ -109,15 +109,17 @@ header {
     position: relative;
     height: $header-height;
     padding-right: 40px;
-
-    @media (max-width: $screen-xs-min) {
-      padding-left: 40px;
-    }
+    padding-left: 30px;
+    transition-duration: .3s;
 
     @media (min-width: $screen-sm-min) {
       padding-right: 0;
     }
 
+    @media (max-width: $screen-sm-max) {
+      padding-right: 30px;
+    }
+
     .dropdown-menu {
       margin-top: -5px;
     }
@@ -127,6 +129,13 @@ header {
       left: 50%;
       margin-left: -18px;
       top: 7px;
+      transition-duration: .3s;
+      z-index: 999;
+
+      @media (max-width: $screen-sm-min) {
+        right: 25px;
+        left: auto;
+      }
     }
 
     .title {
@@ -142,6 +151,10 @@ header {
       vertical-align: top;
       white-space: nowrap;
 
+      @media (max-width: $screen-sm-min) {
+        max-width: 220px;
+      }
+
       a {
         color: $gl-text-color;
         &:hover {
@@ -169,6 +182,10 @@ header {
     .navbar-collapse {
       float: right;
       border-top: none;
+
+      @media (max-width: $screen-sm-min) {
+        float: none;
+      }
     }
   }
 
@@ -185,17 +202,11 @@ header {
   margin-left: 0;
 
   .header-content {
+
+    @media (min-width: $screen-sm-max) {
       padding-left: 30px;
       transition-duration: .3s;
     }
-}
-
-.header-expanded {
-  margin-left: 0;
-
-  .header-content {
-    margin-left: $sidebar_width;
-    transition-duration: .3s;
   }
 }
 

app/assets/stylesheets/framework/nav.scss

@@ -350,6 +350,8 @@
   }
 
   .nav-control {
+    padding-left: 0;
+    transition-duration: .3s;
 
     .fade-right {
       @media (min-width: $screen-xs-max) {
@@ -362,6 +364,23 @@
   }
 }
 
+.page-sidebar-collapsed {
+
+  .nav-control {
+    @media (min-width: $screen-md-min) {
+      padding-left: 32px;
+      transition-duration: .3s;
+    }
+  }
+
+  .layout-nav {
+
+    @media (max-width: $screen-sm-min) {
+      padding-left: 0;
+    }
+  }
+}
+
 .scrolling-tabs-container {
   position: relative;
 

app/assets/stylesheets/framework/sidebar.scss

@@ -35,9 +35,9 @@
 }
 
 .sidebar-wrapper {
-  .header-logo {
+  .gitlab-text-container {
     height: $header-height;
-    padding: 8px 26px;
+    padding: 0 19px;
     width: $sidebar_width;
     position: fixed;
     z-index: 999;
@@ -47,6 +47,13 @@
     &:hover {
       background-color: #eee;
     }
+
+    h3 {
+      font-size: 19px;
+      line-height: 50px;
+      font-weight: normal;
+      margin: 0;
+    }
   }
 
   .sidebar-user {
@@ -66,8 +73,19 @@
   }
 }
 
+
+.tanuki-shape {
+  transition: all 0.8s;
+
+  &:hover, &.highlight {
+    fill: rgb(255, 255, 255);
+    transition: all 0.1s;
+  }
+}
+
+
 .nav-sidebar {
-  margin-top: 22px;
+  margin-top: 22 + $header-height;
   margin-bottom: 116px;
   transition-duration: .3s;
   list-style: none;
@@ -159,22 +177,14 @@
   .sidebar-wrapper {
     width: 0;
 
-    .header-logo {
+    .gitlab-text-container {
       width: 0;
-      padding: 8px 0;
-
-      a {
-        padding-left: ($sidebar_collapsed_width - 36) / 2;
+      padding: 0;
 
-        .gitlab-text-container {
+      h3 {
         display: none;
       }
     }
-    }
-
-    #logo {
-      display: none;
-    }
 
     .nav-sidebar {
       width: $sidebar_collapsed_width;
@@ -206,24 +216,10 @@
   }
 }
 
-.gitlab-text-container {
-  height: 50px;
-  padding: 5px;
-  text-align: center;
-
-  h3 {
-    color: white;
-    margin: 0;
-    font-size: 19px;
-    line-height: 41px;
-    font-weight: normal;
-  }
-}
-
 .page-sidebar-expanded {
   padding-left: $sidebar_width;
 
-  @media (max-width: $screen-xs-min) {
+  @media (max-width: $screen-sm-max) {
     padding-left: 0;
   }
 
@@ -246,13 +242,7 @@
   }
 
   .layout-nav {
-    @media (max-width: $screen-xs-min) {
     padding-right: 0;
-    }
-
-    @media (min-width: $screen-xs-min) and (max-width: $screen-md-min) {
-      padding-right: 90px;
-    }
 
     @media (min-width: $screen-md-min) {
       padding-right: $sidebar_width;

app/assets/stylesheets/framework/variables.scss

 /*
  * Layout
  */
-$sidebar_collapsed_width: 62px;
+$sidebar_collapsed_width: 0;
 $sidebar_width: 90px;
 $gutter_collapsed_width: 62px;
 $gutter_width: 290px;

app/views/layouts/_page.html.haml

 .page-with-sidebar.page-sidebar-collapsed{ class: "#{page_gutter_class}" }
   .sidebar-wrapper.nicescroll{ class: nav_sidebar_class }
-    = link_to root_path, class: 'gitlab-text-container-link', title: 'Dashboard', id: 'js-shortcuts-home' do
     .gitlab-text-container
+      = link_to root_path, class: 'gitlab-text-container-link', title: 'Dashboard', id: 'js-shortcuts-home' do
         %h3 GitLab
 
     - if defined?(sidebar) && sidebar