From 7c501895a33e2771097e14ddf7171164ccc27d01 Mon Sep 17 00:00:00 2001 From: Annabel Dunstone Date: Thu, 2 Jun 2016 15:24:34 -0600 Subject: Implement compact side nav --- app/assets/stylesheets/framework/header.scss | 36 +++----- app/assets/stylesheets/framework/sidebar.scss | 114 ++++-------------------- app/assets/stylesheets/framework/variables.scss | 2 +- app/views/layouts/_page.html.haml | 14 ++- app/views/layouts/nav/_dashboard.html.haml | 24 +++-- 5 files changed, 47 insertions(+), 143 deletions(-) diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss index 0da96c4017d..3be83b0fc65 100644 --- a/app/assets/stylesheets/framework/header.scss +++ b/app/assets/stylesheets/framework/header.scss @@ -79,13 +79,17 @@ header { &.header-collapsed { padding: 0 16px; + + .side-nav-toggle { + display: block; + } } .side-nav-toggle { display: none; position: absolute; left: -10px; - margin: 6px 0; + margin: 8px 0; padding: 6px 10px; border: none; background-color: $background-color; @@ -97,10 +101,6 @@ header { &:focus { outline: none; } - - @media (max-width: $screen-xs-min) { - display: block; - } } } @@ -171,31 +171,21 @@ header { } } -@mixin collapsed-header { - margin-left: $sidebar_collapsed_width; -} - .header-collapsed { - margin-left: $sidebar_collapsed_width; - - @media (min-width: $screen-md-min) { - @include collapsed-header; - } + margin-left: 0; - @media (max-width: $screen-xs-min) { - margin-left: 0; + .header-content { + padding-left: 30px; + transition-duration: .3s; } } .header-expanded { - margin-left: $sidebar_collapsed_width; + margin-left: 0; - @media (min-width: $screen-md-min) { - margin-left: $sidebar_width; - } - - @media (max-width: $screen-xs-min) { - margin-left: 0; + .header-content { + padding-left: $sidebar_width; + transition-duration: .3s; } } diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss index 67f491b6d9c..0acb010b239 100644 --- a/app/assets/stylesheets/framework/sidebar.scss +++ b/app/assets/stylesheets/framework/sidebar.scss @@ -1,9 +1,7 @@ #logo { z-index: 2; - position: absolute; - width: 58px; + position: relative; cursor: pointer; - margin-top: 8px; } .page-with-sidebar { @@ -20,12 +18,6 @@ height: 100%; transition-duration: .3s; } - - .gitlab-text-container-link { - z-index: 1; - position: absolute; - left: 0; - } } .sidebar-wrapper { @@ -50,47 +42,8 @@ .sidebar-wrapper { .header-logo { - border-bottom: 1px solid transparent; - float: left; height: $header-height; - width: $sidebar_width; - position: fixed; - z-index: 999; - overflow: hidden; - transition-duration: .3s; - - a { - float: left; - height: $header-height; - width: 100%; - padding-left: 22px; - overflow: hidden; - outline: none; - transition-duration: .3s; - - img { - width: 36px; - height: 36px; - } - - #tanuki-logo, img { - float: left; - } - - .gitlab-text-container { - width: 230px; - - h3 { - width: 158px; - float: left; - margin: 0; - margin-left: 50px; - font-size: 19px; - line-height: 50px; - font-weight: normal; - } - } - } + padding: 8px 26px; &:hover { background-color: #eee; @@ -98,7 +51,7 @@ } .sidebar-user { - padding: 7px 22px; + padding: 15px 22px; position: fixed; bottom: 40px; width: $sidebar_width; @@ -126,8 +79,7 @@ .nav-sidebar { - margin-top: 14 + $header-height; - margin-bottom: 100px; + margin: 22px 0; transition-duration: .3s; list-style: none; overflow: hidden; @@ -145,13 +97,13 @@ } a { - padding: 7px 15px; + text-align: center; + padding: 8px 0; font-size: $gl-font-size; line-height: 24px; color: $gray; display: block; text-decoration: none; - padding-left: 23px; font-weight: normal; outline: none; @@ -166,7 +118,6 @@ i { width: 16px; color: $gray-light; - margin-right: 13px; } .count { @@ -217,25 +168,13 @@ } .page-sidebar-collapsed { - padding-left: $sidebar_collapsed_width; - - @media (max-width: $screen-xs-min) { - padding-left: 0; - } + padding-left: 0; .sidebar-wrapper { - width: $sidebar_collapsed_width; - - @media (max-width: $screen-xs-min) { - width: 0; - } + width: 0; .header-logo { - width: $sidebar_collapsed_width; - - @media (max-width: $screen-xs-min) { - width: 0; - } + width: 0; a { padding-left: ($sidebar_collapsed_width - 36) / 2; @@ -246,6 +185,10 @@ } } + #logo { + display: none; + } + .nav-sidebar { width: $sidebar_collapsed_width; @@ -261,44 +204,23 @@ } .collapse-nav a { - width: $sidebar_collapsed_width; - - @media (max-width: $screen-xs-min) { - width: 0; - } + width: 0; } .sidebar-user { - padding-left: ($sidebar_collapsed_width - 36) / 2; - width: $sidebar_collapsed_width; - - @media (max-width: $screen-xs-min) { - width: 0; - padding-left: 0; - padding-right: 0; - } + width: 0; + padding-left: 0; + padding-right: 0; .username { display: none; } } } - - .layout-nav { - padding-right: $sidebar_collapsed_width; - - @media (max-width: $screen-xs-min) { - padding-right: 0;; - } - } } .page-sidebar-expanded { - padding-left: $sidebar_collapsed_width; - - @media (min-width: $screen-md-min) { - padding-left: $sidebar_width; - } + padding-left: $sidebar_width; @media (max-width: $screen-xs-min) { padding-left: 0; diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss index f253da814bc..60207ecf1d6 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: 220px; +$sidebar_width: 90px; $gutter_collapsed_width: 62px; $gutter_width: 290px; $gutter_inner_width: 258px; diff --git a/app/views/layouts/_page.html.haml b/app/views/layouts/_page.html.haml index 1e961853c70..f0ba62fa68d 100644 --- a/app/views/layouts/_page.html.haml +++ b/app/views/layouts/_page.html.haml @@ -1,11 +1,9 @@ .page-with-sidebar{ class: "#{page_sidebar_class} #{page_gutter_class}" } .sidebar-wrapper.nicescroll{ class: nav_sidebar_class } - .header-logo - %a#logo - = brand_header_logo - = link_to root_path, class: 'gitlab-text-container-link', title: 'Dashboard', id: 'js-shortcuts-home' do - .gitlab-text-container - %h3 GitLab + = link_to root_path, class: 'gitlab-text-container-link', title: 'Dashboard', id: 'js-shortcuts-home' do + .header-logo + #logo + = brand_header_logo - if defined?(sidebar) && sidebar = render "layouts/nav/#{sidebar}" @@ -18,9 +16,7 @@ = render partial: 'layouts/collapse_button' - 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' - .username - = current_user.username + = image_tag avatar_icon(current_user, 60), alt: 'Profile', class: 'avatar avatar s46' - if defined?(nav) && nav .layout-nav .container-fluid diff --git a/app/views/layouts/nav/_dashboard.html.haml b/app/views/layouts/nav/_dashboard.html.haml index 306ebd5fcf7..1d5c243b181 100644 --- a/app/views/layouts/nav/_dashboard.html.haml +++ b/app/views/layouts/nav/_dashboard.html.haml @@ -2,54 +2,50 @@ = nav_link(path: ['root#index', 'projects#trending', 'projects#starred', 'dashboard/projects#index'], html_options: {class: "#{project_tab_class} home"}) do = link_to dashboard_projects_path, title: 'Projects', class: 'dashboard-shortcuts-projects' do = icon('bookmark fw') - %span + %div Projects = nav_link(controller: :todos) do = link_to dashboard_todos_path, title: 'Todos' do = icon('bell fw') - %span + %div Todos - %span.count.todos-pending-count= number_with_delimiter(todos_pending_count) = nav_link(path: 'dashboard#activity') do = link_to activity_dashboard_path, class: 'dashboard-shortcuts-activity', title: 'Activity' do = icon('dashboard fw') - %span + %div Activity = nav_link(controller: [:groups, 'groups/milestones', 'groups/group_members']) do = link_to dashboard_groups_path, title: 'Groups' do = icon('group fw') - %span + %div Groups = nav_link(controller: 'dashboard/milestones') do = link_to dashboard_milestones_path, title: 'Milestones' do = icon('clock-o fw') - %span + %div Milestones = nav_link(path: 'dashboard#issues') do = link_to assigned_issues_dashboard_path, title: 'Issues', class: 'dashboard-shortcuts-issues' do = icon('exclamation-circle fw') - %span + %div Issues - %span.count= number_with_delimiter(current_user.assigned_open_issues_count) = nav_link(path: 'dashboard#merge_requests') do = link_to assigned_mrs_dashboard_path, title: 'Merge Requests', class: 'dashboard-shortcuts-merge_requests' do = icon('tasks fw') - %span + %div Merge Requests - %span.count= number_with_delimiter(current_user.assigned_open_merge_request_count) = nav_link(controller: :snippets) do = link_to dashboard_snippets_path, title: 'Snippets' do = icon('clipboard fw') - %span + %div Snippets = nav_link(controller: :help) do = link_to help_path, title: 'Help' do = icon('question-circle fw') - %span + %div Help - = nav_link(html_options: {class: profile_tab_class}) do = link_to profile_path, title: 'Profile Settings', data: {placement: 'bottom'} do = icon('user fw') - %span + %div Profile Settings -- cgit v1.2.1 From ffbd9cd02d701442b5304e84ad75d657eeb4e23f Mon Sep 17 00:00:00 2001 From: Annabel Dunstone Date: Thu, 2 Jun 2016 17:31:26 -0600 Subject: Test impersonation using img data attribute instead of username --- app/views/layouts/_page.html.haml | 2 +- spec/features/admin/admin_users_spec.rb | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/app/views/layouts/_page.html.haml b/app/views/layouts/_page.html.haml index f0ba62fa68d..261038ef940 100644 --- a/app/views/layouts/_page.html.haml +++ b/app/views/layouts/_page.html.haml @@ -15,7 +15,7 @@ .collapse-nav = render partial: 'layouts/collapse_button' - if current_user - = link_to current_user, class: 'sidebar-user', title: "Profile" do + = link_to current_user, class: 'sidebar-user', title: "Profile", data: {user: current_user.username} do = image_tag avatar_icon(current_user, 60), alt: 'Profile', class: 'avatar avatar s46' - if defined?(nav) && nav .layout-nav diff --git a/spec/features/admin/admin_users_spec.rb b/spec/features/admin/admin_users_spec.rb index b72ad405479..1cb709c1de3 100644 --- a/spec/features/admin/admin_users_spec.rb +++ b/spec/features/admin/admin_users_spec.rb @@ -144,8 +144,8 @@ describe "Admin::Users", feature: true do before { click_link 'Impersonate' } it 'logs in as the user when impersonate is clicked' do - page.within '.sidebar-user .username' do - expect(page).to have_content(another_user.username) + page.within '.sidebar-wrapper' do + expect(page.find('.sidebar-user')['data-user']).to eql(another_user.username) end end @@ -158,8 +158,8 @@ describe "Admin::Users", feature: true do it 'can log out of impersonated user back to original user' do find(:css, 'li.impersonation a').click - page.within '.sidebar-user .username' do - expect(page).to have_content(@user.username) + page.within '.sidebar-wrapper' do + expect(page.find('.sidebar-user')['data-user']).to eql(@user.username) end end -- cgit v1.2.1 From ca985283b40783e498c181ac4612ddf23c421ff4 Mon Sep 17 00:00:00 2001 From: Annabel Dunstone Date: Thu, 2 Jun 2016 17:37:37 -0600 Subject: Remove todos count tests in nav --- features/steps/dashboard/todos.rb | 2 -- 1 file changed, 2 deletions(-) diff --git a/features/steps/dashboard/todos.rb b/features/steps/dashboard/todos.rb index bd8a270202e..19fedfbfcdf 100644 --- a/features/steps/dashboard/todos.rb +++ b/features/steps/dashboard/todos.rb @@ -26,7 +26,6 @@ class Spinach::Features::DashboardTodos < Spinach::FeatureSteps end step 'I should see todos assigned to me' do - page.within('.nav-sidebar') { expect(page).to have_content 'Todos 4' } expect(page).to have_content 'To do 4' expect(page).to have_content 'Done 0' @@ -42,7 +41,6 @@ class Spinach::Features::DashboardTodos < Spinach::FeatureSteps click_link 'Done' end - page.within('.nav-sidebar') { expect(page).to have_content 'Todos 3' } expect(page).to have_content 'To do 3' expect(page).to have_content 'Done 1' should_not_see_todo "John Doe assigned you merge request #{merge_request.to_reference}" -- cgit v1.2.1 From e8a0cafc7d9e8ee44b37a8e282f4a679bf48cac3 Mon Sep 17 00:00:00 2001 From: Annabel Dunstone Date: Fri, 3 Jun 2016 08:05:32 -0600 Subject: Fix control btn position --- app/assets/stylesheets/framework/sidebar.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss index 0acb010b239..ed12cc4f223 100644 --- a/app/assets/stylesheets/framework/sidebar.scss +++ b/app/assets/stylesheets/framework/sidebar.scss @@ -250,7 +250,7 @@ } @media (min-width: $screen-xs-min) and (max-width: $screen-md-min) { - padding-right: 62px; + padding-right: 90px; } @media (min-width: $screen-md-min) { -- cgit v1.2.1 From 2293100d95f587049b7ce7fee923c4b3fbbf6f56 Mon Sep 17 00:00:00 2001 From: Annabel Dunstone Date: Fri, 3 Jun 2016 16:50:27 -0600 Subject: Update nav link font size and spacing; fix hamburger icon --- app/assets/stylesheets/framework/header.scss | 3 ++- app/assets/stylesheets/framework/sidebar.scss | 18 +++++------------- app/views/layouts/nav/_dashboard.html.haml | 20 ++++++++++---------- 3 files changed, 17 insertions(+), 24 deletions(-) diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss index 3be83b0fc65..c46d6b14782 100644 --- a/app/assets/stylesheets/framework/header.scss +++ b/app/assets/stylesheets/framework/header.scss @@ -89,7 +89,8 @@ header { display: none; position: absolute; left: -10px; - margin: 8px 0; + margin: 6px 0; + font-size: 18px; padding: 6px 10px; border: none; background-color: $background-color; diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss index ed12cc4f223..46d46368d25 100644 --- a/app/assets/stylesheets/framework/sidebar.scss +++ b/app/assets/stylesheets/framework/sidebar.scss @@ -1,9 +1,3 @@ -#logo { - z-index: 2; - position: relative; - cursor: pointer; -} - .page-with-sidebar { padding-top: $header-height; transition-duration: .3s; @@ -98,9 +92,8 @@ a { text-align: center; - padding: 8px 0; + padding: 8px; font-size: $gl-font-size; - line-height: 24px; color: $gray; display: block; text-decoration: none; @@ -120,11 +113,10 @@ color: $gray-light; } - .count { - float: right; - background: #eee; - padding: 0 8px; - @include border-radius(6px); + .nav-link-text { + margin-top: 3px; + font-size: 13px; + line-height: 18px; } &.back-link i { diff --git a/app/views/layouts/nav/_dashboard.html.haml b/app/views/layouts/nav/_dashboard.html.haml index 1d5c243b181..df77d9cf83e 100644 --- a/app/views/layouts/nav/_dashboard.html.haml +++ b/app/views/layouts/nav/_dashboard.html.haml @@ -2,50 +2,50 @@ = nav_link(path: ['root#index', 'projects#trending', 'projects#starred', 'dashboard/projects#index'], html_options: {class: "#{project_tab_class} home"}) do = link_to dashboard_projects_path, title: 'Projects', class: 'dashboard-shortcuts-projects' do = icon('bookmark fw') - %div + .nav-link-text Projects = nav_link(controller: :todos) do = link_to dashboard_todos_path, title: 'Todos' do = icon('bell fw') - %div + .nav-link-text Todos = nav_link(path: 'dashboard#activity') do = link_to activity_dashboard_path, class: 'dashboard-shortcuts-activity', title: 'Activity' do = icon('dashboard fw') - %div + .nav-link-text Activity = nav_link(controller: [:groups, 'groups/milestones', 'groups/group_members']) do = link_to dashboard_groups_path, title: 'Groups' do = icon('group fw') - %div + .nav-link-text Groups = nav_link(controller: 'dashboard/milestones') do = link_to dashboard_milestones_path, title: 'Milestones' do = icon('clock-o fw') - %div + .nav-link-text Milestones = nav_link(path: 'dashboard#issues') do = link_to assigned_issues_dashboard_path, title: 'Issues', class: 'dashboard-shortcuts-issues' do = icon('exclamation-circle fw') - %div + .nav-link-text Issues = nav_link(path: 'dashboard#merge_requests') do = link_to assigned_mrs_dashboard_path, title: 'Merge Requests', class: 'dashboard-shortcuts-merge_requests' do = icon('tasks fw') - %div + .nav-link-text Merge Requests = nav_link(controller: :snippets) do = link_to dashboard_snippets_path, title: 'Snippets' do = icon('clipboard fw') - %div + .nav-link-text Snippets = nav_link(controller: :help) do = link_to help_path, title: 'Help' do = icon('question-circle fw') - %div + .nav-link-text Help = nav_link(html_options: {class: profile_tab_class}) do = link_to profile_path, title: 'Profile Settings', data: {placement: 'bottom'} do = icon('user fw') - %div + .nav-link-text Profile Settings -- cgit v1.2.1 From ef37b57f1f5089420997c6092921e1d9516b03b4 Mon Sep 17 00:00:00 2001 From: Annabel Dunstone Date: Mon, 6 Jun 2016 21:31:28 -0500 Subject: Update charcoal theme colors --- app/assets/stylesheets/framework/gitlab-theme.scss | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/app/assets/stylesheets/framework/gitlab-theme.scss b/app/assets/stylesheets/framework/gitlab-theme.scss index 16cf394c426..cd2eba59f90 100644 --- a/app/assets/stylesheets/framework/gitlab-theme.scss +++ b/app/assets/stylesheets/framework/gitlab-theme.scss @@ -89,8 +89,11 @@ } } -$theme-blue: #2980b9; $theme-charcoal: #3d454d; +$theme-charcoal-dark: #383f45; +$theme-charcoal-text: #b9bbbe; + +$theme-blue: #2980b9; $theme-graphite: #666; $theme-gray: #373737; $theme-green: #019875; @@ -102,7 +105,7 @@ body { } &.ui_charcoal { - @include gitlab-theme(#d6d7d9, #485157, $theme-charcoal, #353b41); + @include gitlab-theme($theme-charcoal-text, #485157, $theme-charcoal, $theme-charcoal-dark); } &.ui_graphite { -- cgit v1.2.1