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

Improve members view on mobile

Closes #25103

See merge request !12619

2 files changed, 52 insertions, 36 deletions

diff --git a/app/views/shared/members/_member.html.haml b/app/views/shared/members/_member.html.haml
index a5aa768b1b2..951b4dd7b36 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' 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
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 }