Merge branch 'project-header' into 'master'

Updated project header

## What does this MR do?

Updates the project header.

## What are the relevant issue numbers?

Closes #18544, #18832 

## Screenshots (if relevant)

![Screen_Shot_2016-06-29_at_14.16.16](/uploads/4df895e7ecf42e5ddab3f2f1e47f8c7e/Screen_Shot_2016-06-29_at_14.16.16.png)


See merge request !4989

CHANGELOG

@@ -16,6 +16,7 @@ v 8.10.0 (unreleased)
   - Fix check for New Branch button on Issue page !4630 (winniehell)
   - Fix MR-auto-close text added to description. !4836
   - Fix pagination when sorting by columns with lots of ties (like priority)
+  - Updated project header design
   - Exclude email check from the standard health check
   - Fix changing issue state columns in milestone view
   - Add notification settings dropdown for groups

app/assets/stylesheets/pages/projects.scss

@@ -64,86 +64,49 @@
 }
 
 .project-home-panel {
-  background: $white-light;
-  text-align: left;
-  padding: 24px 0;
+  padding-top: 24px;
+  padding-bottom: 24px;
 
-  .container-fluid {
-    position: relative;
-
-    @media (min-width: $screen-lg-min) {
-      .row {
-        display: flex;
-        -ms-flex-align: center;
-        -webkit-align-items: center;
-        -webkit-box-align: center;
-      }
-    }
+  @media (min-width: $screen-sm-min) {
+    border-bottom: 1px solid $border-color;
   }
 
-  .cover-controls {
-    .project-settings-dropdown {
-      margin-left: 10px;
-      display: inline-block;
+  .project-avatar {
+    float: none;
+    margin-left: auto;
+    margin-right: auto;
 
-      .dropdown-menu {
-        left: auto;
-        width: auto;
-        right: 0;
-        max-width: 240px;
-      }
+    &.identicon {
+      border-radius: 50%;
     }
   }
 
-  .cover-title {
-    margin-bottom: 0;
-  }
-
-  .project-image-container {
-    @include make-sm-column(1);
-    max-width: 86px;
-    min-width: 86px;
-    padding-right: 0;
-
-    @media (max-width: $screen-md-max) {
-      padding-left: 0;
-      margin: 0 0 10px;
-      max-width: none;
-      min-width: none;
+  .project-title {
+    margin-top: 10px;
+    margin-bottom: 10px;
+    font-size: 24px;
+    font-weight: 400;
+    line-height: 1;
 
-      .avatar.s70 {
-        margin: auto;
-      }
-    }
+    .fa {
+      margin-left: 2px;
+      font-size: 12px;
+      vertical-align: middle;
     }
-
-  .project-info {
-    @include make-sm-column(10);
-
-    h1 {
-      font-size: 24px;
-      font-weight: normal;
-      margin: 0;
   }
 
   .project-home-desc {
-      p {
-        margin: 0;
-      }
-    }
-  }
+    margin-left: auto;
+    margin-right: auto;
+    margin-bottom: 15px;
+    max-width: 480px;
 
-  .identicon {
-    float: left;
-    @include border-radius(50%);
+    > p {
+      margin-bottom: 0;
     }
-
-  .avatar {
-    float: none;
   }
 
   .notifications-btn {
-
     .fa-bell,
     .fa-spinner {
       margin-right: 6px;
@@ -153,15 +116,14 @@
       margin-left: 6px;
     }
   }
+}
 
-  .project-repo-buttons {
+.project-repo-buttons {
   font-size: 0;
 
   .btn {
     @include btn-gray;
     padding: 3px 10px;
-      text-transform: none;
-      background-color: $background-color;
 
     .fa {
       color: $layout-link-gray;
@@ -172,19 +134,18 @@
     }
   }
 
-    form {
+  .project-repo-btn-group,
+  .notification-dropdown {
     margin-left: 10px;
   }
 
   .count-buttons {
     display: inline-block;
     vertical-align: top;
-      margin-top: 16px;
   }
 
   .project-clone-holder {
     display: inline-block;
-      margin-top: 16px;
 
     input {
       height: 29px;
@@ -210,6 +171,7 @@
         margin-top: -6px;
         border-width: 7px 5px 7px 0;
         border-right-color: #dce0e5;
+        pointer-events: none;
       }
 
       &:after {
@@ -224,6 +186,7 @@
         margin-top: -9px;
         border-width: 10px 7px 10px 0;
         border-right-color: #fff;
+        pointer-events: none;
       }
     }
     .count {
@@ -242,7 +205,6 @@
       text-align: center;
       vertical-align: middle;
       touch-action: manipulation;
-        cursor: pointer;
       background-image: none;
       white-space: nowrap;
       margin: 0 10px 0 4px;
@@ -256,26 +218,6 @@
       }
     }
   }
-  }
-
-  .project-right-buttons {
-    position: absolute;
-    right: 16px;
-    bottom: 0;
-
-    @media (max-width: $screen-md-max) {
-      top: 0;
-    }
-  }
-
-  @media (max-width: $screen-md-max) {
-    text-align: center;
-
-    .project-info,
-    .project-image-container {
-      width: 100%;
-    }
-  }
 }
 
 .split-one {
@@ -421,36 +363,42 @@ a.deploy-project-label {
 }
 
 .project-stats {
-  margin-top: $gl-padding;
-  margin-bottom: 0;
-  padding: 0;
-  background-color: $white-light;
   font-size: 0;
+  border-bottom: 1px solid $border-color;
 
-  ul.nav {
-    display: inline-block;
+  .nav {
+    padding-top: 12px;
+    padding-bottom: 12px;
   }
 
-  .nav li {
+  .nav > li {
     display: inline-block;
-    margin: 16px 0;
-    margin-right: 16px;
+
+    &:not(:last-child) {
+      margin-right: $gl-padding;
+    }
+
+    &.project-repo-buttons-right {
+      margin-top: 10px;
+
+      @media (min-width: $screen-md-min) {
+        float: right;
+        margin-top: 0;
+      }
+    }
   }
 
   .nav > li > a {
+    padding: 0;
     background-color: transparent;
-    padding: 5px 10px;
     font-size: 15px;
+    line-height: 29px;
     color: $notes-light-color;
-  }
 
-  li {
-    display: inline;
+    &:hover,
+    &:focus {
+      color: darken($notes-light-color, 15%);
     }
-
-  a {
-    float: left;
-    font-size: 17px;
   }
 
   li.missing {
@@ -458,6 +406,8 @@ a.deploy-project-label {
     border-radius: $border-radius-default;
 
     a {
+      padding-left: 10px;
+      padding-right: 10px;
       color: $notes-light-color;
       display: block;
     }
@@ -466,10 +416,6 @@ a.deploy-project-label {
       background-color: $gray-normal;
     }
   }
-
-  &.row-content-block.second-block {
-    margin-top: 0;
-  }
 }
 
 pre.light-well {
@@ -557,8 +503,32 @@ pre.light-well {
 }
 
 .project-last-commit {
+  @media (min-width: $screen-sm-min) {
+    margin-top: $gl-padding;
+  }
+
+  &.container-fluid {
+    padding-top: 12px;
+    padding-bottom: 12px;
+    background-color: $background-color;
+    border: 1px solid $border-color;
+    border-right-width: 0;
+    border-left-width: 0;
+
+    @media (min-width: $screen-sm-min) {
+      border-right-width: 1px;
+      border-left-width: 1px;
+    }
+  }
+
+  &.container-limited {
+    @media (min-width: 1281px) {
+      border-radius: $border-radius-base;
+    }
+  }
+
   .ci-status {
-    margin-right: 16px;
+    margin-right: $gl-padding;
   }
 
   .commit-row-message {
@@ -566,19 +536,12 @@ pre.light-well {
   }
 
   .commit_short_id {
-    margin: 0 5px;
+    margin-right: 5px;
     color: $gl-link-color;
     font-weight: 600;
   }
 
   .commit-author-link {
-    margin-left: 7px;
-    text-decoration: none;
-    .avatar {
-      float: none;
-      margin-right: 4px;
-    }
-
     .commit-author-name {
       font-weight: 600;
     }
@@ -601,15 +564,10 @@ pre.light-well {
 }
 
 .git-clone-holder {
-  width: 498px;
+  width: 380px;
 
   .btn-clipboard {
     border: 1px solid $border-color;
-    padding: 6px $gl-padding;
-  }
-
-  .project-home-dropdown + & {
-    margin-right: 45px;
   }
 
   .clone-options {

app/views/projects/_home_panel.html.haml

 - empty_repo = @project.empty_repo?
-.project-home-panel.cover-block.clearfix{:class => ("empty-project" if empty_repo)}
+.project-home-panel.text-center{ class: ("empty-project" if empty_repo) }
   %div{ class: container_class }
-    .row
-      .project-image-container
-        = project_icon(@project, alt: '', class: 'project-avatar avatar s70')
-      .project-info
-        .cover-title.project-home-desc
-          %h1
+    = project_icon(@project, alt: @project.name, class: 'project-avatar avatar s70')
+    %h1.project-title
       = @project.name
       %span.visibility-icon.has-tooltip{data: { container: 'body' }, title: visibility_icon_description(@project)}
         = visibility_level_icon(@project.visibility_level, fw: false)
 
+    .project-home-desc
       - if @project.description.present?
-          .cover-desc.project-home-desc
         = markdown(@project.description, pipeline: :description)
 
       - if forked_from_project = @project.forked_from_project
-          .cover-desc
+        %p
           Forked from
           = link_to project_path(forked_from_project) do
             = forked_from_project.namespace.try(:name)
@@ -29,13 +25,5 @@
       .project-clone-holder
         = render "shared/clone_panel"
 
-      .project-repo-buttons.btn-group.project-right-buttons
-        - if current_user
-          .pull-left.append-right-10= render 'shared/members/access_request_buttons', source: @project
-
-        = render "projects/buttons/download"
-        = render 'projects/buttons/dropdown'
-        = render 'shared/notifications/button', notification_setting: @notification_setting
-
 :javascript
   new Star();

app/views/projects/_last_commit.html.haml

-.project-last-commit
-  - if commit.status
+- if commit.status
   = link_to builds_namespace_project_commit_path(commit.project.namespace, commit.project, commit), class: "ci-status ci-#{commit.status}" do
     = ci_icon_for_status(commit.status)
     = ci_label_for_status(commit.status)
 
-  = link_to commit.short_id, namespace_project_commit_path(project.namespace, project, commit), class: "commit_short_id"
-  = link_to_gfm commit.title, namespace_project_commit_path(project.namespace, project, commit), class: "commit-row-message"
-  ·
-  #{time_ago_with_tooltip(commit.committed_date, skip_js: true)} by
-  = commit_author_link(commit, avatar: true, size: 24)
+= link_to commit.short_id, namespace_project_commit_path(project.namespace, project, commit), class: "commit_short_id"
+= link_to_gfm commit.title, namespace_project_commit_path(project.namespace, project, commit), class: "commit-row-message"
+·
+#{time_ago_with_tooltip(commit.committed_date, skip_js: true)} by
+= commit_author_link(commit, avatar: true, size: 24)

app/views/projects/buttons/_fork.html.haml

@@ -14,6 +14,5 @@
         Fork
       %div.count-with-arrow
         %span.arrow
-        %span.count
-          = link_to namespace_project_forks_path(@project.namespace, @project) do
+        = link_to namespace_project_forks_path(@project.namespace, @project), class: "count" do
           = @project.forks_count

app/views/projects/show.html.haml

@@ -12,8 +12,7 @@
 = render 'projects/last_push'
 = render "home_panel"
 
-.project-stats.row-content-block.second-block
-  %div{ class: container_class }
+%nav.project-stats{ class: (container_class) }
   %ul.nav
     %li
       = link_to project_files_path(@project) do
@@ -61,10 +60,18 @@
         %li.missing
           = link_to add_special_file_path(@project, file_name: '.gitlab-ci.yml') do
             Set Up CI
+    %li.project-repo-buttons-right
+      .project-repo-buttons.project-right-buttons
+        - if current_user
+          = render 'shared/members/access_request_buttons', source: @project
+
+        .btn-group.project-repo-btn-group
+          = render "projects/buttons/download"
+          = render 'projects/buttons/dropdown'
 
+        = render 'shared/notifications/button', notification_setting: @notification_setting
 - if @repository.commit
-  .content-block.second-block.white
-    %div{ class: container_class }
+  .project-last-commit{ class: container_class }
     = render 'projects/last_commit', commit: @repository.commit, project: @project
 
 %div{ class: container_class }