Commit 9f58857b authored by Stan Hu's avatar Stan Hu

Fix alignment of resend button in members page

Closes https://gitlab.com/gitlab-org/gitlab-ce/issues/55869
parent a05f86ce
...@@ -177,14 +177,6 @@ ul.content-list { ...@@ -177,14 +177,6 @@ ul.content-list {
} }
} }
.member-controls {
float: none;
@include media-breakpoint-up(sm) {
float: right;
}
}
// When dragging a list item // When dragging a list item
&.ui-sortable-helper { &.ui-sortable-helper {
border-bottom: 0; border-bottom: 0;
......
...@@ -20,17 +20,6 @@ ...@@ -20,17 +20,6 @@
} }
} }
.list-item-name {
@include media-breakpoint-up(sm) {
float: left;
width: 50%;
}
strong {
font-weight: $gl-font-weight-bold;
}
}
.controls { .controls {
@include media-breakpoint-up(sm) { @include media-breakpoint-up(sm) {
display: flex; display: flex;
...@@ -43,10 +32,11 @@ ...@@ -43,10 +32,11 @@
.form-group { .form-group {
margin-bottom: 0; margin-bottom: 0;
}
@include media-breakpoint-down(sm) { .member-controls {
display: block; .fa {
margin-left: 5px; line-height: inherit;
} }
} }
...@@ -66,23 +56,12 @@ ...@@ -66,23 +56,12 @@
} }
.member-form-control { .member-form-control {
@include media-breakpoint-down(sm) {
width: $dropdown-member-form-control-width;
margin-left: 0;
padding-bottom: 5px;
}
@include media-breakpoint-down(xs) { @include media-breakpoint-down(xs) {
margin-right: 0; margin-right: 0;
width: auto; width: auto;
} }
} }
.member-access-text {
margin-left: auto;
line-height: 43px;
}
.member-search-form { .member-search-form {
position: relative; position: relative;
...@@ -221,9 +200,6 @@ ...@@ -221,9 +200,6 @@
} }
.content-list.members-list li { .content-list.members-list li {
display: flex;
justify-content: space-between;
.list-item-name { .list-item-name {
float: none; float: none;
display: flex; display: flex;
...@@ -252,33 +228,24 @@ ...@@ -252,33 +228,24 @@
align-self: flex-start; align-self: flex-start;
} }
@include media-breakpoint-down(sm) {
.member-access-text {
margin: 0 0 $gl-padding-4 ($grid-size * 6);
}
}
@include media-breakpoint-down(xs) { @include media-breakpoint-down(xs) {
display: block; display: block;
.controls > .btn { .controls > .btn,
margin-left: 0; .controls .member-form-control {
margin-right: 0; margin: 0 0 $gl-padding-8;
display: block; display: block;
} }
.controls > .btn:last-child {
margin-left: 5px;
margin-right: 5px;
width: auto;
}
.form-control { .form-control {
width: 100%; width: 100%;
} }
.member-access-text {
line-height: 0;
margin-left: 50px;
}
.member-controls {
margin-top: 5px;
}
} }
} }
......
...@@ -2,9 +2,12 @@ ...@@ -2,9 +2,12 @@
- group = group_link.group - group = group_link.group
- can_admin_member = can?(current_user, :admin_project_member, @project) - can_admin_member = can?(current_user, :admin_project_member, @project)
- dom_id = "group_member_#{group_link.id}" - dom_id = "group_member_#{group_link.id}"
%li.member.group_member{ id: dom_id }
%span.list-item-name -# Note this is just for groups. For individual members please see shared/members/_member
= group_icon(group, class: "avatar s40", alt: '')
%li.member.group_member.py-2.px-3.d-flex.flex-column.flex-md-row{ id: dom_id }
%span.list-item-name.mb-2.m-md-0
= group_icon(group, class: "avatar s40 flex-shrink-0 flex-grow-0", alt: '')
.user-info .user-info
= link_to group.full_name, group_path(group), class: 'member' = link_to group.full_name, group_path(group), class: 'member'
.cgray .cgray
...@@ -13,10 +16,10 @@ ...@@ -13,10 +16,10 @@
· ·
%span{ class: ('text-warning' if group_link.expires_soon?) } %span{ class: ('text-warning' if group_link.expires_soon?) }
= _("Expires in %{expires_at}").html_safe % { expires_at: distance_of_time_in_words_to_now(group_link.expires_at) } = _("Expires in %{expires_at}").html_safe % { expires_at: distance_of_time_in_words_to_now(group_link.expires_at) }
.controls.member-controls .controls.member-controls.align-items-center
= form_tag project_group_link_path(@project, group_link), method: :put, remote: true, class: 'js-edit-member-form form-group row append-right-5' do = form_tag project_group_link_path(@project, group_link), method: :put, remote: true, class: 'js-edit-member-form form-group d-sm-flex' do
= hidden_field_tag "group_link[group_access]", group_link.group_access = hidden_field_tag "group_link[group_access]", group_link.group_access
.member-form-control.dropdown.append-right-5 .member-form-control.dropdown.mr-sm-2.d-sm-inline-block
%button.dropdown-menu-toggle.js-member-permissions-dropdown{ type: "button", %button.dropdown-menu-toggle.js-member-permissions-dropdown{ type: "button",
disabled: !can_admin_member, disabled: !can_admin_member,
data: { toggle: "dropdown", field_name: "group_link[group_access]" } } data: { toggle: "dropdown", field_name: "group_link[group_access]" } }
...@@ -32,14 +35,14 @@ ...@@ -32,14 +35,14 @@
= link_to role, "javascript:void(0)", = link_to role, "javascript:void(0)",
class: ("is-active" if group_link.group_access == role_id), class: ("is-active" if group_link.group_access == role_id),
data: { id: role_id, el_id: dom_id } data: { id: role_id, el_id: dom_id }
.prepend-left-5.clearable-input.member-form-control .clearable-input.member-form-control.d-sm-inline-block
= text_field_tag 'group_link[expires_at]', group_link.expires_at, class: 'form-control js-access-expiration-date js-member-update-control', placeholder: _('Expiration date'), id: "member_expires_at_#{group.id}", disabled: !can_admin_member = text_field_tag 'group_link[expires_at]', group_link.expires_at, class: 'form-control js-access-expiration-date js-member-update-control', placeholder: _('Expiration date'), id: "member_expires_at_#{group.id}", disabled: !can_admin_member
%i.clear-icon.js-clear-input %i.clear-icon.js-clear-input
- if can_admin_member - if can_admin_member
= link_to project_group_link_path(@project, group_link), = link_to project_group_link_path(@project, group_link),
method: :delete, method: :delete,
data: { confirm: _("Are you sure you want to remove %{group_name}?") % { group_name: group.name } }, data: { confirm: _("Are you sure you want to remove %{group_name}?") % { group_name: group.name } },
class: 'btn btn-remove prepend-left-10' do class: 'btn btn-remove m-0 ml-sm-2 align-self-center' do
%span.d-block.d-sm-none %span.d-block.d-sm-none
= _("Delete") = _("Delete")
= icon('trash', class: 'd-none d-sm-block') = icon('trash', class: 'd-none d-sm-block')
...@@ -6,10 +6,12 @@ ...@@ -6,10 +6,12 @@
- source = member.source - source = member.source
- override = member.try(:override) - override = member.try(:override)
%li.member{ class: [dom_class(member), ("is-overridden" if override)], id: dom_id(member) } -# Note this is just for individual members. For groups please see shared/members/_group
%span.list-item-name
%li.member.py-2.px-3.d-flex.flex-column{ class: [dom_class(member), ("is-overridden" if override), ("flex-md-row" unless force_mobile_view)], id: dom_id(member) }
%span.list-item-name.mb-2.m-md-0
- if user - if user
= image_tag avatar_icon_for_user(user, 40), class: "avatar s40", alt: '' = image_tag avatar_icon_for_user(user, 40), class: "avatar s40 flex-shrink-0 flex-grow-0", alt: ''
.user-info .user-info
= link_to user.name, user_path(user), class: 'member js-user-link', data: { user_id: user.id } = link_to user.name, user_path(user), class: 'member js-user-link', data: { user_id: user.id }
= user_status(user) = user_status(user)
...@@ -43,7 +45,7 @@ ...@@ -43,7 +45,7 @@
= _("Expires in %{expires_at}").html_safe % { expires_at: distance_of_time_in_words_to_now(member.expires_at) } = _("Expires in %{expires_at}").html_safe % { expires_at: distance_of_time_in_words_to_now(member.expires_at) }
- else - else
= image_tag avatar_icon_for_email(member.invite_email, 40), class: "avatar s40", alt: '' = image_tag avatar_icon_for_email(member.invite_email, 40), class: "avatar s40 flex-shrink-0 flex-grow-0", alt: ''
.user-info .user-info
.member= member.invite_email .member= member.invite_email
.cgray .cgray
...@@ -54,20 +56,20 @@ ...@@ -54,20 +56,20 @@
= time_ago_with_tooltip(member.created_at) = time_ago_with_tooltip(member.created_at)
- if show_roles - if show_roles
- current_resource = @project || @group - current_resource = @project || @group
.controls.member-controls .controls.member-controls.align-items-center
= render_if_exists 'shared/members/ee/ldap_tag', can_override: member.can_override? = render_if_exists 'shared/members/ee/ldap_tag', can_override: member.can_override?
- if show_controls && member.source == current_resource - if show_controls && member.source == current_resource
- if member.can_resend_invite? - if member.can_resend_invite?
= link_to icon('paper-plane'), polymorphic_path([:resend_invite, member]), = link_to icon('paper-plane'), polymorphic_path([:resend_invite, member]),
method: :post, method: :post,
class: 'btn btn-default prepend-left-10 d-none d-sm-block', class: 'btn btn-default align-self-center mr-sm-2',
title: _('Resend invite') title: _('Resend invite')
- if user != current_user && member.can_update? - if user != current_user && member.can_update?
= form_for member, remote: true, html: { class: 'js-edit-member-form form-group row append-right-5' } do |f| = form_for member, remote: true, html: { class: "js-edit-member-form form-group #{'d-sm-flex' unless force_mobile_view}" } do |f|
= f.hidden_field :access_level = f.hidden_field :access_level
.member-form-control.dropdown.append-right-5 .member-form-control.dropdown{ class: [("mr-sm-2 d-sm-inline-block" unless force_mobile_view)] }
%button.dropdown-menu-toggle.js-member-permissions-dropdown{ type: "button", %button.dropdown-menu-toggle.js-member-permissions-dropdown{ type: "button",
disabled: member.can_override? && !override, disabled: member.can_override? && !override,
data: { toggle: "dropdown", field_name: "#{f.object_name}[access_level]" } } data: { toggle: "dropdown", field_name: "#{f.object_name}[access_level]" } }
...@@ -87,7 +89,7 @@ ...@@ -87,7 +89,7 @@
group: @group, group: @group,
member: member, member: member,
can_override: member.can_override? can_override: member.can_override?
.prepend-left-5.clearable-input.member-form-control .clearable-input.member-form-control{ class: [("d-sm-inline-block" unless force_mobile_view)] }
= f.text_field :expires_at, = f.text_field :expires_at,
disabled: member.can_override? && !override, disabled: member.can_override? && !override,
class: 'form-control js-access-expiration-date js-member-update-control', class: 'form-control js-access-expiration-date js-member-update-control',
...@@ -96,12 +98,12 @@ ...@@ -96,12 +98,12 @@
data: { el_id: dom_id(member) } data: { el_id: dom_id(member) }
%i.clear-icon.js-clear-input %i.clear-icon.js-clear-input
- else - else
%span.member-access-text= member.human_access %span.member-access-text.user-access-role= member.human_access
- if member.can_approve? - if member.can_approve?
= link_to polymorphic_path([:approve_access_request, member]), = link_to polymorphic_path([:approve_access_request, member]),
method: :post, method: :post,
class: 'btn btn-success prepend-left-10', class: "btn btn-success align-self-center m-0 mb-2 #{'mb-sm-0 ml-sm-2' unless force_mobile_view}",
title: _('Grant access') do title: _('Grant access') do
%span{ class: ('d-block d-sm-none' unless force_mobile_view) } %span{ class: ('d-block d-sm-none' unless force_mobile_view) }
= _('Grant access') = _('Grant access')
...@@ -113,12 +115,12 @@ ...@@ -113,12 +115,12 @@
= link_to icon('sign-out', text: _('Leave')), polymorphic_path([:leave, member.source, :members]), = link_to icon('sign-out', text: _('Leave')), polymorphic_path([:leave, member.source, :members]),
method: :delete, method: :delete,
data: { confirm: leave_confirmation_message(member.source) }, data: { confirm: leave_confirmation_message(member.source) },
class: 'btn btn-remove prepend-left-10' class: "btn btn-remove align-self-center m-0 #{'ml-sm-2' unless force_mobile_view}"
- else - else
= link_to member, = link_to member,
method: :delete, method: :delete,
data: { confirm: remove_member_message(member) }, data: { confirm: remove_member_message(member) },
class: 'btn btn-remove prepend-left-10', class: "btn btn-remove align-self-center m-0 #{'ml-sm-2' unless force_mobile_view}",
title: remove_member_title(member) do title: remove_member_title(member) do
%span{ class: ('d-block d-sm-none' unless force_mobile_view) } %span{ class: ('d-block d-sm-none' unless force_mobile_view) }
= _("Delete") = _("Delete")
...@@ -126,6 +128,6 @@ ...@@ -126,6 +128,6 @@
= icon('trash', class: 'd-none d-sm-block') = icon('trash', class: 'd-none d-sm-block')
= render_if_exists 'shared/members/ee/override_member_buttons', group: @group, member: member, user: user, action: :edit, can_override: member.can_override? = render_if_exists 'shared/members/ee/override_member_buttons', group: @group, member: member, user: user, action: :edit, can_override: member.can_override?
- else - else
%span.member-access-text= member.human_access %span.member-access-text.user-access-role= member.human_access
= render_if_exists 'shared/members/ee/override_member_buttons', group: @group, member: member, user: user, action: :confirm, can_override: member.can_override? = render_if_exists 'shared/members/ee/override_member_buttons', group: @group, member: member, user: user, action: :confirm, can_override: member.can_override?
---
title: Fix alignment of resend button in members page
merge_request: 28202
author:
type: other
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