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'>
-  {{categoryLink category}}
-</td>
+<div class="topic-item-stats clearfix">
+  <div class='category'>
+    {{categoryLink category}}
+  </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,41 +2,31 @@
   {{#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>
-          {{i18n rank_details.toggle}}
-        </button>
-      {{/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">
-                <div class='alert alert-info'>
-                  {{countI18n new_topics_inserted countBinding="view.topicTrackingState.incomingCount"}}
-                  <a href='#' {{action showInserted}}>{{i18n show_new_topics}}</a>
-                </div>
-              </td>
-            </tr>
-          </tbody>
+        {{#if canViewRankDetails}}
+          <button class='btn' {{action toggleRankDetails}} style='margin-bottom: 10px'>
+            <i class='icon icon-beaker'></i>
+            {{i18n rank_details.toggle}}
+          </button>
         {{/if}}
 
-        {{collection contentBinding="topics" tagName="tbody" itemViewClass="Discourse.TopicListItemView"}}
+        <table id='topic-list'>
 
-      </table>
+          {{#if view.topicTrackingState.hasIncoming}}
+            <tbody>
+              <tr>
+                <td>
+                  <div class='alert alert-info'>
+                    {{countI18n new_topics_inserted countBinding="view.topicTrackingState.incomingCount"}}
+                    <a href='#' {{action showInserted}}>{{i18n show_new_topics}}</a>
+                  </div>
+                </td>
+              </tr>
+            </tbody>
+          {{/if}}
+
+          {{collection contentBinding="topics" tagName="tbody" itemViewClass="Discourse.TopicListItemView"}}
+
+        </table>
       {{/if}}
     </div>
 

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