19205 Redesign group page header to match new navigation

app/assets/stylesheets/framework/mobile.scss

@@ -71,7 +71,7 @@
     display: none;
   }
 
-  .group-right-buttons {
+  .group-buttons {
     display: none;
   }
 

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%;

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;

app/views/groups/show.html.haml

@@ -4,25 +4,23 @@
   - if current_user
     = auto_discovery_link_tag(:atom, group_url(@group, format: :atom, private_token: current_user.private_token), title: "#{@group.name} activity")
 
-.cover-block.groups-cover-block
+.group-home-panel.text-center
   %div{ class: container_class }
     .avatar-container.s70.group-avatar
       = image_tag group_icon(@group), class: "avatar s70 avatar-tile"
-    .group-info
-      .cover-title
-        %h1
-          @#{@group.path}
-          %span.visibility-icon.has-tooltip{ data: { container: 'body' }, title: visibility_icon_description(@group) }
-            = visibility_level_icon(@group.visibility_level, fw: false)
+    %h1.group-title
+      @#{@group.path}
+      %span.visibility-icon.has-tooltip{ data: { container: 'body' }, title: visibility_icon_description(@group) }
+        = visibility_level_icon(@group.visibility_level, fw: false)
 
-        .group-right-buttons.btn-group
-          - if current_user
-            .pull-left.append-right-10= render 'shared/members/access_request_buttons', source: @group
-          = render 'shared/notifications/button', notification_setting: @notification_setting
+    - if @group.description.present?
+      .group-home-desc
+        = markdown_field(@group, :description)
 
-      - if @group.description.present?
-        .cover-desc.description
-          = markdown_field(@group, :description)
+    - if current_user
+      .group-buttons
+        = render 'shared/members/access_request_buttons', source: @group
+        = render 'shared/notifications/button', notification_setting: @notification_setting
 
 %div.groups-header{ class: container_class }
   .top-area

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

 - if current_user
-  .dropdown.inline.project-dropdown
+  .dropdown.inline
     %a.btn.dropdown-toggle{href: '#', "data-toggle" => "dropdown"}
       = icon('plus')
       = icon("caret-down")

app/views/projects/show.html.haml

@@ -66,8 +66,8 @@
             = 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
+      %li.project-repo-buttons.right
+        .project-right-buttons
           - if current_user
             = render 'shared/members/access_request_buttons', source: @project
             = render "projects/buttons/koding"
@@ -76,7 +76,8 @@
             = render 'projects/buttons/download', project: @project, ref: @ref
             = render 'projects/buttons/dropdown'
 
-          = render 'shared/notifications/button', notification_setting: @notification_setting
+          .pull-right
+            = render 'shared/notifications/button', notification_setting: @notification_setting
   - if @repository.commit
     .project-last-commit{ class: container_class }
       = render 'projects/last_commit', commit: @repository.commit, ref: current_ref, project: @project

app/views/shared/notifications/_button.html.haml

 - left_align = local_assigns[:left_align]
 - if notification_setting
-  .dropdown.notification-dropdown.pull-right
+  .dropdown.notification-dropdown
     = form_for notification_setting, remote: true, html: { class: "inline notification-form" } do |f|
       = hidden_setting_source_input(notification_setting)
       = f.hidden_field :level, class: "notification_setting_level"

spec/features/groups_spec.rb

@@ -80,7 +80,7 @@ feature 'Group', feature: true do
 
       visit path
 
-      expect(page).to have_css('.description > p > strong')
+      expect(page).to have_css('.group-home-desc > p > strong')
     end
 
     it 'passes through html-pipeline' do
@@ -88,7 +88,7 @@ feature 'Group', feature: true do
 
       visit path
 
-      expect(page).to have_css('.description > p > img')
+      expect(page).to have_css('.group-home-desc > p > img')
     end
 
     it 'sanitizes unwanted tags' do
@@ -96,7 +96,7 @@ feature 'Group', feature: true do
 
       visit path
 
-      expect(page).not_to have_css('.description h1')
+      expect(page).not_to have_css('.group-home-desc h1')
     end
 
     it 'permits `rel` attribute on links' do
@@ -104,7 +104,7 @@ feature 'Group', feature: true do
 
       visit path
 
-      expect(page).to have_css('.description a[rel]')
+      expect(page).to have_css('.group-home-desc a[rel]')
     end
   end
 end