From cb126995aa57cc9e169f875fbd4f9b5b82575a27 Mon Sep 17 00:00:00 2001 From: Annabel Dunstone Date: Fri, 10 Jun 2016 10:41:00 -0500 Subject: [PATCH] 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 --- app/assets/javascripts/application.js.coffee | 6 -- .../stylesheets/framework/gitlab-theme.scss | 23 -------- app/assets/stylesheets/framework/header.scss | 11 ++-- app/assets/stylesheets/framework/nav.scss | 21 +------ app/assets/stylesheets/framework/sidebar.scss | 55 +++---------------- .../stylesheets/framework/variables.scss | 2 +- app/views/layouts/_collapse_button.html.haml | 2 +- app/views/layouts/_page.html.haml | 5 +- app/views/layouts/ci/_page.html.haml | 6 -- app/views/layouts/nav/_admin.html.haml | 38 ++++++------- app/views/layouts/nav/_dashboard.html.haml | 20 +++---- app/views/layouts/nav/_explore.html.haml | 8 +-- 12 files changed, 52 insertions(+), 145 deletions(-) diff --git a/app/assets/javascripts/application.js.coffee b/app/assets/javascripts/application.js.coffee index 03bb7fc1f7b..e5531c02836 100644 --- a/app/assets/javascripts/application.js.coffee +++ b/app/assets/javascripts/application.js.coffee @@ -169,12 +169,6 @@ $ -> container: 'body' ) - $('.page-with-sidebar').tooltip( - selector: '.sidebar-collapsed .nav-sidebar a, .sidebar-collapsed a.sidebar-user' - placement: 'right' - container: 'body' - ) - # Form submitter $('.trigger-submit').on 'change', -> $(@).parents('form').submit() 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; diff --git a/app/views/layouts/_collapse_button.html.haml b/app/views/layouts/_collapse_button.html.haml index 61c0e71f031..e4fab897377 100644 --- a/app/views/layouts/_collapse_button.html.haml +++ b/app/views/layouts/_collapse_button.html.haml @@ -1 +1 @@ -= link_to icon('angle-left'), '#', class: 'toggle-nav-collapse', title: "Open/Close" += link_to icon('bars'), '#', class: 'toggle-nav-collapse', title: "Open/Close" diff --git a/app/views/layouts/_page.html.haml b/app/views/layouts/_page.html.haml index 6030613c8cf..c08aec959fc 100644 --- a/app/views/layouts/_page.html.haml +++ b/app/views/layouts/_page.html.haml @@ -1,8 +1,5 @@ .page-with-sidebar.page-sidebar-collapsed{ class: "#{page_gutter_class}" } .sidebar-wrapper.nicescroll{ class: nav_sidebar_class } - .gitlab-text-container - = link_to root_path, class: 'gitlab-text-container-link', title: 'Dashboard', id: 'js-shortcuts-home' do - %h3 GitLab - if defined?(sidebar) && sidebar = render "layouts/nav/#{sidebar}" @@ -18,7 +15,7 @@ = image_tag avatar_icon(current_user, 60), alt: 'Profile', class: 'avatar avatar s46' - if defined?(nav) && nav .layout-nav - .container-fluid + %div{ class: (container_class) } = render "layouts/nav/#{nav}" .content-wrapper{ class: "#{layout_nav_class}" } = render "layouts/broadcast" diff --git a/app/views/layouts/ci/_page.html.haml b/app/views/layouts/ci/_page.html.haml index a13241bebee..2e56d0ac6a3 100644 --- a/app/views/layouts/ci/_page.html.haml +++ b/app/views/layouts/ci/_page.html.haml @@ -1,12 +1,6 @@ .page-with-sidebar{ class: page_sidebar_class } = render "layouts/broadcast" .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 - if defined?(sidebar) && sidebar = render "layouts/ci/#{sidebar}" diff --git a/app/views/layouts/nav/_admin.html.haml b/app/views/layouts/nav/_admin.html.haml index de2276e75e4..40c47487fa8 100644 --- a/app/views/layouts/nav/_admin.html.haml +++ b/app/views/layouts/nav/_admin.html.haml @@ -2,102 +2,102 @@ = nav_link(controller: :dashboard, html_options: {class: 'home'}) do = link_to admin_root_path, title: 'Overview' do = icon('dashboard fw') - .nav-link-text + %span Overview = nav_link(controller: [:admin, :projects]) do = link_to admin_namespaces_projects_path, title: 'Projects' do = icon('cube fw') - .nav-link-text + %span Projects = nav_link(controller: :users) do = link_to admin_users_path, title: 'Users' do = icon('user fw') - .nav-link-text + %span Users = nav_link(controller: :groups) do = link_to admin_groups_path, title: 'Groups' do = icon('group fw') - .nav-link-text + %span Groups = nav_link(controller: :deploy_keys) do = link_to admin_deploy_keys_path, title: 'Deploy Keys' do = icon('key fw') - .nav-link-text + %span Deploy Keys = nav_link path: ['runners#index', 'runners#show'] do = link_to admin_runners_path, title: 'Runners' do = icon('cog fw') - .nav-link-text + %span Runners = nav_link path: 'builds#index' do = link_to admin_builds_path, title: 'Builds' do = icon('link fw') - .nav-link-text + %span Builds = nav_link(controller: :logs) do = link_to admin_logs_path, title: 'Logs' do = icon('file-text fw') - .nav-link-text + %span Logs = nav_link(controller: :health_check) do = link_to admin_health_check_path, title: 'Health Check' do = icon('medkit fw') - .nav-link-text + %span Health Check = nav_link(controller: :broadcast_messages) do = link_to admin_broadcast_messages_path, title: 'Messages' do = icon('bullhorn fw') - .nav-link-text + %span Messages = nav_link(controller: :hooks) do = link_to admin_hooks_path, title: 'Hooks' do = icon('external-link fw') - .nav-link-text + %span Hooks = nav_link(controller: :background_jobs) do = link_to admin_background_jobs_path, title: 'Background Jobs' do = icon('cog fw') - .nav-link-text + %span Background Jobs = nav_link(controller: :appearances) do = link_to admin_appearances_path, title: 'Appearances' do = icon('image') - .nav-link-text + %span Appearance = nav_link(controller: :applications) do = link_to admin_applications_path, title: 'Applications' do = icon('cloud fw') - .nav-link-text + %span Applications = nav_link(controller: :services) do = link_to admin_application_settings_services_path, title: 'Service Templates' do = icon('copy fw') - .nav-link-text + %span Service Templates = nav_link(controller: :labels) do = link_to admin_labels_path, title: 'Labels' do = icon('tags fw') - .nav-link-text + %span Labels = nav_link(controller: :abuse_reports) do = link_to admin_abuse_reports_path, title: "Abuse Reports" do = icon('exclamation-circle fw') - .nav-link-text + %span Abuse Reports - if askimet_enabled? = nav_link(controller: :spam_logs) do = link_to admin_spam_logs_path, title: "Spam Logs" do = icon('exclamation-triangle fw') - .nav-link-text + %span Spam Logs = nav_link(controller: :application_settings, html_options: { class: 'separate-item'}) do = link_to admin_application_settings_path, title: 'Settings' do = icon('cogs fw') - .nav-link-text + %span Settings diff --git a/app/views/layouts/nav/_dashboard.html.haml b/app/views/layouts/nav/_dashboard.html.haml index b73fde7797f..5dc85ef0d96 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 = navbar_icon('project') - .nav-link-text + %span Projects = nav_link(controller: :todos) do = link_to dashboard_todos_path, title: 'Todos' do = icon('bell fw') - .nav-link-text + %span Todos = nav_link(path: 'dashboard#activity') do = link_to activity_dashboard_path, class: 'dashboard-shortcuts-activity', title: 'Activity' do = navbar_icon('activity') - .nav-link-text + %span Activity = nav_link(controller: [:groups, 'groups/milestones', 'groups/group_members']) do = link_to dashboard_groups_path, title: 'Groups' do = navbar_icon('group') - .nav-link-text + %span Groups = nav_link(controller: 'dashboard/milestones') do = link_to dashboard_milestones_path, title: 'Milestones' do = navbar_icon('milestones') - .nav-link-text + %span Milestones = nav_link(path: 'dashboard#issues') do = link_to assigned_issues_dashboard_path, title: 'Issues', class: 'dashboard-shortcuts-issues' do = navbar_icon('issues') - .nav-link-text + %span Issues = nav_link(path: 'dashboard#merge_requests') do = link_to assigned_mrs_dashboard_path, title: 'Merge Requests', class: 'dashboard-shortcuts-merge_requests' do = navbar_icon('mr') - .nav-link-text + %span Merge Requests = nav_link(controller: :snippets) do = link_to dashboard_snippets_path, title: 'Snippets' do = icon('clipboard fw') - .nav-link-text + %span Snippets = nav_link(controller: :help) do = link_to help_path, title: 'Help' do = icon('question-circle fw') - .nav-link-text + %span Help = nav_link(html_options: {class: profile_tab_class}) do = link_to profile_path, title: 'Profile Settings', data: {placement: 'bottom'} do = icon('user fw') - .nav-link-text + %span Profile Settings diff --git a/app/views/layouts/nav/_explore.html.haml b/app/views/layouts/nav/_explore.html.haml index 46fcf1545f2..3b40006a0cc 100644 --- a/app/views/layouts/nav/_explore.html.haml +++ b/app/views/layouts/nav/_explore.html.haml @@ -2,20 +2,20 @@ = nav_link(path: ['dashboard#show', 'root#show', 'projects#trending', 'projects#starred', 'projects#index'], html_options: {class: 'home'}) do = link_to explore_root_path, title: 'Projects' do = icon('bookmark fw') - .nav-link-text + %span Projects = nav_link(controller: [:groups, 'groups/milestones', 'groups/group_members']) do = link_to explore_groups_path, title: 'Groups' do = icon('group fw') - .nav-link-text + %span Groups = nav_link(controller: :snippets) do = link_to explore_snippets_path, title: 'Snippets' do = icon('clipboard fw') - .nav-link-text + %span Snippets = nav_link(controller: :help) do = link_to help_path, title: 'Help' do = icon('question-circle fw') - .nav-link-text + %span Help -- GitLab