From 4406aeff05ea76522e662c996cbb9c9837f765d4 Mon Sep 17 00:00:00 2001 From: Dmitriy Zaporozhets Date: Wed, 2 Sep 2015 13:02:16 +0200 Subject: [PATCH] Implement new design for projects page Signed-off-by: Dmitriy Zaporozhets --- app/assets/stylesheets/base/mixins.scss | 17 +++++++ app/assets/stylesheets/base/variables.scss | 4 +- app/assets/stylesheets/generic/avatar.scss | 1 + app/assets/stylesheets/generic/common.scss | 18 +++++-- app/assets/stylesheets/generic/header.scss | 30 +++++------- app/assets/stylesheets/generic/sidebar.scss | 46 +++++++++++------- app/assets/stylesheets/pages/dashboard.scss | 2 +- app/assets/stylesheets/pages/projects.scss | 47 +++++++++++++++---- .../stylesheets/themes/gitlab-theme.scss | 10 ++-- app/views/layouts/_page.html.haml | 2 +- app/views/shared/projects/_project.html.haml | 3 +- 11 files changed, 121 insertions(+), 59 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..f492530a137 100644 --- a/app/assets/stylesheets/base/variables.scss +++ b/app/assets/stylesheets/base/variables.scss @@ -12,7 +12,7 @@ $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..549234d8d69 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 { @@ -374,18 +374,28 @@ table { 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; + 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..9825be8538e 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; } } @@ -70,16 +69,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 +93,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 +104,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/sidebar.scss b/app/assets/stylesheets/generic/sidebar.scss index 320bdb1c765..160520d5e89 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 { @@ -135,11 +145,11 @@ .collapse-nav a { position: fixed; - top: $header-height; - left: 198px; + top: 0; + left: 202px; font-size: 13px; background: transparent; - width: 32px; + width: 28px; height: 28px; text-align: center; line-height: 28px; @@ -176,16 +186,18 @@ } .sidebar-user { + padding: 12px 22px; position: fixed; bottom: 0; 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 +214,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 +231,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..57cb8a78b92 100644 --- a/app/assets/stylesheets/themes/gitlab-theme.scss +++ b/app/assets/stylesheets/themes/gitlab-theme.scss @@ -9,7 +9,7 @@ @mixin gitlab-theme($color-light, $color, $color-darker, $color-dark) { .page-with-sidebar { .header-logo { - background-color: $color-darker; + background-color: $color; border-color: $color-darker; a { @@ -17,7 +17,7 @@ } &:hover { - background-color: $color-dark; + background-color: $color-darker; a { color: #FFF; } @@ -26,7 +26,7 @@ .collapse-nav a { color: #FFF; - background: $color; + background: $color-darker; } .sidebar-wrapper { @@ -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/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/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