UX: Show two lines per user on directory

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

@@ -1,3 +1,11 @@
 export default Ember.Component.extend({
-  classNames: ['user-small']
+  classNames: ['user-small'],
+
+  name: function() {
+    const name = this.get('user.name');
+    if (name && this.get('user.username') !== name) {
+      return name;
+    }
+  }.property('user.name')
+
 });

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

@@ -3,7 +3,9 @@
 </div>
 
 <div class="user-detail">
-  <span class="username">{{#link-to 'user' user.username}}{{user.username}}{{/link-to}}</span>
-  <span class="name">{{user.name}}</span>
-  <span class="title">{{user.title}}</span>
+  <div class='name-line'>
+    <span class="username">{{#link-to 'user' user.username}}{{user.username}}{{/link-to}}</span>
+    <span class="name">{{name}}</span>
+  </div>
+  <div class="title">{{user.title}}</div>
 </div>

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

@@ -22,10 +22,7 @@
           <tbody>
             {{#each item in model}}
               <tr>
-                <td>
-                  {{avatar item imageSize="tiny"}}
-                  {{#link-to 'user' item.username}}{{unbound item.username}}{{/link-to}}
-                </td>
+                <td>{{user-small user=item.user}}</td>
                 <td>{{number item.likes_received}}</td>
                 <td>{{number item.likes_given}}</td>
                 <td>{{number item.topic_count}}</td>

app/assets/stylesheets/common/base/about.scss

@@ -5,45 +5,6 @@ section.about {
     margin-top: 10px;
   }
 
-  .user-small {
-    padding: 8px;
-    width: 205px;
-    height: 60px;
-    float: left;
-
-    .user-image {
-      float: left;
-      padding-right: 4px;
-    }
-
-    .user-detail {
-      float: left;
-      width: 70%;
-
-      span {
-        float: left;
-        width: 90%;
-        padding-left: 5px;
-      }
-
-      .username a {
-        font-weight: bold;
-        font-size: 16px;
-        color: scale-color($primary, $lightness: 30%);
-      }
-
-      .name {
-        font-size: 13px;
-        color: scale-color($primary, $lightness: 30%);
-      }
-
-      .title {
-        font-size: 13px;
-        color: scale-color($primary, $lightness: 50%);
-      }
-
-    }
-  }
 
   p {
     margin: 10px 0;

app/assets/stylesheets/common/base/directory.scss

@@ -22,6 +22,7 @@
       padding: 0.5em;
       text-align: left;
       border-bottom: 1px solid scale-color-diff();
+      vertical-align: top;
     }
 
     th.sortable {

app/assets/stylesheets/common/base/user.scss

@@ -86,3 +86,43 @@
 .new-private-message {
   margin-bottom: 15px;
 }
+
+.user-small {
+  display: inline-block;
+  width: 333px;
+  clear: both;
+
+  .user-image {
+    float: left;
+    padding-right: 4px;
+  }
+
+  .user-detail {
+    float: left;
+    width: 70%;
+    padding-left: 5px;
+    font-size: 13px;
+
+    .name-line {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .username a {
+      font-weight: bold;
+      color: scale-color($primary, $lightness: 30%);
+    }
+
+    .name {
+      margin-left: 5px;
+      color: scale-color($primary, $lightness: 30%);
+    }
+
+    .title {
+      margin-top: 3px;
+      color: scale-color($primary, $lightness: 50%);
+    }
+
+  }
+}

app/controllers/directory_items_controller.rb

@@ -22,12 +22,10 @@ class DirectoryItemsController < ApplicationController
     result_count = result.dup.count
     result = result.limit(PAGE_SIZE).offset(PAGE_SIZE * page)
 
-    serialized = serialize_data(result, DirectoryItemSerializer)
-
     more_params = params.slice(:period, :order, :asc)
     more_params[:page] = page + 1
 
-    render_json_dump directory_items: serialized,
+    render_json_dump directory_items: serialize_data(result, DirectoryItemSerializer),
                      total_rows_directory_items: result_count,
                      load_more_directory_items: directory_items_path(more_params)
 

app/serializers/directory_item_serializer.rb

@@ -1,29 +1,15 @@
 class DirectoryItemSerializer < ApplicationSerializer
 
   attributes :id,
-             :username,
-             :uploaded_avatar_id,
-             :avatar_template,
              :time_read
 
+  has_one :user, embed: :objects, serializer: UserNameSerializer
   attributes *DirectoryItem.headings
 
   def id
     object.user_id
   end
 
-  def username
-    object.user.username
-  end
-
-  def uploaded_avatar_id
-    object.user.uploaded_avatar_id
-  end
-
-  def avatar_template
-    object.user.avatar_template
-  end
-
   def time_read
     AgeWords.age_words(object.user_stat.time_read)
   end