From de6360f9048511f55a9c93e6fc848418cb6c71a5 Mon Sep 17 00:00:00 2001
From: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>
Date: Fri, 1 Apr 2016 19:51:18 +0200
Subject: [PATCH] Improve styling for new complex sidebar
Signed-off-by: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>
---
.../stylesheets/framework/gitlab-theme.scss | 1 -
app/assets/stylesheets/framework/sidebar.scss | 65 ++++++++-----------
app/views/layouts/_page.html.haml | 4 +-
app/views/layouts/nav/_dashboard.html.haml | 2 +-
app/views/layouts/nav/_group.html.haml | 10 +--
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
--
GitLab