Commit 5198cd28 authored by Filipa Lacerda's avatar Filipa Lacerda

Merge branch '25103-mobile-members-page-user-avatar-is-misaligned' into 'master'

Improve members view on mobile

Closes #25103

See merge request !12619
parents 94e2a286 5668738e
...@@ -54,8 +54,6 @@ ...@@ -54,8 +54,6 @@
@media (min-width: $screen-sm-min) { @media (min-width: $screen-sm-min) {
display: -webkit-flex; display: -webkit-flex;
display: flex; display: flex;
width: 400px;
max-width: 50%;
} }
} }
...@@ -65,7 +63,6 @@ ...@@ -65,7 +63,6 @@
@media (min-width: $screen-sm-min) { @media (min-width: $screen-sm-min) {
display: -webkit-flex; display: -webkit-flex;
display: flex; display: flex;
width: 100%;
margin-top: 3px; margin-top: 3px;
} }
} }
...@@ -81,18 +78,10 @@ ...@@ -81,18 +78,10 @@
.member-form-control { .member-form-control {
@media (max-width: $screen-xs-max) { @media (max-width: $screen-xs-max) {
padding: 5px 0; padding-bottom: 5px;
margin-left: 0; margin-left: 0;
margin-right: 0; margin-right: 0;
} }
@media (min-width: $screen-sm-min) {
width: 50%;
}
.dropdown-menu-toggle {
width: 100%;
}
} }
.member-access-text { .member-access-text {
...@@ -216,3 +205,102 @@ ...@@ -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 @@ ...@@ -107,8 +107,7 @@
= select_tag :access_level, options_for_select(GroupMember.access_level_roles), class: "project-access-select select2" = select_tag :access_level, options_for_select(GroupMember.access_level_roles), class: "project-access-select select2"
%hr %hr
= button_tag 'Add users to group', class: "btn btn-create" = button_tag 'Add users to group', class: "btn btn-create"
= render 'shared/members/requests', membership_source: @group, requesters: @requesters, force_mobile_view: true
= render 'shared/members/requests', membership_source: @group, requesters: @requesters
.panel.panel-default .panel.panel-default
.panel-heading .panel-heading
...@@ -117,7 +116,7 @@ ...@@ -117,7 +116,7 @@
%span.badge= @group.members.size %span.badge= @group.members.size
.pull-right .pull-right
= link_to icon('pencil-square-o', text: 'Manage access'), polymorphic_url([@group, :members]), class: "btn btn-xs" = 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 } = render partial: 'shared/members/member', collection: @members, as: :member, locals: { show_controls: false }
.panel-footer .panel-footer
= paginate @members, param_name: 'members_page', theme: 'gitlab' = paginate @members, param_name: 'members_page', theme: 'gitlab'
...@@ -160,12 +160,12 @@ ...@@ -160,12 +160,12 @@
.pull-right .pull-right
= link_to admin_group_path(@group), class: 'btn btn-xs' do = link_to admin_group_path(@group), class: 'btn btn-xs' do
= icon('pencil-square-o', text: 'Manage access') = 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 } = render partial: 'shared/members/member', collection: @group_members, as: :member, locals: { show_controls: false }
.panel-footer .panel-footer
= paginate @group_members, param_name: 'group_members_page', theme: 'gitlab' = 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.panel-default
.panel-heading .panel-heading
...@@ -174,7 +174,7 @@ ...@@ -174,7 +174,7 @@
%span.badge= @project.users.size %span.badge= @project.users.size
.pull-right .pull-right
= link_to icon('pencil-square-o', text: 'Manage access'), polymorphic_url([@project, :members]), class: "btn btn-xs" = 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 } = render partial: 'shared/members/member', collection: @project_members, as: :member, locals: { show_controls: false }
.panel-footer .panel-footer
= paginate @project_members, param_name: 'project_members_page', theme: 'gitlab' = paginate @project_members, param_name: 'project_members_page', theme: 'gitlab'
...@@ -27,6 +27,6 @@ ...@@ -27,6 +27,6 @@
Members with access to Members with access to
%strong= @group.name %strong= @group.name
%span.badge= @members.total_count %span.badge= @members.total_count
%ul.content-list %ul.content-list.members-list
= render partial: 'shared/members/member', collection: @members, as: :member = render partial: 'shared/members/member', collection: @members, as: :member
= paginate @members, theme: 'gitlab' = paginate @members, theme: 'gitlab'
...@@ -11,5 +11,5 @@ ...@@ -11,5 +11,5 @@
%button.member-search-btn{ type: "submit", "aria-label" => "Submit search" } %button.member-search-btn{ type: "submit", "aria-label" => "Submit search" }
= icon("search") = icon("search")
= render 'shared/members/sort_dropdown' = render 'shared/members/sort_dropdown'
%ul.content-list %ul.content-list.members-list
= render partial: 'shared/members/member', collection: members, as: :member = render partial: 'shared/members/member', collection: members, as: :member
- show_roles = local_assigns.fetch(:show_roles, true) - show_roles = local_assigns.fetch(:show_roles, true)
- show_controls = local_assigns.fetch(:show_controls, 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) - user = local_assigns.fetch(:user, member.user)
- source = member.source - source = member.source
- can_admin_member = can?(current_user, action_member_permission(:update, member), member) - can_admin_member = can?(current_user, action_member_permission(:update, member), member)
...@@ -8,8 +9,8 @@ ...@@ -8,8 +9,8 @@
%span.list-item-name %span.list-item-name
- if user - if user
= image_tag avatar_icon(user, 40), class: "avatar s40", alt: '' = image_tag avatar_icon(user, 40), class: "avatar s40", alt: ''
%strong .user-info
= link_to user.name, user_path(user) = link_to user.name, user_path(user), class: 'member'
%span.cgray= user.to_reference %span.cgray= user.to_reference
- if user == current_user - if user == current_user
...@@ -23,7 +24,7 @@ ...@@ -23,7 +24,7 @@
· ·
= link_to source.full_name, source, class: "member-group-link" = link_to source.full_name, source, class: "member-group-link"
.hidden-xs.cgray .cgray
- if member.request? - if member.request?
Requested Requested
= time_ago_with_tooltip(member.requested_at) = time_ago_with_tooltip(member.requested_at)
...@@ -36,7 +37,8 @@ ...@@ -36,7 +37,8 @@
- else - else
= image_tag avatar_icon(member.invite_email, 40), class: "avatar s40", alt: '' = image_tag avatar_icon(member.invite_email, 40), class: "avatar s40", alt: ''
%strong= member.invite_email .user-info
.member= member.invite_email
.cgray .cgray
Invited Invited
- if member.created_by - if member.created_by
...@@ -47,6 +49,13 @@ ...@@ -47,6 +49,13 @@
- current_resource = @project || @group - current_resource = @project || @group
.controls.member-controls .controls.member-controls
- if show_controls && member.source == current_resource - 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 - if user != current_user && can_admin_member
= form_for member, remote: true, html: { class: 'form-horizontal js-edit-member-form' } do |f| = form_for member, remote: true, html: { class: 'form-horizontal js-edit-member-form' } do |f|
= f.hidden_field :access_level = f.hidden_field :access_level
...@@ -75,13 +84,17 @@ ...@@ -75,13 +84,17 @@
- if member.invite? && can?(current_user, action_member_permission(:admin, member), member.source) - if member.invite? && can?(current_user, action_member_permission(:admin, member), member.source)
= link_to 'Resend invite', polymorphic_path([:resend_invite, member]), = link_to 'Resend invite', polymorphic_path([:resend_invite, member]),
method: :post, 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 - 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, method: :post,
class: 'btn btn-success prepend-left-10', 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 can?(current_user, action_member_permission(:destroy, member), member)
- if current_user == user - if current_user == user
...@@ -96,8 +109,9 @@ ...@@ -96,8 +109,9 @@
data: { confirm: remove_member_message(member) }, data: { confirm: remove_member_message(member) },
class: 'btn btn-remove prepend-left-10', class: 'btn btn-remove prepend-left-10',
title: remove_member_title(member) do title: remove_member_title(member) do
%span.visible-xs-block %span{ class: ('visible-xs-block' unless force_mobile_view) }
Delete Delete
- unless force_mobile_view
= icon('trash', class: 'hidden-xs') = icon('trash', class: 'hidden-xs')
- else - else
%span.member-access-text= member.human_access %span.member-access-text= member.human_access
- force_mobile_view = local_assigns.fetch(:force_mobile_view, false)
- if requesters.any? - if requesters.any?
.panel.panel-default.prepend-top-default .panel.panel-default.prepend-top-default{ class: ('panel-mobile' if force_mobile_view ) }
.panel-heading .panel-heading
Users requesting access to Users requesting access to
%strong= membership_source.name %strong= membership_source.name
%span.badge= requesters.size %span.badge= requesters.size
%ul.content-list %ul.content-list.members-list
= render partial: 'shared/members/member', collection: requesters, as: :member = render partial: 'shared/members/member', collection: requesters, as: :member, locals: { force_mobile_view: force_mobile_view }
---
title: Improve members view on mobile
merge_request: 12619
author:
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