UX: group member page improvements

app/assets/javascripts/discourse/controllers/group/members.js.es6

@@ -21,4 +21,3 @@ export default Ember.ObjectController.extend({
     }
   }
 });
-

app/assets/javascripts/discourse/templates/group/members.hbs

@@ -1,19 +1,17 @@
 {{#if model}}
   <table class='group-members'>
     <tr>
-      <th colspan="3" class="seen">{{i18n 'last_seen'}}</th>
+      <th colspan="2">{{i18n 'last_post'}}</th>
+      <th>{{i18n 'last_seen'}}</th>
     </tr>
   {{#each model.members as |m|}}
     <tr>
-      <td class='avatar'>
+      <td class='avatar'>{{user-small user=m}}</td>
-        {{avatar m imageSize="large"}}
+      <td>
+        <span class="text">{{bound-date m.last_posted_at}}</span>
       </td>
       <td>
-        <h3>{{#link-to 'user' m}}{{m.username}}{{/link-to}}</h3>
+        <span class="text">{{bound-date m.last_seen_at}}</span>
-        <p>{{m.name}}</p>
-      </td>
-      <td>
-        <span class='last-seen-at'>{{bound-date m.last_seen_at}}</span>
       </td>
     </tr>
   {{/each}}

app/assets/stylesheets/desktop/user.scss

@@ -115,19 +115,24 @@
       overflow: hidden;
       text-overflow: ellipsis;
     }
-    th.seen {
+    th {
+      padding: 0.5em;
       text-align: right;
+      border-bottom: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
     }
     td.avatar {
       width: 60px;
     }
     td {
+      padding: 0.5em;
+      border-bottom: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
       img {
         margin-right: 10px;
       }
-      span.last-seen-at {
+      span.text {
         float: right;
-        color: $primary;
+        font-size: 1.2em;
+        color: dark-light-diff($primary, $secondary, 50%, -50%);
       }
     }
   }

app/serializers/group_user_serializer.rb

@@ -1,4 +1,3 @@
 class GroupUserSerializer < BasicUserSerializer
-  attributes :name, :last_seen_at
+  attributes :name, :last_posted_at, :last_seen_at
 end
-