Make UI more compact
Signed-off-by: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>
This commit is contained in:
Dmitriy Zaporozhets
parent
16e6913e00
commit
c13ef89862
16 changed files with 45 additions and 42 deletions
|
|
@ -12,6 +12,7 @@
|
|||
*/
|
||||
|
||||
|
||||
@import "base/fonts";
|
||||
@import "base/variables";
|
||||
@import "base/mixins";
|
||||
@import "base/layout";
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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; }
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@
|
|||
}
|
||||
|
||||
.identicon {
|
||||
line-height: 40px;
|
||||
line-height: 46px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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?
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in a new issue