Make UI more compact

Signed-off-by: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>

app/assets/stylesheets/application.scss

@@ -12,6 +12,7 @@
 */
 
 
+@import "base/fonts";
 @import "base/variables";
 @import "base/mixins";
 @import "base/layout";

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;

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;

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; }

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;

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;

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;

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 {

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;
 

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;
         }

app/assets/stylesheets/pages/dashboard.scss

@@ -42,7 +42,7 @@
   }
 
   .identicon {
-    line-height: 40px;
+    line-height: 46px;
   }
 }
 

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;

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?

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

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
 

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