From 9483940244690ecc06763622bd9317b2a35d589a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9gis=20Hanol?= <regis@hanol.fr>
Date: Fri, 23 Oct 2015 10:19:28 +0200
Subject: [PATCH] UX: new topics list for mobile

---
 .../javascripts/discourse/models/topic.js.es6 |  2 +
 .../mobile/list/topic_list_item.raw.hbs       | 49 +++++++++++--------
 app/assets/stylesheets/mobile/topic-list.scss |  8 +++
 3 files changed, 38 insertions(+), 21 deletions(-)

diff --git a/app/assets/javascripts/discourse/models/topic.js.es6 b/app/assets/javascripts/discourse/models/topic.js.es6
index 3b63069ed..d8560778b 100644
--- a/app/assets/javascripts/discourse/models/topic.js.es6
+++ b/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 || "";
diff --git a/app/assets/javascripts/discourse/templates/mobile/list/topic_list_item.raw.hbs b/app/assets/javascripts/discourse/templates/mobile/list/topic_list_item.raw.hbs
index aa4370c96..5de568341 100644
--- a/app/assets/javascripts/discourse/templates/mobile/list/topic_list_item.raw.hbs
+++ b/app/assets/javascripts/discourse/templates/mobile/list/topic_list_item.raw.hbs
@@ -1,28 +1,35 @@
 <td>
-<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='creator pull-left'>
+    <a href="{{content.lastPostUrl}}">{{avatar topic.creator imageSize="large"}}</a>
+  </div>
 
-<div class="topic-item-stats clearfix">
-  {{#unless controller.hideCategory}}
-    <div class='category'>
-      {{category-link content.category}}
+  <div class='right'>
+    <div class='main-link'>
+      {{raw "topic-status" topic=content}}
+      {{topic-link content}}
+      {{raw "list/topic-excerpt" topic=content}}
     </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>
+    <div class='pull-right'>
+      {{raw "list/post-count-or-badges" topic=content postBadgesEnabled=controller.showTopicPostBadges}}
+    </div>
+
+    <div class="topic-item-stats clearfix">
+      {{#unless controller.hideCategory}}
+        <div class='category'>
+          {{category-link content.category}}
+        </div>
+      {{/unless}}
+
+      {{plugin-outlet "topic-list-tags"}}
+
+      <div class="pull-right">
+        <div class='num activity last'>
+          <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>
-  <div class="clearfix"></div>
-</div>
 </td>
diff --git a/app/assets/stylesheets/mobile/topic-list.scss b/app/assets/stylesheets/mobile/topic-list.scss
index 50966703f..f9b6990e4 100644
--- a/app/assets/stylesheets/mobile/topic-list.scss
+++ b/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%));