From 8e55acb063d46c9968f07ab6108a428e7b43d982 Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Wed, 5 Jul 2017 12:17:02 -0700 Subject: Improve members view on mobile --- app/assets/stylesheets/pages/members.scss | 112 ++++++++++++++++++--- app/views/admin/groups/show.html.haml | 5 +- app/views/groups/group_members/index.html.haml | 2 +- app/views/projects/project_members/_team.html.haml | 2 +- app/views/shared/members/_member.html.haml | 80 +++++++++------ app/views/shared/members/_requests.html.haml | 8 +- 6 files changed, 156 insertions(+), 53 deletions(-) (limited to 'app') diff --git a/app/assets/stylesheets/pages/members.scss b/app/assets/stylesheets/pages/members.scss index f21005895e4..e7c07ef67f0 100644 --- a/app/assets/stylesheets/pages/members.scss +++ b/app/assets/stylesheets/pages/members.scss @@ -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; + } + } +} diff --git a/app/views/admin/groups/show.html.haml b/app/views/admin/groups/show.html.haml index 9149b8e7fb9..843c71af466 100644 --- a/app/views/admin/groups/show.html.haml +++ b/app/views/admin/groups/show.html.haml @@ -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' diff --git a/app/views/groups/group_members/index.html.haml b/app/views/groups/group_members/index.html.haml index 2e4e4511bb6..ad9d5562ded 100644 --- a/app/views/groups/group_members/index.html.haml +++ b/app/views/groups/group_members/index.html.haml @@ -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' diff --git a/app/views/projects/project_members/_team.html.haml b/app/views/projects/project_members/_team.html.haml index 7ed467c8841..3fec9ea7310 100644 --- a/app/views/projects/project_members/_team.html.haml +++ b/app/views/projects/project_members/_team.html.haml @@ -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 diff --git a/app/views/shared/members/_member.html.haml b/app/views/shared/members/_member.html.haml index a5aa768b1b2..90f31c42ad3 100644 --- a/app/views/shared/members/_member.html.haml +++ b/app/views/shared/members/_member.html.haml @@ -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' if force_mobile_view == false) } + Grant access + - if force_mobile_view == false + = 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' if force_mobile_view == false) } Delete - = icon('trash', class: 'hidden-xs') + - if force_mobile_view == false + = icon('trash', class: 'hidden-xs') - else %span.member-access-text= member.human_access diff --git a/app/views/shared/members/_requests.html.haml b/app/views/shared/members/_requests.html.haml index 92f6e7428ae..09b9944082f 100644 --- a/app/views/shared/members/_requests.html.haml +++ b/app/views/shared/members/_requests.html.haml @@ -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 } -- cgit v1.2.1 From 8c92c405d72fd26d07e8a3712049765b314d4cf7 Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Fri, 7 Jul 2017 12:17:03 -0500 Subject: Use unless for force_mobile_view --- app/views/shared/members/_member.html.haml | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'app') diff --git a/app/views/shared/members/_member.html.haml b/app/views/shared/members/_member.html.haml index 90f31c42ad3..951b4dd7b36 100644 --- a/app/views/shared/members/_member.html.haml +++ b/app/views/shared/members/_member.html.haml @@ -91,9 +91,9 @@ method: :post, class: 'btn btn-success prepend-left-10', title: 'Grant access' do - %span{ class: ('visible-xs-block' if force_mobile_view == false) } + %span{ class: ('visible-xs-block' unless force_mobile_view) } Grant access - - if force_mobile_view == false + - unless force_mobile_view = icon('check inverse', class: 'hidden-xs') - if can?(current_user, action_member_permission(:destroy, member), member) @@ -109,9 +109,9 @@ data: { confirm: remove_member_message(member) }, class: 'btn btn-remove prepend-left-10', title: remove_member_title(member) do - %span{ class: ('visible-xs-block' if force_mobile_view == false) } + %span{ class: ('visible-xs-block' unless force_mobile_view) } Delete - - if force_mobile_view == false + - unless force_mobile_view = icon('trash', class: 'hidden-xs') - else %span.member-access-text= member.human_access -- cgit v1.2.1 From d94c8c818dd3f0087caf5ccf1a333a496764ee98 Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Fri, 7 Jul 2017 13:11:18 -0500 Subject: Add members-list class to admin projects page --- app/views/admin/projects/show.html.haml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'app') diff --git a/app/views/admin/projects/show.html.haml b/app/views/admin/projects/show.html.haml index fb9057b2db5..5a1b91fe535 100644 --- a/app/views/admin/projects/show.html.haml +++ b/app/views/admin/projects/show.html.haml @@ -160,7 +160,7 @@ .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' @@ -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' -- cgit v1.2.1 From 5668738efca2782756ba3129a2ea448971c4410b Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Fri, 7 Jul 2017 14:49:03 -0500 Subject: Force mobile view for admin projects --- app/views/admin/projects/show.html.haml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'app') diff --git a/app/views/admin/projects/show.html.haml b/app/views/admin/projects/show.html.haml index 5a1b91fe535..7b1b15cfeb8 100644 --- a/app/views/admin/projects/show.html.haml +++ b/app/views/admin/projects/show.html.haml @@ -165,7 +165,7 @@ .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 -- cgit v1.2.1