Use two lines per topic list item on mobile

app/assets/javascripts/discourse/templates/mobile/list/topic_list_item.js.handlebars

@@ -1,4 +1,5 @@
-<td class='main-link clearfix'>
+<td>
+<div class='main-link clearfix'>
 
   {{#if controller.rankDetailsVisible}}
     <div class='rank-details'>
@@ -33,10 +34,34 @@
       {{/if}}
     </div>
   {{/if}}
-</td>
+</div>
 
-<td class='category'>
+<div class="topic-item-stats clearfix">
+  <div class='category'>
     {{categoryLink category}}
-</td>
+  </div>
 
-<td class='num posts'><a href="{{lastUnreadUrl}}" class='badge-posts'>{{number posts_count numberKey="posts_long"}}</a></td>
+  <div class="pull-right">
+    <div class='num posts'><a href="{{lastUnreadUrl}}"><i class="icon icon-comments"></i> {{number posts_count numberKey="posts_long"}}</a></div>
+
+    {{#if like_count}}
+      <div class='num likes'><a href='{{url}}{{#if has_best_of}}?filter=best_of{{/if}}' title='{{i18n topic.likes count="like_count"}}'><i class='icon-heart'></i> {{number like_count numberKey="likes_long"}}</a></div>
+    {{/if}}
+
+    <div class='last-poster'>
+      <i class="icon icon-user"></i> {{last_poster_username}}
+    </div>
+
+    {{#if bumped}}
+      <div class='num activity last'>
+        <a href="{{lastPostUrl}}" class='age' title='{{i18n last_post}}: {{{unboundDate bumped_at}}}'>{{unboundAge bumped_at}}</a>
+      </div>
+    {{else}}
+      <div class='num activity last'>
+        <a href="{{url}}" class='age' title='{{i18n first_post}}: {{{unboundDate created_at}}}'>{{unboundAge created_at}}</a>
+      </div>
+    {{/if}}
+  </div>
+  <div class="clearfix"></div>
+</div>
+</td>

app/assets/javascripts/discourse/templates/mobile/list/topics.js.handlebars

@@ -2,7 +2,6 @@
   {{#if loaded}}
     <div class='contents'>
       {{#if view.showTable}}
-
         {{#if canViewRankDetails}}
           <button class='btn' {{action toggleRankDetails}} style='margin-bottom: 10px'>
             <i class='icon icon-beaker'></i>
@@ -11,20 +10,11 @@
         {{/if}}
 
         <table id='topic-list'>
-        <thead>
-        <tr>
-          <th class='main-link'>
-            {{i18n topic.title}}
-          </th>
-          <th class='category'>{{i18n category_title}}</th>
-          <th class='num posts'>{{i18n posts}}</th>
-        </tr>
-        </thead>
 
           {{#if view.topicTrackingState.hasIncoming}}
             <tbody>
               <tr>
-              <td colspan="3">
+                <td>
                   <div class='alert alert-info'>
                     {{countI18n new_topics_inserted countBinding="view.topicTrackingState.incomingCount"}}
                     <a href='#' {{action showInserted}}>{{i18n show_new_topics}}</a>

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

@@ -92,12 +92,10 @@
     }
   }
   td {
-    //border-top: 1px solid $topic-list-td-border-color;
     color: $topic-list-td-color;
     font-size: 14px;
   }
   .main-link {
-    // width: 495px;
     font-size: 16px;
 
     i.score {
@@ -138,45 +136,24 @@
     position: relative;
     top: -1px;
   }
-  .category {
-    // width: 100px;
+
+  .topic-item-stats {
+    margin-top: 8px;
   }
-  .has-excerpt {
-    td.category, td.posts {
-      vertical-align: top;
-      padding-top: 8px;
-    }
-  }
-  .posters {
-    width: 150px;
-    > a {
+
+  .topic-item-stats {
+    .category, .num, .last-poster {
       float: left;
-      margin-right: 4px;
-      &:last-of-type {
-        margin-right: 0;
-      }
-    }
-  }
-  .avatar {
-    &.latest {
-      @include box-shadow(0 0 6px 1px desaturate(lighten($link_color, 18%), 35%));
+      margin-right: 8px;
     }
   }
+
   .num {
     text-align: center;
     a:not(.badge-posts) {
       color: inherit;
     }
   }
-  .likes {
-    width: 50px;
-  }
-  .activity {
-    width: 50px;
-  }
-  .age {
-    width: 60px;
-  }
 }
 
 // Category list

app/serializers/topic_list_item_serializer.rb

@@ -5,7 +5,8 @@ class TopicListItemSerializer < ListableTopicSerializer
              :starred,
              :has_best_of,
              :archetype,
-             :rank_details
+             :rank_details,
+             :last_poster_username
 
   has_one :category, serializer: BasicCategorySerializer
   has_many :posters, serializer: TopicPosterSerializer, embed: :objects
@@ -44,4 +45,8 @@ class TopicListItemSerializer < ListableTopicSerializer
     object.posters || []
   end
 
+  def last_poster_username
+    object.posters.find { |poster| poster.user.id == object.last_post_user_id }.try(:user).try(:username)
+  end
+
 end