Merge branch '25103-mobile-members-page-user-avatar-is-misaligned' into 'master'
Improve members view on mobile Closes #25103 See merge request !12619
This commit is contained in:
commit
5198cd28e0
8 changed files with 163 additions and 56 deletions
|
@ -54,8 +54,6 @@
|
|||
@media (min-width: $screen-sm-min) {
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
width: 400px;
|
||||
max-width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -65,7 +63,6 @@
|
|||
@media (min-width: $screen-sm-min) {
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
margin-top: 3px;
|
||||
}
|
||||
}
|
||||
|
@ -81,18 +78,10 @@
|
|||
|
||||
.member-form-control {
|
||||
@media (max-width: $screen-xs-max) {
|
||||
padding: 5px 0;
|
||||
padding-bottom: 5px;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
@media (min-width: $screen-sm-min) {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.dropdown-menu-toggle {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.member-access-text {
|
||||
|
@ -216,3 +205,102 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content-list.members-list li {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.list-item-name {
|
||||
float: none;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.member {
|
||||
font-weight: bold;
|
||||
overflow-wrap: break-word;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.member-group-link {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
width: inherit;
|
||||
}
|
||||
|
||||
.btn {
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.form-horizontal ~ .btn {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
@media (max-width: $screen-xs-max) {
|
||||
display: block;
|
||||
|
||||
.controls > .btn {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.member-access-text {
|
||||
line-height: 0;
|
||||
margin-left: 50px;
|
||||
}
|
||||
|
||||
.member-controls {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.form-horizontal {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.panel-mobile {
|
||||
.content-list.members-list li {
|
||||
display: block;
|
||||
|
||||
.member-controls {
|
||||
float: none;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dropdown-menu-toggle,
|
||||
.dropdown-menu,
|
||||
.form-control,
|
||||
.list-item-name {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.form-horizontal {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.member-form-control {
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -107,8 +107,7 @@
|
|||
= select_tag :access_level, options_for_select(GroupMember.access_level_roles), class: "project-access-select select2"
|
||||
%hr
|
||||
= button_tag 'Add users to group', class: "btn btn-create"
|
||||
|
||||
= render 'shared/members/requests', membership_source: @group, requesters: @requesters
|
||||
= render 'shared/members/requests', membership_source: @group, requesters: @requesters, force_mobile_view: true
|
||||
|
||||
.panel.panel-default
|
||||
.panel-heading
|
||||
|
@ -117,7 +116,7 @@
|
|||
%span.badge= @group.members.size
|
||||
.pull-right
|
||||
= link_to icon('pencil-square-o', text: 'Manage access'), polymorphic_url([@group, :members]), class: "btn btn-xs"
|
||||
%ul.well-list.group-users-list.content-list
|
||||
%ul.well-list.group-users-list.content-list.members-list
|
||||
= render partial: 'shared/members/member', collection: @members, as: :member, locals: { show_controls: false }
|
||||
.panel-footer
|
||||
= paginate @members, param_name: 'members_page', theme: 'gitlab'
|
||||
|
|
|
@ -160,12 +160,12 @@
|
|||
.pull-right
|
||||
= link_to admin_group_path(@group), class: 'btn btn-xs' do
|
||||
= icon('pencil-square-o', text: 'Manage access')
|
||||
%ul.well-list.content-list
|
||||
%ul.well-list.content-list.members-list
|
||||
= render partial: 'shared/members/member', collection: @group_members, as: :member, locals: { show_controls: false }
|
||||
.panel-footer
|
||||
= paginate @group_members, param_name: 'group_members_page', theme: 'gitlab'
|
||||
|
||||
= render 'shared/members/requests', membership_source: @project, requesters: @requesters
|
||||
= render 'shared/members/requests', membership_source: @project, requesters: @requesters, force_mobile_view: true
|
||||
|
||||
.panel.panel-default
|
||||
.panel-heading
|
||||
|
@ -174,7 +174,7 @@
|
|||
%span.badge= @project.users.size
|
||||
.pull-right
|
||||
= link_to icon('pencil-square-o', text: 'Manage access'), polymorphic_url([@project, :members]), class: "btn btn-xs"
|
||||
%ul.well-list.project_members.content-list
|
||||
%ul.well-list.project_members.content-list.members-list
|
||||
= render partial: 'shared/members/member', collection: @project_members, as: :member, locals: { show_controls: false }
|
||||
.panel-footer
|
||||
= paginate @project_members, param_name: 'project_members_page', theme: 'gitlab'
|
||||
|
|
|
@ -27,6 +27,6 @@
|
|||
Members with access to
|
||||
%strong= @group.name
|
||||
%span.badge= @members.total_count
|
||||
%ul.content-list
|
||||
%ul.content-list.members-list
|
||||
= render partial: 'shared/members/member', collection: @members, as: :member
|
||||
= paginate @members, theme: 'gitlab'
|
||||
|
|
|
@ -11,5 +11,5 @@
|
|||
%button.member-search-btn{ type: "submit", "aria-label" => "Submit search" }
|
||||
= icon("search")
|
||||
= render 'shared/members/sort_dropdown'
|
||||
%ul.content-list
|
||||
%ul.content-list.members-list
|
||||
= render partial: 'shared/members/member', collection: members, as: :member
|
||||
|
|
|
@ -1,5 +1,6 @@
|
|||
- show_roles = local_assigns.fetch(:show_roles, true)
|
||||
- show_controls = local_assigns.fetch(:show_controls, true)
|
||||
- force_mobile_view = local_assigns.fetch(:force_mobile_view, false)
|
||||
- user = local_assigns.fetch(:user, member.user)
|
||||
- source = member.source
|
||||
- can_admin_member = can?(current_user, action_member_permission(:update, member), member)
|
||||
|
@ -8,45 +9,53 @@
|
|||
%span.list-item-name
|
||||
- if user
|
||||
= image_tag avatar_icon(user, 40), class: "avatar s40", alt: ''
|
||||
%strong
|
||||
= link_to user.name, user_path(user)
|
||||
%span.cgray= user.to_reference
|
||||
.user-info
|
||||
= link_to user.name, user_path(user), class: 'member'
|
||||
%span.cgray= user.to_reference
|
||||
|
||||
- if user == current_user
|
||||
%span.label.label-success.prepend-left-5 It's you
|
||||
- if user == current_user
|
||||
%span.label.label-success.prepend-left-5 It's you
|
||||
|
||||
- if user.blocked?
|
||||
%label.label.label-danger
|
||||
%strong Blocked
|
||||
- if user.blocked?
|
||||
%label.label.label-danger
|
||||
%strong Blocked
|
||||
|
||||
- if source.instance_of?(Group) && source != @group
|
||||
·
|
||||
= link_to source.full_name, source, class: "member-group-link"
|
||||
- if source.instance_of?(Group) && source != @group
|
||||
·
|
||||
= link_to source.full_name, source, class: "member-group-link"
|
||||
|
||||
.hidden-xs.cgray
|
||||
- if member.request?
|
||||
Requested
|
||||
= time_ago_with_tooltip(member.requested_at)
|
||||
- else
|
||||
Joined #{time_ago_with_tooltip(member.created_at)}
|
||||
- if member.expires?
|
||||
·
|
||||
%span{ class: "#{"text-warning" if member.expires_soon?} has-tooltip", title: member.expires_at.to_time.in_time_zone.to_s(:medium) }
|
||||
Expires in #{distance_of_time_in_words_to_now(member.expires_at)}
|
||||
.cgray
|
||||
- if member.request?
|
||||
Requested
|
||||
= time_ago_with_tooltip(member.requested_at)
|
||||
- else
|
||||
Joined #{time_ago_with_tooltip(member.created_at)}
|
||||
- if member.expires?
|
||||
·
|
||||
%span{ class: "#{"text-warning" if member.expires_soon?} has-tooltip", title: member.expires_at.to_time.in_time_zone.to_s(:medium) }
|
||||
Expires in #{distance_of_time_in_words_to_now(member.expires_at)}
|
||||
|
||||
- else
|
||||
= image_tag avatar_icon(member.invite_email, 40), class: "avatar s40", alt: ''
|
||||
%strong= member.invite_email
|
||||
.cgray
|
||||
Invited
|
||||
- if member.created_by
|
||||
by
|
||||
= link_to member.created_by.name, user_path(member.created_by)
|
||||
= time_ago_with_tooltip(member.created_at)
|
||||
.user-info
|
||||
.member= member.invite_email
|
||||
.cgray
|
||||
Invited
|
||||
- if member.created_by
|
||||
by
|
||||
= link_to member.created_by.name, user_path(member.created_by)
|
||||
= time_ago_with_tooltip(member.created_at)
|
||||
- if show_roles
|
||||
- current_resource = @project || @group
|
||||
.controls.member-controls
|
||||
- if show_controls && member.source == current_resource
|
||||
|
||||
- if member.invite? && can?(current_user, action_member_permission(:admin, member), member.source)
|
||||
= link_to icon('paper-plane'), polymorphic_path([:resend_invite, member]),
|
||||
method: :post,
|
||||
class: 'btn btn-default prepend-left-10 hidden-xs',
|
||||
title: 'Resend invite'
|
||||
|
||||
- if user != current_user && can_admin_member
|
||||
= form_for member, remote: true, html: { class: 'form-horizontal js-edit-member-form' } do |f|
|
||||
= f.hidden_field :access_level
|
||||
|
@ -75,13 +84,17 @@
|
|||
- if member.invite? && can?(current_user, action_member_permission(:admin, member), member.source)
|
||||
= link_to 'Resend invite', polymorphic_path([:resend_invite, member]),
|
||||
method: :post,
|
||||
class: 'btn btn-default prepend-left-10'
|
||||
class: 'btn btn-default prepend-left-10 visible-xs-block'
|
||||
|
||||
- elsif member.request? && can_admin_member
|
||||
= link_to icon('check inverse'), polymorphic_path([:approve_access_request, member]),
|
||||
= link_to polymorphic_path([:approve_access_request, member]),
|
||||
method: :post,
|
||||
class: 'btn btn-success prepend-left-10',
|
||||
title: 'Grant access'
|
||||
title: 'Grant access' do
|
||||
%span{ class: ('visible-xs-block' unless force_mobile_view) }
|
||||
Grant access
|
||||
- unless force_mobile_view
|
||||
= icon('check inverse', class: 'hidden-xs')
|
||||
|
||||
- if can?(current_user, action_member_permission(:destroy, member), member)
|
||||
- if current_user == user
|
||||
|
@ -96,8 +109,9 @@
|
|||
data: { confirm: remove_member_message(member) },
|
||||
class: 'btn btn-remove prepend-left-10',
|
||||
title: remove_member_title(member) do
|
||||
%span.visible-xs-block
|
||||
%span{ class: ('visible-xs-block' unless force_mobile_view) }
|
||||
Delete
|
||||
= icon('trash', class: 'hidden-xs')
|
||||
- unless force_mobile_view
|
||||
= icon('trash', class: 'hidden-xs')
|
||||
- else
|
||||
%span.member-access-text= member.human_access
|
||||
|
|
|
@ -1,8 +1,10 @@
|
|||
- force_mobile_view = local_assigns.fetch(:force_mobile_view, false)
|
||||
|
||||
- if requesters.any?
|
||||
.panel.panel-default.prepend-top-default
|
||||
.panel.panel-default.prepend-top-default{ class: ('panel-mobile' if force_mobile_view ) }
|
||||
.panel-heading
|
||||
Users requesting access to
|
||||
%strong= membership_source.name
|
||||
%span.badge= requesters.size
|
||||
%ul.content-list
|
||||
= render partial: 'shared/members/member', collection: requesters, as: :member
|
||||
%ul.content-list.members-list
|
||||
= render partial: 'shared/members/member', collection: requesters, as: :member, locals: { force_mobile_view: force_mobile_view }
|
||||
|
|
|
@ -0,0 +1,4 @@
|
|||
---
|
||||
title: Improve members view on mobile
|
||||
merge_request: 12619
|
||||
author:
|
Loading…
Reference in a new issue