diff options
author | Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com> | 2015-09-03 07:14:20 +0000 |
---|---|---|
committer | Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com> | 2015-09-03 07:14:20 +0000 |
commit | 6630a06c40b8e69e0fac8cf018b3071e57ae1a9e (patch) | |
tree | a7f9b17bd3d19394835bde293a028e857801f6a6 | |
parent | ff8fb6a6a26578c02f04a2f7450a769b2f293d58 (diff) | |
parent | 6fb7311e6e8941be898d7eb4eaa3ff6664f426d2 (diff) | |
download | gitlab-ce-6630a06c40b8e69e0fac8cf018b3071e57ae1a9e.tar.gz |
Merge branch 'ui-improvements' into 'master'
Implement new design for projects page
Signed-off-by: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>
For #2413
See merge request !1236
-rw-r--r-- | app/assets/stylesheets/base/mixins.scss | 17 | ||||
-rw-r--r-- | app/assets/stylesheets/base/variables.scss | 6 | ||||
-rw-r--r-- | app/assets/stylesheets/generic/avatar.scss | 1 | ||||
-rw-r--r-- | app/assets/stylesheets/generic/common.scss | 21 | ||||
-rw-r--r-- | app/assets/stylesheets/generic/header.scss | 31 | ||||
-rw-r--r-- | app/assets/stylesheets/generic/mobile.scss | 17 | ||||
-rw-r--r-- | app/assets/stylesheets/generic/sidebar.scss | 70 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/dashboard.scss | 2 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/projects.scss | 47 | ||||
-rw-r--r-- | app/assets/stylesheets/themes/gitlab-theme.scss | 10 | ||||
-rw-r--r-- | app/views/dashboard/_projects_head.html.haml | 2 | ||||
-rw-r--r-- | app/views/layouts/_page.html.haml | 2 | ||||
-rw-r--r-- | app/views/layouts/header/_default.html.haml | 4 | ||||
-rw-r--r-- | app/views/layouts/header/_public.html.haml | 2 | ||||
-rw-r--r-- | app/views/shared/projects/_project.html.haml | 3 |
15 files changed, 166 insertions, 69 deletions
diff --git a/app/assets/stylesheets/base/mixins.scss b/app/assets/stylesheets/base/mixins.scss index 05f5bd79f91..bf251d896e2 100644 --- a/app/assets/stylesheets/base/mixins.scss +++ b/app/assets/stylesheets/base/mixins.scss @@ -195,3 +195,20 @@ } } } + +@mixin input-big { + height: 36px; + padding: 5px 10px; + font-size: 16px; + line-height: 24px; + color: #7f8fa4; + background-color: #fff; + border-color: #e7e9ed; +} + +@mixin btn-big { + height: 36px; + padding: 5px 10px; + font-size: 16px; + line-height: 24px; +} diff --git a/app/assets/stylesheets/base/variables.scss b/app/assets/stylesheets/base/variables.scss index 26d0a1e5363..81c1ab1c385 100644 --- a/app/assets/stylesheets/base/variables.scss +++ b/app/assets/stylesheets/base/variables.scss @@ -5,14 +5,14 @@ $gl-link-color: #446e9b; $nprogress-color: #c0392b; $gl-font-size: 14px; $list-font-size: 15px; -$sidebar_collapsed_width: 52px; +$sidebar_collapsed_width: 62px; $sidebar_width: 230px; $avatar_radius: 50%; $code_font_size: 13px; $code_line_height: 1.5; $border-color: #E5E5E5; $background-color: #f5f5f5; -$header-height: 50px; +$header-height: 73px; $fixed-layout-width: 1200px; @@ -20,7 +20,7 @@ $fixed-layout-width: 1200px; * State colors: */ $gl-primary: #446e9b; -$gl-success: #019875; +$gl-success: #44c679; $gl-info: #029ACF; $gl-warning: #EB9532; $gl-danger: #d9534f; diff --git a/app/assets/stylesheets/generic/avatar.scss b/app/assets/stylesheets/generic/avatar.scss index 8595887c3b9..0f137fd8c8f 100644 --- a/app/assets/stylesheets/generic/avatar.scss +++ b/app/assets/stylesheets/generic/avatar.scss @@ -23,6 +23,7 @@ &.s24 { width: 24px; height: 24px; margin-right: 8px; } &.s26 { width: 26px; height: 26px; margin-right: 8px; } &.s32 { width: 32px; height: 32px; margin-right: 10px; } + &.s48 { width: 48px; height: 48px; margin-right: 10px; } &.s60 { width: 60px; height: 60px; margin-right: 12px; } &.s90 { width: 90px; height: 90px; margin-right: 15px; } &.s160 { width: 160px; height: 160px; margin-right: 20px; } diff --git a/app/assets/stylesheets/generic/common.scss b/app/assets/stylesheets/generic/common.scss index e5902597c4d..eaa1fe07b01 100644 --- a/app/assets/stylesheets/generic/common.scss +++ b/app/assets/stylesheets/generic/common.scss @@ -362,7 +362,7 @@ table { } .profiler-results { - top: 50px !important; + top: 73px !important; .profiler-button, .profiler-controls { @@ -371,21 +371,34 @@ table { } .center-top-menu { + padding: 0; + margin: 0; list-style: none; text-align: center; margin-top: 5px; - padding-bottom: 15px; - margin-bottom: 15px; + margin-bottom: 12px; + height: 60px; + margin-top: -15px; + padding-top: 15px; li { display: inline-block; a { padding: 15px; + font-size: 20px; + line-height: 27px; + color: #7f8fa4; + border-bottom: 2px solid transparent; + + &:hover, &:active, &:focus { + text-decoration: none; + } } &.active a { - color: #666; + color: #4c4e54; + border-bottom: 2px solid #1cacfc; } } } diff --git a/app/assets/stylesheets/generic/header.scss b/app/assets/stylesheets/generic/header.scss index 6a29b32e196..d362f179c57 100644 --- a/app/assets/stylesheets/generic/header.scss +++ b/app/assets/stylesheets/generic/header.scss @@ -24,29 +24,28 @@ header { z-index: 100; margin-bottom: 0; min-height: $header-height; + background-color: #fff; border: none; border-bottom: 1px solid #EEE; .container-fluid { - background: #FFF; width: 100% !important; filter: none; + padding: 0; .nav > li > a { - color: #888; - font-size: 14px; + color: #7f8fa4; + font-size: 18px; padding: 0; - background-color: #f5f5f5; margin: ($header-height - 28) / 2 0; margin-left: 10px; - border-radius: 40px; height: 28px; width: 28px; line-height: 28px; text-align: center; &:hover, &:focus, &:active { - background-color: #EEE; + background-color: #FFF; } } @@ -56,6 +55,7 @@ header { border-radius: 0; position: absolute; right: 2px; + top: 15px; &:hover { background-color: #EEE; @@ -70,16 +70,16 @@ header { .title { margin: 0; overflow: hidden; - font-size: 18px; + font-size: 20px; line-height: $header-height; - font-weight: bold; - color: #444; + font-weight: normal; + color: #4c4e54; text-overflow: ellipsis; vertical-align: top; white-space: nowrap; a { - color: #444; + color: #4c4e54; &:hover { text-decoration: underline; } @@ -94,7 +94,7 @@ header { .search { margin-right: 10px; margin-left: 10px; - margin-top: ($header-height - 28) / 2; + margin-top: ($header-height - 36) / 2; form { margin: 0; @@ -105,13 +105,8 @@ header { width: 220px; background-image: image-url("icon-search.png"); background-repeat: no-repeat; - background-position: 10px; - height: inherit; - padding: 4px 6px; - padding-left: 25px; - font-size: 13px; - background-color: #f5f5f5; - border-color: #f5f5f5; + background-position: 195px; + @include input-big; &:focus { @include box-shadow(none); diff --git a/app/assets/stylesheets/generic/mobile.scss b/app/assets/stylesheets/generic/mobile.scss index bb7b9356c70..36ae126f865 100644 --- a/app/assets/stylesheets/generic/mobile.scss +++ b/app/assets/stylesheets/generic/mobile.scss @@ -80,6 +80,23 @@ %ul.notes .note-role, .note-actions { display: none; } + + .center-top-menu { + height: 45px; + + li a { + font-size: 14px; + padding: 19px 10px; + } + } + + .projects-search-form { + margin: 0 -5px !important; + + .btn { + display: none; + } + } } @media (max-width: $screen-sm-max) { diff --git a/app/assets/stylesheets/generic/sidebar.scss b/app/assets/stylesheets/generic/sidebar.scss index 320bdb1c765..88d6c7ca6d6 100644 --- a/app/assets/stylesheets/generic/sidebar.scss +++ b/app/assets/stylesheets/generic/sidebar.scss @@ -18,13 +18,22 @@ } .content-wrapper { + min-height: 100vh; width: 100%; padding: 20px; - background: #FFF; + background: #f1f4f8; + + .container-fluid { + background: #FFF; + padding-top: 15px; + padding-bottom: 15px; + border: 1px solid #e7e9ed; + min-height: 90vh; + } } .nav-sidebar { - margin-top: 29 + $header-height; + margin-top: 14 + $header-height; margin-bottom: 50px; transition-duration: .3s; list-style: none; @@ -44,12 +53,13 @@ a { padding: 8px 15px; - font-size: 13px; - line-height: 18px; + font-size: 16px; + line-height: 24px; color: $gray; display: block; text-decoration: none; - padding-left: 16px; + padding-left: 22px; + font-weight: normal; &:hover { text-decoration: none; @@ -60,9 +70,9 @@ } i { - width: 20px; + width: 16px; color: $gray-light; - margin-right: 23px; + margin-right: 13px; } .count { @@ -108,17 +118,31 @@ } @mixin folded-sidebar { - padding-left: 50px; + padding-left: 60px; transition-duration: .3s; .sidebar-wrapper { width: $sidebar_collapsed_width; + .header-logo { + width: $sidebar_collapsed_width; + + a { + padding-left: 7px; + + .gitlab-text-container { + display: none; + } + } + } + .nav-sidebar { width: $sidebar_collapsed_width; li a { - padding-left: 16px; + span { + display: none; + } } } @@ -128,21 +152,21 @@ } .sidebar-user { + padding-left: 7px; width: $sidebar_collapsed_width; } } } .collapse-nav a { + width: $sidebar_width; position: fixed; - top: $header-height; - left: 198px; + bottom: 0; font-size: 13px; background: transparent; - width: 32px; - height: 28px; + height: 40px; text-align: center; - line-height: 28px; + line-height: 40px; transition-duration: .3s; } @@ -176,16 +200,18 @@ } .sidebar-user { + padding: 12px 22px; position: fixed; - bottom: 0; + bottom: 40px; width: $sidebar_width; - padding: 10px; overflow: hidden; transition-duration: .3s; .username { - margin-top: 5px; + margin-left: 10px; width: $sidebar_width - 2 * 10px; + font-size: 16px; + line-height: 49px; } } @@ -202,12 +228,12 @@ float: left; height: $header-height; width: 100%; - padding: ($header-height - 36 ) / 2 8px; + padding: 12px 22px; overflow: hidden; img { - width: 36px; - height: 36px; + width: 48px; + height: 48px; float: left; } @@ -219,8 +245,8 @@ float: left; margin: 0; margin-left: 14px; - font-size: 18px; - line-height: $header-height - 14; + font-size: 20px; + line-height: 49px; font-weight: normal; } } diff --git a/app/assets/stylesheets/pages/dashboard.scss b/app/assets/stylesheets/pages/dashboard.scss index c1103a1c2e6..01ee41d0faa 100644 --- a/app/assets/stylesheets/pages/dashboard.scss +++ b/app/assets/stylesheets/pages/dashboard.scss @@ -38,7 +38,7 @@ float: left; .avatar { - @include border-radius(0px); + @include border-radius(50%); } .identicon { diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss index 488dded549e..0887837b86b 100644 --- a/app/assets/stylesheets/pages/projects.scss +++ b/app/assets/stylesheets/pages/projects.scss @@ -253,12 +253,22 @@ pre.light-well { } .projects-search-form { - max-width: 600px; - margin: 0 auto; - margin-bottom: 20px; + margin: -15px; + background-color: #f8fafc; + padding: 18px; + margin-bottom: 10px; + border-top: 1px solid #e7e9ed; + border-bottom: 1px solid #e7e9ed; - input { - border-color: #BBB; + + .projects-list-filter { + @include input-big; + padding: 5px 18px; + } + + .btn { + @include btn-big; + padding: 5px 18px; } } @@ -269,20 +279,36 @@ pre.light-well { @include basic-list; .project-row { + padding: 18px; + border-color: #f1f2f4; + margin: 0 -15px; + + &.no-description { + .project { + line-height: 38px; + } + } + .project-full-name { @include str-truncated; - font-weight: bold; - font-size: 15px; + font-weight: 500; + font-size: 16px; + color: #4c4e54; + } + + .pull-right.light { + line-height: 38px; + color: #7f8fa4; } .project-description { - color: #888; - font-size: 13px; + color: #7f8fa4; + font-size: 16px; p { @include str-truncated; margin-bottom: 0; - color: #888; + color: #7f8fa4; } } } @@ -290,4 +316,5 @@ pre.light-well { .panel .projects-list li { padding: 10px 15px; + margin: 0; } diff --git a/app/assets/stylesheets/themes/gitlab-theme.scss b/app/assets/stylesheets/themes/gitlab-theme.scss index 77b62c3153f..d523bb89521 100644 --- a/app/assets/stylesheets/themes/gitlab-theme.scss +++ b/app/assets/stylesheets/themes/gitlab-theme.scss @@ -9,15 +9,15 @@ @mixin gitlab-theme($color-light, $color, $color-darker, $color-dark) { .page-with-sidebar { .header-logo { - background-color: $color-darker; - border-color: $color-darker; + background-color: $color; + border-color: $color; a { color: $color-light; } &:hover { - background-color: $color-dark; + background-color: $color-darker; a { color: #FFF; } @@ -83,7 +83,7 @@ } $theme-blue: #2980B9; -$theme-charcoal: #474D57; +$theme-charcoal: #333c47; $theme-graphite: #888888; $theme-gray: #373737; $theme-green: #019875; @@ -95,7 +95,7 @@ body { } &.ui_charcoal { - @include gitlab-theme(#979DA7, $theme-charcoal, #373D47, #24272D); + @include gitlab-theme(#c5d0de, $theme-charcoal, #2b333d, #24272D); } &.ui_graphite { diff --git a/app/views/dashboard/_projects_head.html.haml b/app/views/dashboard/_projects_head.html.haml index f7be194c696..9ba12036f27 100644 --- a/app/views/dashboard/_projects_head.html.haml +++ b/app/views/dashboard/_projects_head.html.haml @@ -5,6 +5,6 @@ = nav_link(page: starred_dashboard_projects_path) do = link_to starred_dashboard_projects_path, title: 'Starred Projects', data: {placement: 'right'} do Starred Projects - = nav_link(page: [explore_root_path, trending_explore_projects_path, starred_explore_projects_path, explore_projects_path]) do + = nav_link(page: [explore_root_path, trending_explore_projects_path, starred_explore_projects_path, explore_projects_path], html_options: { class: 'hidden-xs' }) do = link_to explore_root_path, title: 'Explore', data: {toggle: 'tooltip', placement: 'bottom'} do Explore Projects diff --git a/app/views/layouts/_page.html.haml b/app/views/layouts/_page.html.haml index 0104d7198df..9a9282de22a 100644 --- a/app/views/layouts/_page.html.haml +++ b/app/views/layouts/_page.html.haml @@ -14,7 +14,7 @@ = render partial: 'layouts/collapse_button' - if current_user = link_to current_user, class: 'sidebar-user' do - = image_tag avatar_icon(current_user.email, 60), alt: 'User activity', class: 'avatar avatar s32' + = image_tag avatar_icon(current_user.email, 60), alt: 'User activity', class: 'avatar avatar s48' .username = current_user.username .content-wrapper diff --git a/app/views/layouts/header/_default.html.haml b/app/views/layouts/header/_default.html.haml index 0b630b55c70..3892f71c0e3 100644 --- a/app/views/layouts/header/_default.html.haml +++ b/app/views/layouts/header/_default.html.haml @@ -1,5 +1,5 @@ %header.navbar.navbar-fixed-top.navbar-gitlab{ class: nav_header_class } - %div{ class: fluid_layout ? "container-fluid" : "container-fluid container-limited" } + %div{ class: fluid_layout ? "container-fluid" : "container-fluid" } .header-content %button.navbar-toggle{type: 'button'} %span.sr-only Toggle navigation @@ -17,7 +17,7 @@ = link_to admin_root_path, title: 'Admin area', data: {toggle: 'tooltip', placement: 'bottom'} do = icon('wrench fw') - if current_user.can_create_project? - %li.hidden-xs + %li = link_to new_project_path, title: 'New project', data: {toggle: 'tooltip', placement: 'bottom'} do = icon('plus fw') %li diff --git a/app/views/layouts/header/_public.html.haml b/app/views/layouts/header/_public.html.haml index af4b9ba58f6..265937c7f44 100644 --- a/app/views/layouts/header/_public.html.haml +++ b/app/views/layouts/header/_public.html.haml @@ -1,5 +1,5 @@ %header.navbar.navbar-fixed-top.navbar-gitlab{ class: nav_header_class } - %div{ class: fluid_layout ? "container-fluid" : "container-fluid container-limited" } + %div{ class: fluid_layout ? "container-fluid" : "container-fluid" } .header-content - unless current_controller?('sessions') .pull-right diff --git a/app/views/shared/projects/_project.html.haml b/app/views/shared/projects/_project.html.haml index 4bfdf4d55ff..fdedcf97cf8 100644 --- a/app/views/shared/projects/_project.html.haml +++ b/app/views/shared/projects/_project.html.haml @@ -1,6 +1,7 @@ - avatar = true unless local_assigns[:avatar] == false - stars = true unless local_assigns[:stars] == false -- css_class = nil unless local_assigns[:css_class] +- css_class = '' unless local_assigns[:css_class] +- css_class += " no-description" unless project.description.present? %li.project-row{ class: css_class } = cache [project.namespace, project, controller.controller_name, controller.action_name, 'v2'] do = link_to project_path(project), class: dom_class(project) do |