Improve members view on mobile

7 files changed, 160 insertions, 53 deletions

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 }
diff --git a/changelogs/unreleased/25103-mobile-members-page-user-avatar-is-misaligned.yml b/changelogs/unreleased/25103-mobile-members-page-user-avatar-is-misaligned.yml
new file mode 100644
index 00000000000..6688e79588f
--- /dev/null
+++ b/changelogs/unreleased/25103-mobile-members-page-user-avatar-is-misaligned.yml
@@ -0,0 +1,4 @@
+---
+title: Improve members view on mobile
+merge_request: 12619
+author: