Commit 67041e63 authored by Annabel Dunstone Gray's avatar Annabel Dunstone Gray

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
parents da844cb5 d81d67ba
...@@ -71,7 +71,7 @@ ...@@ -71,7 +71,7 @@
display: none; display: none;
} }
.group-right-buttons { .group-buttons {
display: none; display: none;
} }
......
...@@ -10,7 +10,6 @@ ...@@ -10,7 +10,6 @@
} }
.group-row { .group-row {
.stats { .stats {
float: right; float: right;
line-height: $list-text-height; line-height: $list-text-height;
...@@ -23,36 +22,18 @@ ...@@ -23,36 +22,18 @@
} }
.ldap-group-links { .ldap-group-links {
.form-actions { .form-actions {
margin-bottom: $gl-padding; margin-bottom: $gl-padding;
} }
} }
.groups-cover-block { .group-buttons {
.notification-dropdown {
.container-fluid { display: inline-block;
position: relative;
}
.group-right-buttons {
position: absolute;
right: 16px;
.btn {
@include btn-gray;
padding: 3px 10px;
background-color: $background-color;
}
}
.group-avatar {
border: 0;
} }
} }
.groups-header { .groups-header {
@media (min-width: $screen-sm-min) { @media (min-width: $screen-sm-min) {
.nav-links { .nav-links {
width: 35%; width: 35%;
......
...@@ -86,7 +86,8 @@ ...@@ -86,7 +86,8 @@
} }
} }
.project-home-panel { .project-home-panel,
.group-home-panel {
padding-top: 24px; padding-top: 24px;
padding-bottom: 24px; padding-bottom: 24px;
...@@ -94,7 +95,8 @@ ...@@ -94,7 +95,8 @@
border-bottom: 1px solid $border-color; border-bottom: 1px solid $border-color;
} }
.project-avatar { .project-avatar,
.group-avatar {
float: none; float: none;
margin: 0 auto; margin: 0 auto;
border: none; border: none;
...@@ -104,7 +106,8 @@ ...@@ -104,7 +106,8 @@
} }
} }
.project-title { .project-title,
.group-title {
margin-top: 10px; margin-top: 10px;
margin-bottom: 10px; margin-bottom: 10px;
font-size: 24px; font-size: 24px;
...@@ -118,10 +121,11 @@ ...@@ -118,10 +121,11 @@
} }
} }
.project-home-desc { .project-home-desc,
.group-home-desc {
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
margin-bottom: 15px; margin-bottom: 0;
max-width: 700px; max-width: 700px;
> p { > p {
...@@ -141,13 +145,18 @@ ...@@ -141,13 +145,18 @@
} }
} }
.project-repo-buttons { .project-repo-buttons,
font-size: 0; .group-buttons {
margin-top: 15px;
.btn { .btn {
@include btn-gray; @include btn-gray;
padding: 3px 10px; padding: 3px 10px;
&:last-child {
margin-left: 0;
}
.fa { .fa {
color: $layout-link-gray; color: $layout-link-gray;
} }
...@@ -168,7 +177,8 @@ ...@@ -168,7 +177,8 @@
} }
} }
.project-repo-btn-group, .download-button,
.dropdown-toggle,
.notification-dropdown, .notification-dropdown,
.project-dropdown { .project-dropdown {
margin-left: 10px; margin-left: 10px;
...@@ -474,9 +484,7 @@ a.deploy-project-label { ...@@ -474,9 +484,7 @@ a.deploy-project-label {
margin-right: $gl-padding; margin-right: $gl-padding;
} }
&.project-repo-buttons-right { &.right {
margin-top: 10px;
@media (min-width: $screen-md-min) { @media (min-width: $screen-md-min) {
float: right; float: right;
margin-top: 0; margin-top: 0;
......
...@@ -4,26 +4,24 @@ ...@@ -4,26 +4,24 @@
- if current_user - if current_user
= auto_discovery_link_tag(:atom, group_url(@group, format: :atom, private_token: current_user.private_token), title: "#{@group.name} activity") = 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 } %div{ class: container_class }
.avatar-container.s70.group-avatar .avatar-container.s70.group-avatar
= image_tag group_icon(@group), class: "avatar s70 avatar-tile" = image_tag group_icon(@group), class: "avatar s70 avatar-tile"
.group-info %h1.group-title
.cover-title
%h1
@#{@group.path} @#{@group.path}
%span.visibility-icon.has-tooltip{ data: { container: 'body' }, title: visibility_icon_description(@group) } %span.visibility-icon.has-tooltip{ data: { container: 'body' }, title: visibility_icon_description(@group) }
= visibility_level_icon(@group.visibility_level, fw: false) = 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? - if @group.description.present?
.cover-desc.description .group-home-desc
= markdown_field(@group, :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 } %div.groups-header{ class: container_class }
.top-area .top-area
%ul.nav-links %ul.nav-links
......
- if current_user - if current_user
.dropdown.inline.project-dropdown .dropdown.inline
%a.btn.dropdown-toggle{href: '#', "data-toggle" => "dropdown"} %a.btn.dropdown-toggle{href: '#', "data-toggle" => "dropdown"}
= icon('plus') = icon('plus')
= icon("caret-down") = icon("caret-down")
......
...@@ -66,8 +66,8 @@ ...@@ -66,8 +66,8 @@
= link_to add_special_file_path(@project, file_name: '.gitlab-ci.yml') do = link_to add_special_file_path(@project, file_name: '.gitlab-ci.yml') do
Set Up CI Set Up CI
%li.project-repo-buttons-right %li.project-repo-buttons.right
.project-repo-buttons.project-right-buttons .project-right-buttons
- if current_user - if current_user
= render 'shared/members/access_request_buttons', source: @project = render 'shared/members/access_request_buttons', source: @project
= render "projects/buttons/koding" = render "projects/buttons/koding"
...@@ -76,6 +76,7 @@ ...@@ -76,6 +76,7 @@
= render 'projects/buttons/download', project: @project, ref: @ref = render 'projects/buttons/download', project: @project, ref: @ref
= render 'projects/buttons/dropdown' = render 'projects/buttons/dropdown'
.pull-right
= render 'shared/notifications/button', notification_setting: @notification_setting = render 'shared/notifications/button', notification_setting: @notification_setting
- if @repository.commit - if @repository.commit
.project-last-commit{ class: container_class } .project-last-commit{ class: container_class }
......
- left_align = local_assigns[:left_align] - left_align = local_assigns[:left_align]
- if notification_setting - if notification_setting
.dropdown.notification-dropdown.pull-right .dropdown.notification-dropdown
= form_for notification_setting, remote: true, html: { class: "inline notification-form" } do |f| = form_for notification_setting, remote: true, html: { class: "inline notification-form" } do |f|
= hidden_setting_source_input(notification_setting) = hidden_setting_source_input(notification_setting)
= f.hidden_field :level, class: "notification_setting_level" = f.hidden_field :level, class: "notification_setting_level"
......
...@@ -80,7 +80,7 @@ feature 'Group', feature: true do ...@@ -80,7 +80,7 @@ feature 'Group', feature: true do
visit path visit path
expect(page).to have_css('.description > p > strong') expect(page).to have_css('.group-home-desc > p > strong')
end end
it 'passes through html-pipeline' do it 'passes through html-pipeline' do
...@@ -88,7 +88,7 @@ feature 'Group', feature: true do ...@@ -88,7 +88,7 @@ feature 'Group', feature: true do
visit path visit path
expect(page).to have_css('.description > p > img') expect(page).to have_css('.group-home-desc > p > img')
end end
it 'sanitizes unwanted tags' do it 'sanitizes unwanted tags' do
...@@ -96,7 +96,7 @@ feature 'Group', feature: true do ...@@ -96,7 +96,7 @@ feature 'Group', feature: true do
visit path visit path
expect(page).not_to have_css('.description h1') expect(page).not_to have_css('.group-home-desc h1')
end end
it 'permits `rel` attribute on links' do it 'permits `rel` attribute on links' do
...@@ -104,7 +104,7 @@ feature 'Group', feature: true do ...@@ -104,7 +104,7 @@ feature 'Group', feature: true do
visit path visit path
expect(page).to have_css('.description a[rel]') expect(page).to have_css('.group-home-desc a[rel]')
end end
end end
end end
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment