From d81d67bae44f189adddd1f4fb489a44e274e21b5 Mon Sep 17 00:00:00 2001
From: tauriedavis <taurie@gitlab.com>
Date: Tue, 8 Nov 2016 12:48:28 -0800
Subject: [PATCH] 19205 Redesign group page header to match new navigation
---
app/assets/stylesheets/framework/mobile.scss | 2 +-
app/assets/stylesheets/pages/groups.scss | 25 ++--------------
app/assets/stylesheets/pages/projects.scss | 30 ++++++++++++-------
app/views/groups/show.html.haml | 26 ++++++++--------
.../projects/buttons/_dropdown.html.haml | 2 +-
app/views/projects/show.html.haml | 7 +++--
.../shared/notifications/_button.html.haml | 2 +-
spec/features/groups_spec.rb | 8 ++---
8 files changed, 45 insertions(+), 57 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;
diff --git a/app/views/groups/show.html.haml b/app/views/groups/show.html.haml
index b439b40a75a..52ce26a20b1 100644
--- a/app/views/groups/show.html.haml
+++ b/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
diff --git a/app/views/projects/buttons/_dropdown.html.haml b/app/views/projects/buttons/_dropdown.html.haml
index 6cd9b98a706..d3ccebbe290 100644
--- a/app/views/projects/buttons/_dropdown.html.haml
+++ b/app/views/projects/buttons/_dropdown.html.haml
@@ -1,5 +1,5 @@
- if current_user
- .dropdown.inline.project-dropdown
+ .dropdown.inline
%a.btn.dropdown-toggle{href: '#', "data-toggle" => "dropdown"}
= icon('plus')
= icon("caret-down")
diff --git a/app/views/projects/show.html.haml b/app/views/projects/show.html.haml
index 4de95036eef..c50093cf47c 100644
--- a/app/views/projects/show.html.haml
+++ b/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
diff --git a/app/views/shared/notifications/_button.html.haml b/app/views/shared/notifications/_button.html.haml
index feaa5570c21..1f7df0bcd19 100644
--- a/app/views/shared/notifications/_button.html.haml
+++ b/app/views/shared/notifications/_button.html.haml
@@ -1,6 +1,6 @@
- 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"
diff --git a/spec/features/groups_spec.rb b/spec/features/groups_spec.rb
index 13bfe90302c..4b19886274e 100644
--- a/spec/features/groups_spec.rb
+++ b/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
--
GitLab