Merge branch 'ui-improvements'

app/assets/fonts/OFL.txt

+Copyright 2010, 2012 Adobe Systems Incorporated (http://www.adobe.com/), with Reserved Font Name 'Source'. All Rights Reserved. Source is a trademark of Adobe Systems Incorporated in the United States and/or other countries.
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

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/fonts.scss

+/* latin-ext */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 300;
+  src: local('Source Sans Pro Light'), local('SourceSansPro-Light'), url('SourceSansPro-Light.ttf');
+}
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Source Sans Pro'), local('SourceSansPro-Regular'), url('SourceSansPro-Regular.ttf');
+}
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 600;
+  src: local('Source Sans Pro Semibold'), local('SourceSansPro-Semibold'), url('SourceSansPro-Semibold.ttf');
+}
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url('SourceSansPro-Bold.ttf');
+}

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