Updated project header

Closes #18544

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

app/assets/stylesheets/pages/projects.scss

@@ -64,86 +64,39 @@
 }
 
 .project-home-panel {
-  background: $white-light;
-  text-align: left;
-  padding: 24px 0;
-
-  .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;
-      }
-    }
-  }
+  padding-top: 24px;
+  padding-bottom: 24px;
+  border-bottom: 1px solid $border-color;
 
-  .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 {
-      p {
-        margin: 0;
-      }
-    }
-  }
+    margin-bottom: 15px;
 
-  .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 +106,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 +124,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 +161,7 @@
         margin-top: -6px;
         border-width: 7px 5px 7px 0;
         border-right-color: #dce0e5;
+        pointer-events: none;
       }
 
       &:after {
@@ -224,6 +176,7 @@
         margin-top: -9px;
         border-width: 10px 7px 10px 0;
         border-right-color: #fff;
+        pointer-events: none;
       }
     }
     .count {
@@ -242,7 +195,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 +208,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 +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;
+    &:hover,
+    &:focus {
+      color: darken($notes-light-color, 15%);
     }
-
-  a {
-    float: left;
-    font-size: 17px;
   }
 
   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 {

app/views/projects/_home_panel.html.haml

 - 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-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
+      .project-home-desc
         = markdown(@project.description, pipeline: :description)
 
     - if forked_from_project = @project.forked_from_project
@@ -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.pull-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 }