Updated project header

Closes #18544

6 files changed, 221 insertions, 293 deletions

diff --git a/app/assets/stylesheets/framework/avatar.scss b/app/assets/stylesheets/framework/avatar.scss
index bb8d71fbae8..f805ee59938 100644
--- a/app/assets/stylesheets/framework/avatar.scss
+++ b/app/assets/stylesheets/framework/avatar.scss
@@ -15,7 +15,7 @@
     &.s24 { margin-right: 4px; }
   }
 
-  &.group-avatar, &.project-avatar, &.avatar-tile {
+  &.group-avatar, &.avatar-tile {
     @include border-radius(0);
   }
 
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index 817c2982923..37f21b99d3f 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -64,86 +64,39 @@
 }
 
 .project-home-panel {
-  background: $white-light;
-  text-align: left;
-  padding: 24px 0;
+  padding-top: 24px;
+  padding-bottom: 24px;
+  border-bottom: 1px solid $border-color;
 
-  .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;
-      }
-    }
-  }
-
-  .cover-controls {
-    .project-settings-dropdown {
-      margin-left: 10px;
-      display: inline-block;
-
-      .dropdown-menu {
-        left: auto;
-        width: auto;
-        right: 0;
-        max-width: 240px;
-      }
-    }
-  }
-
-  .cover-title {
-    margin-bottom: 0;
+  .project-avatar {
+    float: none;
+    margin-left: auto;
+    margin-right: auto;
   }
 
-  .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 {
+    margin-bottom: 15px;
 
-    .project-home-desc {
-      p {
-        margin: 0;
-      }
+    > p {
+      margin-bottom: 0;
     }
   }
 
-  .identicon {
-    float: left;
-    @include border-radius(50%);
-  }
-
-  .avatar {
-    float: none;
-  }
-
   .notifications-btn {
-
     .fa-bell,
     .fa-spinner {
       margin-right: 6px;
@@ -153,127 +106,106 @@
       margin-left: 6px;
     }
   }
+}
 
-  .project-repo-buttons {
-    font-size: 0;
-
-    .btn {
-      @include btn-gray;
-      padding: 3px 10px;
-      text-transform: none;
-      background-color: $background-color;
+.project-repo-buttons {
+  font-size: 0;
 
-      .fa {
-        color: $layout-link-gray;
-      }
+  .btn {
+    @include btn-gray;
+    padding: 3px 10px;
 
-      .fa-caret-down {
-        margin-left: 3px;
-      }
+    .fa {
+      color: $layout-link-gray;
     }
 
-    form {
-      margin-left: 10px;
+    .fa-caret-down {
+      margin-left: 3px;
     }
+  }
 
-    .count-buttons {
-      display: inline-block;
-      vertical-align: top;
-      margin-top: 16px;
-    }
+  .project-repo-btn-group,
+  .notification-dropdown {
+    margin-left: 10px;
+  }
 
-    .project-clone-holder {
-      display: inline-block;
-      margin-top: 16px;
+  .count-buttons {
+    display: inline-block;
+    vertical-align: top;
+  }
 
-      input {
-        height: 29px;
-      }
+  .project-clone-holder {
+    display: inline-block;
+
+    input {
+      height: 29px;
     }
+  }
 
-    .count-with-arrow {
-      display: inline-block;
-      position: relative;
-      margin-left: 4px;
-
-      .arrow {
-        &:before {
-          content: '';
-          display: inline-block;
-          position: absolute;
-          width: 0;
-          height: 0;
-          border-color: transparent;
-          border-style: solid;
-          top: 50%;
-          left: 0;
-          margin-top: -6px;
-          border-width: 7px 5px 7px 0;
-          border-right-color: #dce0e5;
-        }
-
-        &:after {
-          content: '';
-          position: absolute;
-          width: 0;
-          height: 0;
-          border-color: transparent;
-          border-style: solid;
-          top: 50%;
-          left: 1px;
-          margin-top: -9px;
-          border-width: 10px 7px 10px 0;
-          border-right-color: #fff;
-        }
-      }
-      .count {
-        @include btn-gray;
+  .count-with-arrow {
+    display: inline-block;
+    position: relative;
+    margin-left: 4px;
+
+    .arrow {
+      &:before {
+        content: '';
         display: inline-block;
-        background: white;
-        border-radius: 2px;
-        border-width: 1px;
+        position: absolute;
+        width: 0;
+        height: 0;
+        border-color: transparent;
         border-style: solid;
-        font-size: 13px;
-        font-weight: 600;
-        line-height: 13px;
-        padding: $gl-vert-padding $gl-padding;
-        letter-spacing: .4px;
-        padding: 7px 14px;
-        text-align: center;
-        vertical-align: middle;
-        touch-action: manipulation;
-        cursor: pointer;
-        background-image: none;
-        white-space: nowrap;
-        margin: 0 10px 0 4px;
-
-        a {
-          color: inherit;
-        }
-
-        &:hover {
-          background: #fff;
-        }
+        top: 50%;
+        left: 0;
+        margin-top: -6px;
+        border-width: 7px 5px 7px 0;
+        border-right-color: #dce0e5;
+        pointer-events: none;
       }
-    }
-  }
-
-  .project-right-buttons {
-    position: absolute;
-    right: 16px;
-    bottom: 0;
 
-    @media (max-width: $screen-md-max) {
-      top: 0;
+      &:after {
+        content: '';
+        position: absolute;
+        width: 0;
+        height: 0;
+        border-color: transparent;
+        border-style: solid;
+        top: 50%;
+        left: 1px;
+        margin-top: -9px;
+        border-width: 10px 7px 10px 0;
+        border-right-color: #fff;
+        pointer-events: none;
+      }
     }
-  }
-
-  @media (max-width: $screen-md-max) {
-    text-align: center;
+    .count {
+      @include btn-gray;
+      display: inline-block;
+      background: white;
+      border-radius: 2px;
+      border-width: 1px;
+      border-style: solid;
+      font-size: 13px;
+      font-weight: 600;
+      line-height: 13px;
+      padding: $gl-vert-padding $gl-padding;
+      letter-spacing: .4px;
+      padding: 7px 14px;
+      text-align: center;
+      vertical-align: middle;
+      touch-action: manipulation;
+      background-image: none;
+      white-space: nowrap;
+      margin: 0 10px 0 4px;
+
+      a {
+        color: inherit;
+      }
 
-    .project-info,
-    .project-image-container {
-      width: 100%;
+      &:hover {
+        background: #fff;
+      }
     }
   }
 }
@@ -421,36 +353,33 @@ 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: $gl-padding;
+    padding-bottom: $gl-padding;
   }
 
-  .nav li {
+  .nav > li {
     display: inline-block;
-    margin: 16px 0;
-    margin-right: 16px;
+
+    &:not(:last-child) {
+      margin-right: $gl-padding;
+    }
   }
 
   .nav > li > a {
+    padding: 0;
     background-color: transparent;
-    padding: 5px 10px;
     font-size: 15px;
+    line-height: 29px;
     color: $notes-light-color;
-  }
-
-  li {
-    display: inline;
-  }
 
-  a {
-    float: left;
-    font-size: 17px;
+    &:hover,
+    &:focus {
+      color: darken($notes-light-color, 15%);
+    }
   }
 
   li.missing {
@@ -466,10 +395,6 @@ a.deploy-project-label {
       background-color: $gray-normal;
     }
   }
-
-  &.row-content-block.second-block {
-    margin-top: 0;
-  }
 }
 
 pre.light-well {
@@ -557,6 +482,21 @@ pre.light-well {
 }
 
 .project-last-commit {
+  margin-top: $gl-padding;
+
+  &.container-fluid {
+    padding-top: 12px;
+    padding-bottom: 12px;
+    background-color: $background-color;
+    border: 1px solid $border-color;
+  }
+
+  &.container-limited {
+    @media (min-width: 1281px) {
+      border-radius: $border-radius-base;
+    }
+  }
+
   .ci-status {
     margin-right: 16px;
   }
@@ -601,15 +541,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 {
diff --git a/app/views/projects/_home_panel.html.haml b/app/views/projects/_home_panel.html.haml
index 540efa4780f..c935d05636d 100644
--- a/app/views/projects/_home_panel.html.haml
+++ b/app/views/projects/_home_panel.html.haml
@@ -1,41 +1,29 @@
 - empty_repo = @project.empty_repo?
-.project-home-panel.cover-block.clearfix{: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.name
-            %span.visibility-icon.has-tooltip{data: { container: 'body' }, title: visibility_icon_description(@project)}
-              = visibility_level_icon(@project.visibility_level, fw: false)
+.project-home-panel.text-center{ class: ("empty-project" if empty_repo) }
+  %div{class: container_class }
+    = 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)
 
-        - if @project.description.present?
-          .cover-desc.project-home-desc
-            = markdown(@project.description, pipeline: :description)
+    - if @project.description.present?
+      .project-home-desc
+        = markdown(@project.description, pipeline: :description)
 
-        - if forked_from_project = @project.forked_from_project
-          .cover-desc
-            Forked from
-            = link_to project_path(forked_from_project) do
-              = forked_from_project.namespace.try(:name)
+    - if forked_from_project = @project.forked_from_project
+      .cover-desc
+        Forked from
+        = link_to project_path(forked_from_project) do
+          = forked_from_project.namespace.try(:name)
 
-        .project-repo-buttons.project-action-buttons
-          .count-buttons
-            = render 'projects/buttons/star'
-            = render 'projects/buttons/fork'
+    .project-repo-buttons.project-action-buttons
+      .count-buttons
+        = render 'projects/buttons/star'
+        = render 'projects/buttons/fork'
 
-          .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
+      .project-clone-holder
+        = render "shared/clone_panel"
 
 :javascript
   new Star();
diff --git a/app/views/projects/_last_commit.html.haml b/app/views/projects/_last_commit.html.haml
index 66c30283c7a..630ae7d6140 100644
--- a/app/views/projects/_last_commit.html.haml
+++ b/app/views/projects/_last_commit.html.haml
@@ -1,11 +1,10 @@
-.project-last-commit
-  - 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)
+- 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)
diff --git a/app/views/projects/buttons/_fork.html.haml b/app/views/projects/buttons/_fork.html.haml
index 34ad9fe2c43..a9eaed4c5f6 100644
--- a/app/views/projects/buttons/_fork.html.haml
+++ b/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
-            = @project.forks_count
+        = link_to namespace_project_forks_path(@project.namespace, @project), class: "count" do
+          = @project.forks_count
diff --git a/app/views/projects/show.html.haml b/app/views/projects/show.html.haml
index f6e81af2638..50c252e1359 100644
--- a/app/views/projects/show.html.haml
+++ b/app/views/projects/show.html.haml
@@ -12,60 +12,67 @@
 = render 'projects/last_push'
 = render "home_panel"
 
-.project-stats.row-content-block.second-block
-  %div{ class: container_class }
-    %ul.nav
-      %li
-        = link_to project_files_path(@project) do
-          Files (#{repository_size})
-      %li
-        = link_to namespace_project_commits_path(@project.namespace, @project, current_ref) do
-          #{'Commit'.pluralize(@project.commit_count)} (#{number_with_delimiter(@project.commit_count)})
-      %li
-        = link_to namespace_project_branches_path(@project.namespace, @project) do
-          #{'Branch'.pluralize(@repository.branch_count)} (#{number_with_delimiter(@repository.branch_count)})
+%nav.project-stats{ class: (container_class) }
+  %ul.nav
+    %li
+      = link_to project_files_path(@project) do
+        Files (#{repository_size})
+    %li
+      = link_to namespace_project_commits_path(@project.namespace, @project, current_ref) do
+        #{'Commit'.pluralize(@project.commit_count)} (#{number_with_delimiter(@project.commit_count)})
+    %li
+      = link_to namespace_project_branches_path(@project.namespace, @project) do
+        #{'Branch'.pluralize(@repository.branch_count)} (#{number_with_delimiter(@repository.branch_count)})
+    %li
+      = link_to namespace_project_tags_path(@project.namespace, @project) do
+        #{'Tag'.pluralize(@repository.tag_count)} (#{number_with_delimiter(@repository.tag_count)})
+
+    - if default_project_view != 'readme' && @repository.readme
       %li
-        = link_to namespace_project_tags_path(@project.namespace, @project) do
-          #{'Tag'.pluralize(@repository.tag_count)} (#{number_with_delimiter(@repository.tag_count)})
+        = link_to 'Readme', readme_path(@project)
 
-      - if default_project_view != 'readme' && @repository.readme
-        %li
-          = link_to 'Readme', readme_path(@project)
+    - if @repository.changelog
+      %li
+        = link_to 'Changelog', changelog_path(@project)
 
-      - if @repository.changelog
-        %li
-          = link_to 'Changelog', changelog_path(@project)
+    - if @repository.license_blob
+      %li
+        = link_to license_short_name(@project), license_path(@project)
 
-      - if @repository.license_blob
-        %li
-          = link_to license_short_name(@project), license_path(@project)
+    - if @repository.contribution_guide
+      %li
+        = link_to 'Contribution guide', contribution_guide_path(@project)
 
-      - if @repository.contribution_guide
-        %li
-          = link_to 'Contribution guide', contribution_guide_path(@project)
+    - if current_user && can_push_branch?(@project, @project.default_branch)
+      - unless @repository.changelog
+        %li.missing
+          = link_to add_special_file_path(@project, file_name: 'CHANGELOG') do
+            Add Changelog
+      - unless @repository.license_blob
+        %li.missing
+          = link_to add_special_file_path(@project, file_name: 'LICENSE') do
+            Add License
+      - unless @repository.contribution_guide
+        %li.missing
+          = link_to add_special_file_path(@project, file_name: 'CONTRIBUTING.md', commit_message: 'Add contribution guide') do
+            Add Contribution guide
+      - unless @repository.gitlab_ci_yml
+        %li.missing
+          = link_to add_special_file_path(@project, file_name: '.gitlab-ci.yml') do
+            Set Up CI
+    %li.pull-right
+      .project-repo-buttons.project-right-buttons
+        - if current_user
+          = render 'shared/members/access_request_buttons', source: @project
 
-      - if current_user && can_push_branch?(@project, @project.default_branch)
-        - unless @repository.changelog
-          %li.missing
-            = link_to add_special_file_path(@project, file_name: 'CHANGELOG') do
-              Add Changelog
-        - unless @repository.license_blob
-          %li.missing
-            = link_to add_special_file_path(@project, file_name: 'LICENSE') do
-              Add License
-        - unless @repository.contribution_guide
-          %li.missing
-            = link_to add_special_file_path(@project, file_name: 'CONTRIBUTING.md', commit_message: 'Add contribution guide') do
-              Add Contribution guide
-        - unless @repository.gitlab_ci_yml
-          %li.missing
-            = link_to add_special_file_path(@project, file_name: '.gitlab-ci.yml') do
-              Set Up CI
+        .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 }
-      = render 'projects/last_commit', commit: @repository.commit, project: @project
+  .project-last-commit{ class: container_class }
+    = render 'projects/last_commit', commit: @repository.commit, project: @project
 
 %div{ class: container_class }
   - if @project.archived?