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