Commit c13ef898 authored by Dmitriy Zaporozhets's avatar Dmitriy Zaporozhets

Make UI more compact

Signed-off-by: default avatarDmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>
parent 16e6913e
......@@ -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
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment