Mobile improvements

app/assets/javascripts/project_members.js.es6

 ((w) => {
-  window.gl = window.gl || {};
+  w.gl = w.gl || {};
 
   class ProjectMembers {
     constructor() {
@@ -10,6 +10,7 @@
     removeListeners() {
       $('.project_member, .group_member').off('ajax:success');
       $('.js-member-update-control').off('change');
+      $('.js-edit-member-form').off('ajax:success');
     }
 
     addListeners() {
@@ -17,6 +18,10 @@
       $('.js-member-update-control').on('change', function () {
         $(this).closest('form')
           .trigger("submit.rails");
+        $(this).disable();
+      });
+      $('.js-edit-member-form').on('ajax:success', function () {
+        $(this).find('.js-member-update-control').enable();
       });
     }
 

app/assets/stylesheets/framework/lists.scss

@@ -128,6 +128,10 @@ ul.content-list {
       color: $gl-dark-link-color;
     }
 
+    .member-group-link {
+      color: $blue-normal;
+    }
+
     .description {
       p {
         @include str-truncated;
@@ -166,8 +170,8 @@ ul.content-list {
 
     .member-controls {
       float: none;
-      
-      @media (min-width: $screen-md-min) {
+
+      @media (min-width: $screen-sm-min) {
         float: right;
       }
     }

app/assets/stylesheets/pages/members.scss

@@ -8,24 +8,52 @@
   .list-item-name {
     float: none;
 
-    @media (min-width: $screen-md-min) {
+    @media (min-width: $screen-sm-min) {
       float: left;
       width: 50%;
     }
   }
 
   .controls {
-    display: flex;
-    width: 400px;
+    @media (min-width: $screen-sm-min) {
+      display: flex;
+      width: 400px;
+      max-width: 50%;
+    }
   }
 
   .form-horizontal {
-    display: flex;
-    flex: 1;
-    margin-top: 3px;
+    margin-top: 5px;
+
+    @media (min-width: $screen-sm-min) {
+      display: flex;
+      flex: 1;
+      margin-top: 3px;
+    }
+  }
+
+  .btn-remove {
+    width: 100%;
+
+    @media (min-width: $screen-sm-min) {
+      width: auto;
+    }
+  }
+}
+
+.member-form-control {
+  @media (max-width: $screen-xs-max) {
+    padding: 5px 0;
+    margin-left: 0;
+    margin-right: 0;
   }
 
-  .member-form-control {
+  @media (min-width: $screen-sm-min) {
     width: 50%;
   }
 }
+
+.member-access-text {
+  margin-left: auto;
+  line-height: 43px;
+}

app/views/groups/group_members/update.js.haml

 :plain
-  $("##{dom_id(@group_member)}").replaceWith('#{escape_javascript(render('shared/members/member', member: @group_member))}');
-  new gl.MemberExpirationDate();
+  var $listItem = $('#{escape_javascript(render('shared/members/member', member: @group_member))}');
+  $("##{dom_id(@group_member)} .list-item-name").replaceWith($listItem.find('.list-item-name'));

app/views/projects/project_members/_team.html.haml

@@ -6,4 +6,4 @@
   %ul.content-list
     - members.each do |user|
       - member = @project.team.find_member(user.id)
-      = render 'shared/members/member', member: member
+      = render 'shared/members/member', member: member, user: user

app/views/shared/members/_group.html.haml

@@ -17,7 +17,10 @@
       .prepend-left-5.append-right-10.clearable-input.member-form-control
         = text_field_tag 'group_link[expires_at]', group_link.expires_at, class: 'form-control js-access-expiration-date js-member-update-control', placeholder: 'Expiration date', id: "member_expires_at_#{group.id}"
         %i.clear-icon.js-clear-input
-    = link_to icon('trash'), namespace_project_group_link_path(@project.namespace, @project, group_link),
+    = link_to namespace_project_group_link_path(@project.namespace, @project, group_link),
       remote: true,
       method: :delete,
-      class: 'btn btn-remove'
+      class: 'btn btn-remove' do
+      %span.visible-xs-block
+        Delete
+      = icon('trash', class: 'hidden-xs')

app/views/shared/members/_member.html.haml

 - show_roles = local_assigns.fetch(:show_roles, true)
 - show_controls = local_assigns.fetch(:show_controls, true)
-- user = member.user
+- user = local_assigns.fetch(:user, member.user)
 
 %li.member{ class: dom_class(member), id: dom_id(member) }
   %span{ class: ("list-item-name" if show_controls) }
@@ -11,12 +11,16 @@
       %span.cgray= user.to_reference
 
       - if user == current_user
-        %span.label.label-success It's you
+        %span.label.label-success.prepend-left-5 It's you
 
       - if user.blocked?
         %label.label.label-danger
           %strong Blocked
 
+      - if member.respond_to?(:group) && !@group
+        = link_to member.group, class: "member-group-link prepend-left-5" do
+          = "· #{member.group.name}"
+
       .cgray
         - if member.request?
           Requested
@@ -40,11 +44,14 @@
   - if show_roles
     .controls.member-controls
       - if show_controls
-        = form_for member, remote: true, html: { class: 'form-horizontal' } do |f|
-          = f.select :access_level, options_for_select(member.class.access_level_roles, member.access_level), {}, class: 'form-control member-form-control append-right-5 js-member-update-control', id: "member_access_level_#{member.id}", disabled: !can?(current_user, action_member_permission(:update, member), member)
-          .prepend-left-5.append-right-10.clearable-input.member-form-control
-            = f.text_field :expires_at, class: 'form-control js-access-expiration-date js-member-update-control', placeholder: 'Expiration date', id: "member_expires_at_#{member.id}", disabled: !can?(current_user, action_member_permission(:update, member), member)
-            %i.clear-icon.js-clear-input
+        - if user != current_user
+          = form_for member, remote: true, html: { class: 'form-horizontal js-edit-member-form' } do |f|
+            = f.select :access_level, options_for_select(member.class.access_level_roles, member.access_level), {}, class: 'form-control member-form-control append-right-5 js-member-update-control', id: "member_access_level_#{member.id}", disabled: !can?(current_user, action_member_permission(:update, member), member)
+            .prepend-left-5.append-right-10.clearable-input.member-form-control
+              = f.text_field :expires_at, class: 'form-control js-access-expiration-date js-member-update-control', placeholder: 'Expiration date', id: "member_expires_at_#{member.id}", disabled: !can?(current_user, action_member_permission(:update, member), member)
+              %i.clear-icon.js-clear-input
+        - else
+          %span.member-access-text= member.human_access
         - if !user && can?(current_user, action_member_permission(:admin, member), member.source)
           = link_to 'Resend invite', polymorphic_path([:resend_invite, member]),
                     method: :post,
@@ -63,9 +70,12 @@
                       data: { confirm: leave_confirmation_message(member.source) },
                       class: 'btn btn-remove'
           - else
-            = link_to icon('trash'), member,
+            = link_to member,
                       remote: true,
                       method: :delete,
                       data: { confirm: remove_member_message(member) },
                       class: 'btn btn-remove',
-                      title: remove_member_title(member)
+                      title: remove_member_title(member) do
+              %span.visible-xs-block
+                Delete
+              = icon('trash', class: 'hidden-xs')