From feadfb2e46a6295966ac624c1d4aaa4b4dfb0a0e Mon Sep 17 00:00:00 2001
From: Sam <sam.saffron@gmail.com>
Date: Fri, 10 Jul 2015 14:48:44 +1000
Subject: [PATCH] improve who liked styling

---
 .../javascripts/discourse/components/who-liked.js.es6  |  6 +++---
 app/assets/stylesheets/common/base/topic-post.scss     |  9 +--------
 app/assets/stylesheets/desktop/topic-post.scss         | 10 ++++++++++
 app/assets/stylesheets/mobile/topic-post.scss          |  2 +-
 4 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/app/assets/javascripts/discourse/components/who-liked.js.es6 b/app/assets/javascripts/discourse/components/who-liked.js.es6
index cbbcbe742c8..c101f59ae4e 100644
--- a/app/assets/javascripts/discourse/components/who-liked.js.es6
+++ b/app/assets/javascripts/discourse/components/who-liked.js.es6
@@ -1,14 +1,13 @@
 import StringBuffer from 'discourse/mixins/string-buffer';
 
 export default Ember.Component.extend(StringBuffer, {
-  classNames: ['who-liked'],
   likedUsers: Ember.computed.alias('post.actionByName.like.users'),
   rerenderTriggers: ['likedUsers.length'],
 
   renderString(buffer) {
     const likedUsers = this.get('likedUsers');
     if (likedUsers && likedUsers.length > 0) {
-      buffer.push("<i class='fa fa-heart'></i>");
+      buffer.push("<div class='who-liked'>");
       let iconsHtml = "";
       likedUsers.forEach(function(u) {
         iconsHtml += "<a href=\"" + Discourse.getURL("/users/") + u.get('username_lower') + "\" data-user-card=\"" + u.get('username_lower') + "\">";
@@ -19,7 +18,8 @@ export default Ember.Component.extend(StringBuffer, {
         });
         iconsHtml += "</a>";
       });
-      buffer.push(iconsHtml);
+      buffer.push(I18n.t('post.actions.people.like',{icons: iconsHtml}));
+      buffer.push("</div>");
     }
   }
 });
diff --git a/app/assets/stylesheets/common/base/topic-post.scss b/app/assets/stylesheets/common/base/topic-post.scss
index 263974712a7..15217ad56cd 100644
--- a/app/assets/stylesheets/common/base/topic-post.scss
+++ b/app/assets/stylesheets/common/base/topic-post.scss
@@ -235,18 +235,11 @@ blockquote > *:last-child {
 }
 
 .who-liked {
+  transition: height 0.5s;
   a {
     margin: 0 0.25em 0.5em 0;
     display: inline-block;
   }
-
-  .fa-heart {
-    font-size: 20px;
-    margin-right: 5px;
-    display: inline-block;
-    vertical-align: middle;
-    color: $love;
-  }
 }
 
 
diff --git a/app/assets/stylesheets/desktop/topic-post.scss b/app/assets/stylesheets/desktop/topic-post.scss
index 285f3ff897b..8f051d1e923 100644
--- a/app/assets/stylesheets/desktop/topic-post.scss
+++ b/app/assets/stylesheets/desktop/topic-post.scss
@@ -899,6 +899,7 @@ $topic-avatar-width: 45px;
     }
   }
 }
+
 .topic-post {
   &.selected {
     article.boxed {
@@ -979,6 +980,13 @@ a.attachment:before {
 
 }
 
+.who-liked {
+  margin-top: 20px;
+  margin-bottom: 0px;
+  width: 100%;
+  text-align: right;
+}
+
 span.highlighted {
   background-color: dark-light-diff($tertiary, $secondary, 85%, -65%);
 }
@@ -1035,6 +1043,8 @@ and (max-width : 870px) {
 
 }
 
+
+
 /* below standard tablet portrait ----------- */
 
 @media all
diff --git a/app/assets/stylesheets/mobile/topic-post.scss b/app/assets/stylesheets/mobile/topic-post.scss
index f0610ae7e24..e924de444ca 100644
--- a/app/assets/stylesheets/mobile/topic-post.scss
+++ b/app/assets/stylesheets/mobile/topic-post.scss
@@ -32,7 +32,7 @@ nav.post-controls {
 }
 
 .who-liked {
-  margin-left: 20px;
+  margin-left: 10px;
 }
 
 button.like-count {