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

1 files changed, 163 insertions, 205 deletions

diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index 817c2982923..3325b586496 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/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 {
+    margin-left: auto;
+    margin-right: auto;
+    margin-bottom: 15px;
+    max-width: 480px;
 
-    .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 +116,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 +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;
-  }
 
-  a {
-    float: left;
-    font-size: 17px;
+    &:hover,
+    &:focus {
+      color: darken($notes-light-color, 15%);
+    }
   }
 
   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 {