UX: new topics list for mobile

app/assets/javascripts/discourse/models/topic.js.es6

@@ -8,6 +8,8 @@ const Topic = RestModel.extend({
   message: null,
   errorLoading: false,
 
+  creator: Ember.computed.alias("posters.firstObject.user"),
+
   @computed('fancy_title')
   fancyTitle(title) {
     title = title || "";

app/assets/javascripts/discourse/templates/mobile/list/topic_list_item.raw.hbs

@@ -1,13 +1,18 @@
 <td>
+  <div class='creator pull-left'>
+    <a href="{{content.lastPostUrl}}">{{avatar topic.creator imageSize="large"}}</a>
+  </div>
+
+  <div class='right'>
     <div class='main-link'>
       {{raw "topic-status" topic=content}}
       {{topic-link content}}
       {{raw "list/topic-excerpt" topic=content}}
     </div>
+
     <div class='pull-right'>
       {{raw "list/post-count-or-badges" topic=content postBadgesEnabled=controller.showTopicPostBadges}}
     </div>
-<div class="clearfix"></div>
 
     <div class="topic-item-stats clearfix">
       {{#unless controller.hideCategory}}
@@ -15,14 +20,16 @@
           {{category-link content.category}}
         </div>
       {{/unless}}
+
       {{plugin-outlet "topic-list-tags"}}
 
       <div class="pull-right">
         <div class='num activity last'>
-      {{raw "list/activity-column" topic=content tagName="span" class="age"}}
-      <a href="{{content.lastPostUrl}}" title='{{i18n 'last_post'}}: {{{raw-date content.bumped_at}}}'>{{content.last_poster_username}}</a>
+          <span class="age activity" title="{{content.bumpedAtTitle}}"><a href="{{content.lastPostUrl}}">{{format-date content.bumpedAt format="tiny" noTitle="true"}}</a></span>
         </div>
       </div>
+
       <div class="clearfix"></div>
     </div>
+  </div>
 </td>

app/assets/stylesheets/mobile/topic-list.scss

@@ -63,6 +63,14 @@
 
 .topic-list {
 
+  .creator {
+    margin-left: 5px;
+  }
+
+  .right {
+      margin-left: 60px;
+  }
+
   > tbody > tr {
     &.highlighted {
       background-color: dark-light-choose(scale-color($tertiary, $lightness: 85%), scale-color($tertiary, $lightness: -55%));