diff options
author | Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com> | 2015-09-04 11:17:25 +0200 |
---|---|---|
committer | Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com> | 2015-09-04 11:17:25 +0200 |
commit | c13ef898627db4f619c80f6be0fb58fe045e44d3 (patch) | |
tree | e0dd46c4a1ae9c8097ee79c5126b1ab584a499b0 | |
parent | 16e6913e00dee9118a2c75d6ecdd7f2dcef7234a (diff) | |
download | gitlab-ce-c13ef898627db4f619c80f6be0fb58fe045e44d3.tar.gz |
Make UI more compact
Signed-off-by: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>
-rw-r--r-- | app/assets/stylesheets/application.scss | 1 | ||||
-rw-r--r-- | app/assets/stylesheets/base/gl_variables.scss | 4 | ||||
-rw-r--r-- | app/assets/stylesheets/base/variables.scss | 10 | ||||
-rw-r--r-- | app/assets/stylesheets/generic/avatar.scss | 1 | ||||
-rw-r--r-- | app/assets/stylesheets/generic/blocks.scss | 4 | ||||
-rw-r--r-- | app/assets/stylesheets/generic/common.scss | 12 | ||||
-rw-r--r-- | app/assets/stylesheets/generic/header.scss | 2 | ||||
-rw-r--r-- | app/assets/stylesheets/generic/lists.scss | 5 | ||||
-rw-r--r-- | app/assets/stylesheets/generic/selects.scss | 2 | ||||
-rw-r--r-- | app/assets/stylesheets/generic/sidebar.scss | 18 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/dashboard.scss | 2 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/projects.scss | 14 | ||||
-rw-r--r-- | app/views/events/_event.html.haml | 4 | ||||
-rw-r--r-- | app/views/layouts/_page.html.haml | 2 | ||||
-rw-r--r-- | app/views/shared/groups/_group.html.haml | 2 | ||||
-rw-r--r-- | app/views/shared/projects/_project.html.haml | 4 |
16 files changed, 45 insertions, 42 deletions
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index 1a5f11df7d1..46f7feddf8d 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -12,6 +12,7 @@ */ +@import "base/fonts"; @import "base/variables"; @import "base/mixins"; @import "base/layout"; diff --git a/app/assets/stylesheets/base/gl_variables.scss b/app/assets/stylesheets/base/gl_variables.scss index 628b22ef90a..6d3b4b1e73a 100644 --- a/app/assets/stylesheets/base/gl_variables.scss +++ b/app/assets/stylesheets/base/gl_variables.scss @@ -43,7 +43,7 @@ $font-size-base: $gl-font-size; //## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start). $padding-base-vertical: 9px; -$padding-base-horizontal: 18px; +$padding-base-horizontal: $gl-padding; $component-active-color: #fff; $component-active-bg: $brand-info; @@ -143,4 +143,4 @@ $btn-default-border: #e7e9ed; //== Nav // //## -$nav-link-padding: 13px 18px; +$nav-link-padding: 13px $gl-padding; diff --git a/app/assets/stylesheets/base/variables.scss b/app/assets/stylesheets/base/variables.scss index b87f16eed0a..f7d4b5d1711 100644 --- a/app/assets/stylesheets/base/variables.scss +++ b/app/assets/stylesheets/base/variables.scss @@ -3,8 +3,8 @@ $gl-text-color: #54565b; $gl-header-color: #4c4e54; $gl-link-color: #333c48; $nprogress-color: #c0392b; -$gl-font-size: 16px; -$list-font-size: 16px; +$gl-font-size: 15px; +$list-font-size: 15px; $sidebar_collapsed_width: 62px; $sidebar_width: 230px; $avatar_radius: 50%; @@ -12,9 +12,11 @@ $code_font_size: 13px; $code_line_height: 1.5; $border-color: #E7E9ED; $background-color: #F8FAFC; -$header-height: 73px; +$header-height: 67px; $fixed-layout-width: 1200px; $gl-gray: #7f8fa4; +$gl-padding: 16px; +$gl-avatar-size: 46px; /* @@ -36,4 +38,4 @@ $deleted: #f77; * Fonts */ $monospace_font: 'Menlo', 'Liberation Mono', 'Consolas', 'DejaVu Sans Mono', 'Ubuntu Mono', 'Courier New', 'andale mono', 'lucida console', monospace; -$regular_font: "Helvetica Neue", Helvetica, Arial, sans-serif; +$regular_font: 'Source Sans Pro', "Helvetica Neue", Helvetica, Arial, sans-serif; diff --git a/app/assets/stylesheets/generic/avatar.scss b/app/assets/stylesheets/generic/avatar.scss index 0f137fd8c8f..5985e8239f3 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; } + &.s46 { width: 46px; height: 46px; margin-right: 15px; } &.s48 { width: 48px; height: 48px; margin-right: 10px; } &.s60 { width: 60px; height: 60px; margin-right: 12px; } &.s90 { width: 90px; height: 90px; margin-right: 15px; } diff --git a/app/assets/stylesheets/generic/blocks.scss b/app/assets/stylesheets/generic/blocks.scss index e012ef2f06f..e953ec741ac 100644 --- a/app/assets/stylesheets/generic/blocks.scss +++ b/app/assets/stylesheets/generic/blocks.scss @@ -19,9 +19,9 @@ } .gray-content-block { - margin: -18px; + margin: -$gl-padding; background-color: #f8fafc; - padding: 18px; + padding: $gl-padding; margin-bottom: 0px; border-top: 1px solid #e7e9ed; border-bottom: 1px solid #e7e9ed; diff --git a/app/assets/stylesheets/generic/common.scss b/app/assets/stylesheets/generic/common.scss index c6145cdd770..8b3768c2d27 100644 --- a/app/assets/stylesheets/generic/common.scss +++ b/app/assets/stylesheets/generic/common.scss @@ -374,17 +374,17 @@ table { list-style: none; text-align: center; margin-top: 5px; - margin-bottom: 18px; - height: 60px; - margin-top: -18px; - padding-top: 18px; + margin-bottom: $gl-padding; + height: 56px; + margin-top: -$gl-padding; + padding-top: $gl-padding; li { display: inline-block; a { - padding: 15px; - font-size: 20px; + padding: 14px; + font-size: 17px; line-height: 28px; color: #7f8fa4; border-bottom: 2px solid transparent; diff --git a/app/assets/stylesheets/generic/header.scss b/app/assets/stylesheets/generic/header.scss index d362f179c57..b758a526fbb 100644 --- a/app/assets/stylesheets/generic/header.scss +++ b/app/assets/stylesheets/generic/header.scss @@ -70,7 +70,7 @@ header { .title { margin: 0; overflow: hidden; - font-size: 20px; + font-size: 19px; line-height: $header-height; font-weight: normal; color: #4c4e54; diff --git a/app/assets/stylesheets/generic/lists.scss b/app/assets/stylesheets/generic/lists.scss index 7302f84c3aa..601fdd1e329 100644 --- a/app/assets/stylesheets/generic/lists.scss +++ b/app/assets/stylesheets/generic/lists.scss @@ -106,9 +106,10 @@ ul.content-list { padding: 0; li { - padding: 18px; + padding: $gl-padding; border-color: #f1f2f4; - margin: 0 -18px; + margin-left: -$gl-padding; + margin-right: -$gl-padding; color: $gl-gray; .avatar { diff --git a/app/assets/stylesheets/generic/selects.scss b/app/assets/stylesheets/generic/selects.scss index c6a1047e019..f0860de1c49 100644 --- a/app/assets/stylesheets/generic/selects.scss +++ b/app/assets/stylesheets/generic/selects.scss @@ -4,7 +4,7 @@ background: #FFF; border-color: #DDD; height: 42px; - padding: 8px 18px; + padding: 8px $gl-padding; font-size: $gl-font-size; line-height: 1.42857143; diff --git a/app/assets/stylesheets/generic/sidebar.scss b/app/assets/stylesheets/generic/sidebar.scss index 7f3688801aa..70893759479 100644 --- a/app/assets/stylesheets/generic/sidebar.scss +++ b/app/assets/stylesheets/generic/sidebar.scss @@ -25,7 +25,7 @@ .container-fluid { background: #FFF; - padding: 18px; + padding: $gl-padding; border: 1px solid #e7e9ed; min-height: 90vh; } @@ -51,8 +51,8 @@ } a { - padding: 8px 15px; - font-size: 16px; + padding: 7px 15px; + font-size: $gl-font-size; line-height: 24px; color: $gray; display: block; @@ -199,7 +199,7 @@ } .sidebar-user { - padding: 12px 22px; + padding: 9px 22px; position: fixed; bottom: 40px; width: $sidebar_width; @@ -210,7 +210,7 @@ margin-left: 10px; width: $sidebar_width - 2 * 10px; font-size: 16px; - line-height: 49px; + line-height: 44px; } } @@ -227,12 +227,12 @@ float: left; height: $header-height; width: 100%; - padding: 12px 22px; + padding: 10px 22px; overflow: hidden; img { - width: 48px; - height: 48px; + width: $gl-avatar-size; + height: $gl-avatar-size; float: left; } @@ -244,7 +244,7 @@ float: left; margin: 0; margin-left: 14px; - font-size: 20px; + font-size: 19px; line-height: 49px; font-weight: normal; } diff --git a/app/assets/stylesheets/pages/dashboard.scss b/app/assets/stylesheets/pages/dashboard.scss index 008c6419f01..25a86cd0f94 100644 --- a/app/assets/stylesheets/pages/dashboard.scss +++ b/app/assets/stylesheets/pages/dashboard.scss @@ -42,7 +42,7 @@ } .identicon { - line-height: 40px; + line-height: 46px; } } diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss index 24fc54ab300..7e9ec9c88c6 100644 --- a/app/assets/stylesheets/pages/projects.scss +++ b/app/assets/stylesheets/pages/projects.scss @@ -187,7 +187,6 @@ ul.nav.nav-projects-tabs { line-height: 42px; background: white; border: none; - font-size: 16px; > li + li:before { padding: 0 3px; @@ -253,9 +252,9 @@ pre.light-well { } .projects-search-form { - margin: -18px; + margin: -$gl-padding; background-color: #f8fafc; - padding: 18px; + padding: $gl-padding; margin-bottom: 0px; border-top: 1px solid #e7e9ed; border-bottom: 1px solid #e7e9ed; @@ -268,9 +267,10 @@ pre.light-well { @include basic-list; .project-row { - padding: 18px; + padding: $gl-padding; border-color: #f1f2f4; - margin: 0 -18px; + margin-left: -$gl-padding; + margin-right: -$gl-padding; &.no-description { .project { @@ -280,8 +280,7 @@ pre.light-well { .project-full-name { @include str-truncated; - font-weight: 500; - font-size: 16px; + font-weight: 600; color: #4c4e54; } @@ -292,7 +291,6 @@ pre.light-well { .project-description { color: #7f8fa4; - font-size: 16px; p { @include str-truncated; diff --git a/app/views/events/_event.html.haml b/app/views/events/_event.html.haml index 3cd65edacbf..9aacc79d686 100644 --- a/app/views/events/_event.html.haml +++ b/app/views/events/_event.html.haml @@ -3,8 +3,8 @@ .event-item-timestamp #{time_ago_with_tooltip(event.created_at)} - = cache [event, "v2"] do - = image_tag avatar_icon(event.author_email, 48), class: "avatar s48", alt:'' + = cache [event, "v2.1"] do + = image_tag avatar_icon(event.author_email, 46), class: "avatar s46", alt:'' - if event.created_project? = render "events/event/created_project", event: event - elsif event.push? diff --git a/app/views/layouts/_page.html.haml b/app/views/layouts/_page.html.haml index 9a9282de22a..02ee9910dad 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 s48' + = image_tag avatar_icon(current_user.email, 60), alt: 'User activity', class: 'avatar avatar s46' .username = current_user.username .content-wrapper diff --git a/app/views/shared/groups/_group.html.haml b/app/views/shared/groups/_group.html.haml index 55e6370811d..a54c5fa8c33 100644 --- a/app/views/shared/groups/_group.html.haml +++ b/app/views/shared/groups/_group.html.haml @@ -9,7 +9,7 @@ = link_to leave_group_group_members_path(group), data: { confirm: leave_group_message(group.name) }, method: :delete, class: "btn-sm btn btn-grouped", title: 'Leave this group' do %i.fa.fa-sign-out - = image_tag group_icon(group), class: "avatar s48 hidden-xs" + = image_tag group_icon(group), class: "avatar s46 hidden-xs" = link_to group, class: 'group-name' do %strong= group.name diff --git a/app/views/shared/projects/_project.html.haml b/app/views/shared/projects/_project.html.haml index fdedcf97cf8..5318c6011f4 100644 --- a/app/views/shared/projects/_project.html.haml +++ b/app/views/shared/projects/_project.html.haml @@ -3,11 +3,11 @@ - 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 + = cache [project.namespace, project, controller.controller_name, controller.action_name, 'v2.1'] do = link_to project_path(project), class: dom_class(project) do - if avatar .dash-project-avatar - = project_icon(project, alt: '', class: 'avatar project-avatar s40') + = project_icon(project, alt: '', class: 'avatar project-avatar s46') %span.project-full-name %span.namespace-name - if project.namespace |