Merge branch '19205-group-header-redesign' into 'master'

19205 Redesign group page header to match new navigation

## What does this MR do?
Redesigns group page to match comps

## Screenshots (if relevant)
Before:
![Screen_Shot_2016-11-08_at_12.50.53_PM](/uploads/6c958e2ab05c1a73c9a96de25490ba2b/Screen_Shot_2016-11-08_at_12.50.53_PM.png)
After:
![Screen_Shot_2016-11-08_at_12.50.34_PM](/uploads/822f81df8a0f82a4bdeee3739be5d1f7/Screen_Shot_2016-11-08_at_12.50.34_PM.png)

## Does this MR meet the acceptance criteria?

- [ ] [Changelog entry](https://docs.gitlab.com/ce/development/changelog.html) added
- [ ] [Documentation created/updated](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/development/doc_styleguide.md)
- [ ] API support added
- Tests
  - [ ] Added for this feature/bug
  - [ ] All builds are passing
- [ ] Conform by the [merge request performance guides](http://docs.gitlab.com/ce/development/merge_request_performance_guidelines.html)
- [ ] Conform by the [style guides](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CONTRIBUTING.md#style-guides)
- [ ] Branch has no merge conflicts with `master` (if it does - rebase it please)
- [ ] [Squashed related commits together](https://git-scm.com/book/en/Git-Tools-Rewriting-History#Squashing-Commits)

## What are the relevant issue numbers?
Closes #19205

See merge request !7363

3 files changed, 23 insertions, 34 deletions

diff --git a/app/assets/stylesheets/framework/mobile.scss b/app/assets/stylesheets/framework/mobile.scss
index c1ed43bc20f..9391661a595 100644
--- a/app/assets/stylesheets/framework/mobile.scss
+++ b/app/assets/stylesheets/framework/mobile.scss
@@ -71,7 +71,7 @@
     display: none;
   }
 
-  .group-right-buttons {
+  .group-buttons {
     display: none;
   }
 
diff --git a/app/assets/stylesheets/pages/groups.scss b/app/assets/stylesheets/pages/groups.scss
index 4375e29c8db..57d028cec8c 100644
--- a/app/assets/stylesheets/pages/groups.scss
+++ b/app/assets/stylesheets/pages/groups.scss
@@ -10,7 +10,6 @@
 }
 
 .group-row {
-
   .stats {
     float: right;
     line-height: $list-text-height;
@@ -23,36 +22,18 @@
 }
 
 .ldap-group-links {
-
   .form-actions {
     margin-bottom: $gl-padding;
   }
 }
 
-.groups-cover-block {
-
-  .container-fluid {
-    position: relative;
-  }
-
-  .group-right-buttons {
-    position: absolute;
-    right: 16px;
-
-    .btn {
-      @include btn-gray;
-      padding: 3px 10px;
-      background-color: $background-color;
-    }
-  }
-
-  .group-avatar {
-    border: 0;
+.group-buttons {
+  .notification-dropdown {
+    display: inline-block;
   }
 }
 
 .groups-header {
-
   @media (min-width: $screen-sm-min) {
     .nav-links {
       width: 35%;
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index f7d54564530..ad46a2a9128 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -86,7 +86,8 @@
   }
 }
 
-.project-home-panel {
+.project-home-panel,
+.group-home-panel {
   padding-top: 24px;
   padding-bottom: 24px;
 
@@ -94,7 +95,8 @@
     border-bottom: 1px solid $border-color;
   }
 
-  .project-avatar {
+  .project-avatar,
+  .group-avatar {
     float: none;
     margin: 0 auto;
     border: none;
@@ -104,7 +106,8 @@
     }
   }
 
-  .project-title {
+  .project-title,
+  .group-title {
     margin-top: 10px;
     margin-bottom: 10px;
     font-size: 24px;
@@ -118,10 +121,11 @@
     }
   }
 
-  .project-home-desc {
+  .project-home-desc,
+  .group-home-desc {
     margin-left: auto;
     margin-right: auto;
-    margin-bottom: 15px;
+    margin-bottom: 0;
     max-width: 700px;
 
     > p {
@@ -141,13 +145,18 @@
   }
 }
 
-.project-repo-buttons {
-  font-size: 0;
+.project-repo-buttons,
+.group-buttons {
+  margin-top: 15px;
 
   .btn {
     @include btn-gray;
     padding: 3px 10px;
 
+    &:last-child {
+      margin-left: 0;
+    }
+
     .fa {
       color: $layout-link-gray;
     }
@@ -168,7 +177,8 @@
     }
   }
 
-  .project-repo-btn-group,
+  .download-button,
+  .dropdown-toggle,
   .notification-dropdown,
   .project-dropdown {
     margin-left: 10px;
@@ -474,9 +484,7 @@ a.deploy-project-label {
       margin-right: $gl-padding;
     }
 
-    &.project-repo-buttons-right {
-      margin-top: 10px;
-
+    &.right {
       @media (min-width: $screen-md-min) {
         float: right;
         margin-top: 0;