Merge branch 'ui-improvements' into 'master'

Style project home page

Also make header more compact

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

See merge request !1246

app/assets/stylesheets/base/variables.scss

@@ -12,7 +12,7 @@ $code_font_size: 13px;
 $code_line_height: 1.5;
 $border-color: #E7E9ED;
 $background-color: #F8FAFC;
-$header-height: 67px;
+$header-height: 58px;
 $fixed-layout-width: 1200px;
 $gl-gray: #7f8fa4;
 $gl-padding: 16px;

app/assets/stylesheets/generic/avatar.scss

@@ -23,10 +23,12 @@
   &.s24 { width: 24px; height: 24px; margin-right: 8px; }
   &.s26 { width: 26px; height: 26px; margin-right: 8px; }
   &.s32 { width: 32px; height: 32px; margin-right: 10px; }
+  &.s36 { width: 36px; height: 36px; 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; }
+  &.s140 { width: 140px; height: 140px; margin-right: 20px; }
   &.s160 { width: 160px; height: 160px; margin-right: 20px; }
 }
 
@@ -40,5 +42,6 @@
   &.s32 { font-size: 22px; line-height: 32px; }
   &.s60 { font-size: 32px; line-height: 60px; }
   &.s90 { font-size: 36px; line-height: 90px; }
-  &.s160 { font-size: 96px; line-height: 1.33; }
+  &.s140 { font-size: 72px; line-height: 140px; }
+  &.s160 { font-size: 96px; line-height: 160px; }
 }

app/assets/stylesheets/generic/blocks.scss

@@ -27,6 +27,11 @@
   border-bottom: 1px solid #e7e9ed;
   color: $gl-gray;
 
+  &.footer-block {
+    margin-top: 0;
+    margin-bottom: -$gl-padding;
+  }
+
   .title {
     color: $gl-text-color;
   }

app/assets/stylesheets/generic/sidebar.scss

@@ -127,7 +127,7 @@
       width: $sidebar_collapsed_width;
 
       a {
-        padding-left: 7px;
+        padding-left: 12px;
 
         .gitlab-text-container {
           display: none;
@@ -151,8 +151,12 @@
     }
 
     .sidebar-user {
-      padding-left: 7px;
+      padding-left: 12px;
       width: $sidebar_collapsed_width;
+
+      .username {
+        display: none;
+      }
     }
   }
 }
@@ -210,7 +214,7 @@
     margin-left: 10px;
     width: $sidebar_width - 2 * 10px;
     font-size: 16px;
-    line-height: 44px;
+    line-height: 34px;
   }
 }
 
@@ -231,8 +235,8 @@
       overflow: hidden;
 
       img {
-        width: $gl-avatar-size;
-        height: $gl-avatar-size;
+        width: 36px;
+        height: 36px;
         float: left;
       }
 
@@ -245,7 +249,7 @@
           margin: 0;
           margin-left: 14px;
           font-size: 19px;
-          line-height: 49px;
+          line-height: 41px;
           font-weight: normal;
         }
       }

app/assets/stylesheets/pages/projects.scss

@@ -16,6 +16,10 @@
 
 .project-home-panel {
   text-align: center;
+  background: #f7f8fa;
+  margin: -$gl-padding;
+  padding: $gl-padding;
+  padding-top: 40px;
 
   .project-identicon-holder {
     margin-bottom: 15px;
@@ -38,13 +42,12 @@
     h1 {
       margin: 0;
       margin-bottom: 10px;
-      font-size: 26px;
-      font-weight: bold;
+      font-size: 23px;
+      font-weight: normal;
     }
 
     p {
-      font-size: 18px;
-      color: #666;
+      color: #7f8fa4;
       display: inline;
     }
   }
@@ -52,6 +55,10 @@
   .git-clone-holder {
     max-width: 600px;
     margin: 20px auto;
+
+    .form-control {
+      background: #FFF;
+    }
   }
 
   .visibility-level-label {
@@ -62,17 +69,18 @@
   }
 
   .project-repo-buttons {
-    margin-top: 25px;
+    margin-top: $gl-padding;
     margin-bottom: 25px;
 
     .btn {
       @extend .btn-info;
 
+      text-transform: uppercase;
+      font-size: 15px;
+      line-height: 20px;
+      padding: 8px 14px;
+      border-radius: 3px;
       margin-left: 10px;
-      font-weight: bold;
-      font-size: 14px;
-      line-height: 16px;
-      padding: 8px 12px;
 
       .count {
         padding-left: 7px;
@@ -232,10 +240,23 @@ table.table.protected-branches-list tr.no-border {
 
 .project-stats {
   text-align: center;
+  margin-top: 0;
+  margin-bottom: 0;
+  padding-top: 5px;
+  padding-bottom: 0;
 
-  ul.nav-pills { display:inline-block; }
-  li { display:inline; }
-  a { float:left; }
+  ul.nav-pills {
+    display:inline-block;
+  }
+
+  li {
+    display:inline;
+  }
+
+  a {
+    float:left;
+    font-size: 17px;
+  }
 
   li.missing a {
     color: #bbb;

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 s46'
+        = image_tag avatar_icon(current_user.email, 60), alt: 'User activity', class: 'avatar avatar s36'
         .username
           = current_user.username
   .content-wrapper

app/views/projects/show.html.haml

@@ -11,7 +11,7 @@
 
 = render "home_panel"
 
-.project-stats
+.project-stats.gray-content-block
   %ul.nav.nav-pills
     %li
       = link_to namespace_project_commits_path(@project.namespace, @project, @ref || @repository.root_ref) do
@@ -63,7 +63,6 @@
       = icon("exclamation-triangle fw")
       Archived project! Repository is read-only
 
-%hr
 %section
   - if prefer_readme?
     = render 'projects/readme'
@@ -74,8 +73,8 @@
 - if current_user
   - access = user_max_access_in_project(current_user, @project)
   - if access
-    %hr
-    %p.light
+    .prepend-top-20
+      .gray-content-block.footer-block.center
         You have #{access} access to this project.
         - if @project.project_member_by_id(current_user)
           = link_to leave_namespace_project_project_members_path(@project.namespace, @project),