From fcc86d5be32f3851a42f5eb04d14675b931b3bcf Mon Sep 17 00:00:00 2001
From: Neil Lalonde <neillalonde@gmail.com>
Date: Mon, 29 Jan 2018 13:31:06 -0500
Subject: [PATCH] FIX: time read on users directory was not rendering correctly
 on mobile

---
 app/assets/javascripts/discourse/components/user-stat.js.es6 | 3 ++-
 .../javascripts/discourse/templates/components/user-stat.hbs | 2 ++
 .../discourse/templates/mobile/components/directory-item.hbs | 2 +-
 app/assets/stylesheets/common/base/directory.scss            | 5 ++++-
 4 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/app/assets/javascripts/discourse/components/user-stat.js.es6 b/app/assets/javascripts/discourse/components/user-stat.js.es6
index 8931501e3e6..933f11a11bd 100644
--- a/app/assets/javascripts/discourse/components/user-stat.js.es6
+++ b/app/assets/javascripts/discourse/components/user-stat.js.es6
@@ -1,5 +1,6 @@
 export default Ember.Component.extend({
   classNames: ['user-stat'],
   type: 'number',
-  isNumber: Ember.computed.equal('type', 'number')
+  isNumber: Ember.computed.equal('type', 'number'),
+  isDuration: Ember.computed.equal('type', 'duration')
 });
diff --git a/app/assets/javascripts/discourse/templates/components/user-stat.hbs b/app/assets/javascripts/discourse/templates/components/user-stat.hbs
index 19c62e09d9d..87b1a220e13 100644
--- a/app/assets/javascripts/discourse/templates/components/user-stat.hbs
+++ b/app/assets/javascripts/discourse/templates/components/user-stat.hbs
@@ -1,6 +1,8 @@
 <span class='value'>
   {{#if isNumber}}
     {{number value}}
+  {{else if isDuration}}
+    {{format-duration value}}
   {{else}}
     {{value}}
   {{/if}}
diff --git a/app/assets/javascripts/discourse/templates/mobile/components/directory-item.hbs b/app/assets/javascripts/discourse/templates/mobile/components/directory-item.hbs
index cf592623fe1..f55fd6e5692 100644
--- a/app/assets/javascripts/discourse/templates/mobile/components/directory-item.hbs
+++ b/app/assets/javascripts/discourse/templates/mobile/components/directory-item.hbs
@@ -7,5 +7,5 @@
 {{user-stat value=item.posts_read label="directory.posts_read"}}
 {{user-stat value=item.days_visited label="directory.days_visited"}}
 {{#if showTimeRead}}
-  <div class='time-read'>{{unbound item.time_read}}</div>
+  {{user-stat value=item.time_read label="directory.time_read" type="duration"}}
 {{/if}}
diff --git a/app/assets/stylesheets/common/base/directory.scss b/app/assets/stylesheets/common/base/directory.scss
index d9cef7b2968..0a03b208717 100644
--- a/app/assets/stylesheets/common/base/directory.scss
+++ b/app/assets/stylesheets/common/base/directory.scss
@@ -32,6 +32,9 @@
         font-size: $font-up-3;
         color: $primary-medium; 
       }
+      .time-read {
+        white-space: nowrap;
+      }
     }
 
     tr.me {
@@ -39,7 +42,7 @@
         background-color: dark-light-choose($highlight-low, $highlight-medium);
 
         .username a, .name, .title, .number, .time-read {
-          color: $primary-medium;           
+          color: $primary-medium;
         }
       }
     }