Improve styling for new complex sidebar

Signed-off-by: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>

5 files changed, 31 insertions, 51 deletions

diff --git a/app/assets/stylesheets/framework/gitlab-theme.scss b/app/assets/stylesheets/framework/gitlab-theme.scss
index ad6ade1304e..795a26ce34c 100644
--- a/app/assets/stylesheets/framework/gitlab-theme.scss
+++ b/app/assets/stylesheets/framework/gitlab-theme.scss
@@ -63,7 +63,6 @@
 
         .count {
           color: $color-light;
-          background: $color-dark;
         }
       }
 
diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss
index f14433676e7..e55c9e3e429 100644
--- a/app/assets/stylesheets/framework/sidebar.scss
+++ b/app/assets/stylesheets/framework/sidebar.scss
@@ -144,7 +144,7 @@
     }
 
     a {
-      padding: 7px 15px;
+      padding: 7px 12px;
       font-size: $gl-font-size;
       line-height: 24px;
       color: $gray;
@@ -169,10 +169,12 @@
       }
 
       .count {
-        float: right;
-        background: #eee;
-        padding: 0 8px;
-        @include border-radius(6px);
+        &:before {
+          content: '(';
+        }
+        &:after {
+          content: ')';
+        }
       }
 
       &.back-link i {
@@ -288,55 +290,42 @@
   }
 }
 
-.page-sidebar-expanded {
-  .complex-sidebar {
-    display: inline-block;
+.complex-sidebar {
+  display: inline-block;
 
-    .nav-sidebar {
-      margin-bottom: 0;
-    }
+  .nav-primary {
+    width: 61px;
+    float: left;
+    border-right: 1px solid rgba(255, 255, 255, 0.1);
+    height: 100vh;
 
-    .nav-primary {
+    .nav-sidebar {
       width: 60px;
-      float: left;
 
-      .nav-sidebar {
+      li a {
         width: 60px;
 
-        li a {
-          width: 60px;
-
-          span {
-            display: none;
-          }
+        span {
+          display: none;
         }
       }
     }
+  }
 
-    .nav-secondary {
-      padding-bottom: 100px;
-      border-left: 1px solid rgba(255, 255, 255, 0.1);
-      float: left;
+  .nav-secondary {
+    float: left;
+    width: 168px;
+
+    .nav-sidebar {
       width: 168px;
 
-      .nav-sidebar {
+      li a {
         width: 168px;
 
-        li a {
-          width: 168px;
-
-          i {
-            display: none;
-          }
+        i {
+          display: none;
         }
       }
     }
   }
 }
-
-.page-sidebar-collapsed {
-  .nav-secondary {
-    display: none;
-    transition-duration: .3s;
-  }
-}
diff --git a/app/views/layouts/_page.html.haml b/app/views/layouts/_page.html.haml
index 8fc1ac8b198..9be36273c7d 100644
--- a/app/views/layouts/_page.html.haml
+++ b/app/views/layouts/_page.html.haml
@@ -1,7 +1,7 @@
 .page-with-sidebar{ class: "#{page_sidebar_class} #{page_gutter_class}" }
   = render "layouts/broadcast"
   .expand-nav
-    = link_to icon('bars'), '#', class: 'toggle-nav-collapse', title: "Open/Close"
+    = link_to icon('bars'), '#', class: 'toggle-nav-collapse', title: "Open sidebar"
   .sidebar-wrapper.nicescroll{ class: nav_sidebar_class }
     .header-logo
       %a#logo
@@ -22,7 +22,7 @@
       = render "layouts/nav/#{primary_sidebar}"
 
     .collapse-nav
-      = link_to icon('angle-left'), '#', class: 'toggle-nav-collapse', title: "Open/Close"
+      = link_to icon('angle-left'), '#', class: 'toggle-nav-collapse', title: "Hide sidebar"
     - if current_user
       = link_to current_user, class: 'sidebar-user', title: "Profile" do
         = image_tag avatar_icon(current_user, 60), alt: 'Profile', class: 'avatar avatar s36'
diff --git a/app/views/layouts/nav/_dashboard.html.haml b/app/views/layouts/nav/_dashboard.html.haml
index 866ebfc6f05..dfdabd4c55d 100644
--- a/app/views/layouts/nav/_dashboard.html.haml
+++ b/app/views/layouts/nav/_dashboard.html.haml
@@ -15,7 +15,7 @@
       = icon('dashboard fw')
       %span
         Activity
-  = nav_link(controller: :groups) do
+  = nav_link(path: ['groups#index']) do
     = link_to dashboard_groups_path, title: 'Groups' do
       = icon('group fw')
       %span
diff --git a/app/views/layouts/nav/_group.html.haml b/app/views/layouts/nav/_group.html.haml
index 55940741dc0..a03d2c703f7 100644
--- a/app/views/layouts/nav/_group.html.haml
+++ b/app/views/layouts/nav/_group.html.haml
@@ -1,12 +1,4 @@
 %ul.nav.nav-sidebar
-  = nav_link do
-    = link_to root_path, title: 'Go to dashboard', class: 'back-link' do
-      = icon('caret-square-o-left fw')
-      %span
-        Go to dashboard
-
-  %li.separate-item
-
   = nav_link(path: 'groups#show', html_options: {class: 'home'}) do
     = link_to group_path(@group), title: 'Home' do
       = icon('group fw')
@@ -42,7 +34,7 @@
       %span
         Members
   - if can?(current_user, :admin_group, @group)
-    = nav_link(html_options: { class: "separate-item" }) do
+    = nav_link(html_options: { class: "" }) do
       = link_to edit_group_path(@group), title: 'Settings' do
         = icon ('cogs fw')
         %span