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 {
}
}
.member-controls {
float: none;
@include media-breakpoint-up(sm) {
float: right;
}
}
// When dragging a list item
&.ui-sortable-helper {
border-bottom: 0;
......
......@@ -20,17 +20,6 @@
}
}
.list-item-name {
@include media-breakpoint-up(sm) {
float: left;
width: 50%;
}
strong {
font-weight: $gl-font-weight-bold;
}
}
.controls {
@include media-breakpoint-up(sm) {
display: flex;
......@@ -43,10 +32,11 @@
.form-group {
margin-bottom: 0;
}
@include media-breakpoint-down(sm) {
display: block;
margin-left: 5px;
.member-controls {
.fa {
line-height: inherit;
}
}
......@@ -66,23 +56,12 @@
}
.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) {
margin-right: 0;
width: auto;
}
}
.member-access-text {
margin-left: auto;
line-height: 43px;
}
.member-search-form {
position: relative;
......@@ -221,9 +200,6 @@
}
.content-list.members-list li {
display: flex;
justify-content: space-between;
.list-item-name {
float: none;
display: flex;
......@@ -252,33 +228,24 @@
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) {
display: block;
.controls > .btn {
margin-left: 0;
margin-right: 0;
.controls > .btn,
.controls .member-form-control {
margin: 0 0 $gl-padding-8;
display: block;
}
.controls > .btn:last-child {
margin-left: 5px;
margin-right: 5px;
width: auto;
}
.form-control {
width: 100%;
}
.member-access-text {
line-height: 0;
margin-left: 50px;
}
.member-controls {
margin-top: 5px;
}
}
}
......
......@@ -2,9 +2,12 @@
- group = group_link.group
- can_admin_member = can?(current_user, :admin_project_member, @project)
- dom_id = "group_member_#{group_link.id}"
%li.member.group_member{ id: dom_id }
%span.list-item-name
= group_icon(group, class: "avatar s40", alt: '')
-# Note this is just for groups. For individual members please see shared/members/_member
%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
= link_to group.full_name, group_path(group), class: 'member'
.cgray
......@@ -13,10 +16,10 @@
·
%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) }
.controls.member-controls
= 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
.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 d-sm-flex' do
= 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",
disabled: !can_admin_member,
data: { toggle: "dropdown", field_name: "group_link[group_access]" } }
......@@ -32,14 +35,14 @@
= link_to role, "javascript:void(0)",
class: ("is-active" if group_link.group_access == role_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
%i.clear-icon.js-clear-input
- if can_admin_member
= link_to project_group_link_path(@project, group_link),
method: :delete,
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
= _("Delete")
= icon('trash', class: 'd-none d-sm-block')
......@@ -6,10 +6,12 @@
- source = member.source
- override = member.try(:override)
%li.member{ class: [dom_class(member), ("is-overridden" if override)], id: dom_id(member) }
%span.list-item-name
-# Note this is just for individual members. For groups please see shared/members/_group
%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
= 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
= link_to user.name, user_path(user), class: 'member js-user-link', data: { user_id: user.id }
= user_status(user)
......@@ -43,7 +45,7 @@
= _("Expires in %{expires_at}").html_safe % { expires_at: distance_of_time_in_words_to_now(member.expires_at) }
- 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
.member= member.invite_email
.cgray
......@@ -54,20 +56,20 @@
= time_ago_with_tooltip(member.created_at)
- if show_roles
- 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?
- if show_controls && member.source == current_resource
- if member.can_resend_invite?
= link_to icon('paper-plane'), polymorphic_path([:resend_invite, member]),
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')
- 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
.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",
disabled: member.can_override? && !override,
data: { toggle: "dropdown", field_name: "#{f.object_name}[access_level]" } }
......@@ -87,7 +89,7 @@
group: @group,
member: member,
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,
disabled: member.can_override? && !override,
class: 'form-control js-access-expiration-date js-member-update-control',
......@@ -96,12 +98,12 @@
data: { el_id: dom_id(member) }
%i.clear-icon.js-clear-input
- else
%span.member-access-text= member.human_access
%span.member-access-text.user-access-role= member.human_access
- if member.can_approve?
= link_to polymorphic_path([:approve_access_request, member]),
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
%span{ class: ('d-block d-sm-none' unless force_mobile_view) }
= _('Grant access')
......@@ -113,12 +115,12 @@
= link_to icon('sign-out', text: _('Leave')), polymorphic_path([:leave, member.source, :members]),
method: :delete,
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
= link_to member,
method: :delete,
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
%span{ class: ('d-block d-sm-none' unless force_mobile_view) }
= _("Delete")
......@@ -126,6 +128,6 @@
= 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?
- 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?
---
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