UX: Improve user directory on mobile

app/assets/javascripts/discourse/components/user-stat.js.es6

@@ -0,0 +1,3 @@
+export default Ember.Component.extend({
+  classNames: ['user-stat']
+});

app/assets/javascripts/discourse/templates/components/user-stat.hbs

@@ -0,0 +1,5 @@
+<span class='value'>
+  {{#if icon}}{{fa-icon icon}}{{/if}}
+  {{number value}}
+</span>
+<span class='label'>{{i18n label}}</span>

app/assets/javascripts/discourse/templates/mobile/users.hbs

@@ -0,0 +1,39 @@
+<div class="container">
+  <div class='directory'>
+
+    <div class='clearfix user-controls'>
+      {{period-chooser period=period}}
+      {{text-field value=nameInput placeholderKey="directory.filter_name" class="filter-name"}}
+    </div>
+
+    {{#conditional-loading-spinner condition=model.loading}}
+      {{#if model.length}}
+        <div class='total-rows'>{{i18n "directory.total_rows" count=model.totalRows}}</div>
+
+          {{#each ic in model itemController="directory-item"}}
+            <div class="user {{if ic.me 'me'}}">
+              {{#with ic.model as |it|}}
+                {{user-small user=it.user}}
+                {{user-stat value=it.likes_received label="directory.likes_received" icon="heart"}}
+                {{user-stat value=it.likes_given label="directory.likes_given" icon="heart"}}
+                {{user-stat value=it.topic_count label="directory.topic_count"}}
+                {{user-stat value=it.post_count label="directory.post_count"}}
+                {{user-stat value=it.topics_entered label="directory.topics_entered"}}
+                {{user-stat value=it.posts_read label="directory.posts_read"}}
+                {{user-stat value=it.days_visited label="directory.days_visited"}}
+                {{#if showTimeRead}}
+                  <div class='time-read'>{{unbound it.time_read}}</div>
+                {{/if}}
+              {{/with}}
+            </div>
+          {{/each}}
+
+        {{conditional-loading-spinner condition=model.loadingMore}}
+      {{else}}
+        <div class='clearfix'></div>
+        <p>{{i18n "directory.no_results"}}</p>
+      {{/if}}
+    {{/conditional-loading-spinner}}
+
+  </div>
+</div>

app/assets/javascripts/discourse/templates/users.hbs

@@ -25,19 +25,21 @@
             {{/if}}
           </thead>
           <tbody>
-            {{#each item in model itemController="directory-item"}}
-              <tr {{bind-attr class="item.me"}}>
-                <td>{{user-small user=item.model.user}}</td>
-                <td>{{number item.model.likes_received}}</td>
-                <td>{{number item.model.likes_given}}</td>
-                <td>{{number item.model.topic_count}}</td>
-                <td>{{number item.model.post_count}}</td>
-                <td>{{number item.model.topics_entered}}</td>
-                <td>{{number item.model.posts_read}}</td>
-                <td>{{number item.model.days_visited}}</td>
-                {{#if showTimeRead}}
-                <td><span class='time-read'>{{unbound item.model.time_read}}</span></td>
-                {{/if}}
+            {{#each ic in model itemController="directory-item"}}
+              <tr class="{{if ic.me 'me'}}">
+                {{#with ic.model as |it|}}
+                  <td>{{user-small user=it.user}}</td>
+                  <td>{{number it.likes_received}}</td>
+                  <td>{{number it.likes_given}}</td>
+                  <td>{{number it.topic_count}}</td>
+                  <td>{{number it.post_count}}</td>
+                  <td>{{number it.topics_entered}}</td>
+                  <td>{{number it.posts_read}}</td>
+                  <td>{{number it.days_visited}}</td>
+                  {{#if showTimeRead}}
+                    <td><span class='time-read'>{{unbound it.time_read}}</span></td>
+                  {{/if}}
+                {{/with}}
               </tr>
             {{/each}}
           </tbody>

app/assets/stylesheets/mobile.scss

@@ -17,6 +17,7 @@
 @import "mobile/upload";
 @import "mobile/user";
 @import "mobile/history";
+@import "mobile/directory";
 
 /* These files doesn't actually exist, they are injected by DiscourseSassImporter. */
 

app/assets/stylesheets/mobile/directory.scss

@@ -0,0 +1,49 @@
+.directory {
+  .period-chooser button {
+    margin: 0;
+  }
+  .period-chooser {
+    li {
+      text-align: left;
+    }
+  }
+}
+
+.user-controls {
+  padding: 1em;
+}
+
+.total-rows {
+  padding: 0.25em 0.5em;
+}
+
+.user {
+  border-top: 1px solid dark-light-diff($primary, $secondary, 80%, -20%);
+  padding: 1em;
+
+
+  &.me {
+    background-color: dark-light-diff($highlight, $secondary, 70%, -80%);
+
+    .username a, .name, .title, .number, .time-read, .user-stat .label {
+      color: scale-color($highlight, $lightness: -50%);
+    }
+  }
+  .user-stat {
+    margin-left: 55px;
+    font-size: 13px;
+
+    .value {
+      font-weight: bold;
+    }
+    .label {
+      margin-left: 0.2em;
+      color: dark-light-diff($primary, $secondary, 50%, -50%);
+    }
+
+    i.fa-heart {
+      color: $love;
+    }
+  }
+  margin-bottom: 1em;
+}