Revert side nav to full width; remove border under nav; remove tooltips on nav links; stop page content shifting with side nav; put project nav in container

5 files changed, 17 insertions, 95 deletions

diff --git a/app/assets/stylesheets/framework/gitlab-theme.scss b/app/assets/stylesheets/framework/gitlab-theme.scss
index bec0e514963..245e8b285e9 100644
--- a/app/assets/stylesheets/framework/gitlab-theme.scss
+++ b/app/assets/stylesheets/framework/gitlab-theme.scss
@@ -8,29 +8,6 @@
  */
 @mixin gitlab-theme($color-light, $color, $color-darker, $color-dark) {
   .page-with-sidebar {
-    .gitlab-text-container {
-      background: $color-darker;
-
-      a {
-        color: $color-light;
-
-        h3 {
-          color: $color-light;
-        }
-      }
-
-      &:hover {
-        background-color: $color-dark;
-        a {
-          color: $white-light;
-          text-decoration: none;
-
-          h3 {
-            color: $white-light;
-          }
-        }
-      }
-    }
 
     .collapse-nav a {
       color: $white-light;
diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index 7ccd25bc1ba..824f5cd21b4 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -28,7 +28,6 @@ header {
     height: $header-height;
     background-color: $background-color;
     border: none;
-    border-bottom: 1px solid $border-color;
 
     @media (max-width: $screen-xs-min) {
       padding: 0 16px;
@@ -132,6 +131,10 @@ header {
       transition-duration: .3s;
       z-index: 999;
 
+      &:hover {
+        cursor: pointer;
+      }
+
       @media (max-width: $screen-xs-max) {
         right: 25px;
         left: auto;
@@ -141,7 +144,7 @@ header {
     .title {
       margin: 0;
       font-size: 19px;
-      max-width: 250px;
+      max-width: 400px;
       display: inline-block;
       line-height: $header-height;
       font-weight: normal;
@@ -151,8 +154,8 @@ header {
       vertical-align: top;
       white-space: nowrap;
 
-      @media (max-width: $screen-xs-max) {
-        max-width: 220px;
+      @media (max-width: $screen-sm-max) {
+        max-width: 190px;
       }
 
       a {
diff --git a/app/assets/stylesheets/framework/nav.scss b/app/assets/stylesheets/framework/nav.scss
index 75f44d81614..793d4e0479f 100644
--- a/app/assets/stylesheets/framework/nav.scss
+++ b/app/assets/stylesheets/framework/nav.scss
@@ -350,12 +350,10 @@
   }
 
   .nav-control {
-    padding-left: 0;
-    transition-duration: .3s;
 
     .fade-right {
       @media (min-width: $screen-xs-max) {
-        right: 67px;
+        right: 68px;
       }
       @media (max-width: $screen-xs-min) {
         right: 0;
@@ -364,23 +362,6 @@
   }
 }
 
-.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;
 
diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss
index e461550984a..a96ce022309 100644
--- a/app/assets/stylesheets/framework/sidebar.scss
+++ b/app/assets/stylesheets/framework/sidebar.scss
@@ -35,31 +35,11 @@
 }
 
 .sidebar-wrapper {
-  .gitlab-text-container {
-    height: $header-height;
-    padding: 0 19px;
-    width: $sidebar_width;
-    position: fixed;
-    z-index: 999;
-    overflow: hidden;
-    transition-duration: .3s;
-
-    &:hover {
-      background-color: #eee;
-    }
-
-    h3 {
-      font-size: 19px;
-      line-height: 50px;
-      font-weight: normal;
-      margin: 0;
-    }
-  }
 
   .sidebar-user {
     padding: 15px 22px;
     position: fixed;
-    bottom: 40px;
+    bottom: 0;
     width: $sidebar_width;
     overflow: hidden;
     transition-duration: .3s;
@@ -104,10 +84,10 @@
     }
 
     a {
-      text-align: center;
-      padding: 8px;
+      width: $sidebar_width;
+      padding: 7px 15px 7px 23px;
       font-size: $gl-font-size;
-      color: $gray;
+      line-height: 24px;
       display: block;
       text-decoration: none;
       font-weight: normal;
@@ -125,10 +105,9 @@
         font-size: 16px;
       }
 
-      .nav-link-text {
-        margin-top: 3px;
-        font-size: 13px;
-        line-height: 18px;
+      i,
+      svg {
+        margin-right: 13px;
       }
 
       &.back-link i {
@@ -150,7 +129,7 @@
 .collapse-nav a {
   width: $sidebar_width;
   position: fixed;
-  bottom: 0;
+  top: 0;
   left: 0;
   font-size: 13px;
   background: transparent;
@@ -177,15 +156,6 @@
   .sidebar-wrapper {
     width: 0;
 
-    .gitlab-text-container {
-      width: 0;
-      padding: 0;
-
-      h3 {
-        display: none;
-      }
-    }
-
     .nav-sidebar {
       width: $sidebar_collapsed_width;
 
@@ -217,7 +187,6 @@
 }
 
 .page-sidebar-expanded {
-  padding-left: $sidebar_width;
 
   @media (max-width: $screen-sm-max) {
     padding-left: 0;
@@ -240,14 +209,6 @@
       }
     }
   }
-
-  .layout-nav {
-    padding-right: 0;
-
-    @media (min-width: $screen-md-min) {
-      padding-right: $sidebar_width;
-    }
-  }
 }
 
 .right-sidebar-collapsed {
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 847b2f80bdf..752d8ec8788 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -2,7 +2,7 @@
  * Layout
  */
 $sidebar_collapsed_width: 62px;
-$sidebar_width: 90px;
+$sidebar_width: 220px;
 $gutter_collapsed_width: 62px;
 $gutter_width: 290px;
 $gutter_inner_width: 258px;