Merge branch 'mobile-members-ee' into 'master'

Improve members view on mobile (EE Version)

See merge request !2387

8 files changed, 162 insertions, 56 deletions

diff --git a/app/assets/stylesheets/pages/members.scss b/app/assets/stylesheets/pages/members.scss
index 22c18549982..8cc4e783a3b 100644
--- a/app/assets/stylesheets/pages/members.scss
+++ b/app/assets/stylesheets/pages/members.scss
@@ -60,8 +60,6 @@
     @media (min-width: $screen-sm-min) {
       display: -webkit-flex;
       display: flex;
-      width: 400px;
-      max-width: 50%;
     }
   }
 
@@ -71,7 +69,6 @@
     @media (min-width: $screen-sm-min) {
       display: -webkit-flex;
       display: flex;
-      width: 100%;
       margin-top: 3px;
     }
   }
@@ -87,18 +84,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 {
@@ -266,3 +255,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 210e44e5b80..915841ddb2f 100644
--- a/app/views/admin/groups/show.html.haml
+++ b/app/views/admin/groups/show.html.haml
@@ -122,8 +122,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
@@ -132,7 +131,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/admin/projects/show.html.haml b/app/views/admin/projects/show.html.haml
index 61a71bec754..b379435a4b2 100644
--- a/app/views/admin/projects/show.html.haml
+++ b/app/views/admin/projects/show.html.haml
@@ -162,12 +162,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
@@ -176,7 +176,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'
diff --git a/app/views/groups/group_members/index.html.haml b/app/views/groups/group_members/index.html.haml
index 1a3e82e233b..35c8087db11 100644
--- a/app/views/groups/group_members/index.html.haml
+++ b/app/views/groups/group_members/index.html.haml
@@ -29,6 +29,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 bb06bbcff1f..40ebeda2ed4 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)
@@ -11,46 +12,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
       = render 'shared/members/ee/ldap_tag', can_override: can_override_member, visible: false
       - 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 || can_override_member)
           = form_for member, remote: true, html: { class: 'form-horizontal js-edit-member-form' } do |f|
             = f.hidden_field :access_level
@@ -80,13 +88,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
@@ -101,9 +113,10 @@
                       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')
         = render 'shared/members/ee/override_member_buttons', group: @group, member: member, user: user, action: :edit, can_override: can_override_member
       - 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: