improve who liked styling

This commit is contained in:
Sam 2015-07-10 14:48:44 +10:00
parent f533276507
commit feadfb2e46
4 changed files with 15 additions and 12 deletions

View File

@ -1,14 +1,13 @@
import StringBuffer from 'discourse/mixins/string-buffer'; import StringBuffer from 'discourse/mixins/string-buffer';
export default Ember.Component.extend(StringBuffer, { export default Ember.Component.extend(StringBuffer, {
classNames: ['who-liked'],
likedUsers: Ember.computed.alias('post.actionByName.like.users'), likedUsers: Ember.computed.alias('post.actionByName.like.users'),
rerenderTriggers: ['likedUsers.length'], rerenderTriggers: ['likedUsers.length'],
renderString(buffer) { renderString(buffer) {
const likedUsers = this.get('likedUsers'); const likedUsers = this.get('likedUsers');
if (likedUsers && likedUsers.length > 0) { if (likedUsers && likedUsers.length > 0) {
buffer.push("<i class='fa fa-heart'></i>"); buffer.push("<div class='who-liked'>");
let iconsHtml = ""; let iconsHtml = "";
likedUsers.forEach(function(u) { likedUsers.forEach(function(u) {
iconsHtml += "<a href=\"" + Discourse.getURL("/users/") + u.get('username_lower') + "\" data-user-card=\"" + u.get('username_lower') + "\">"; 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>"; iconsHtml += "</a>";
}); });
buffer.push(iconsHtml); buffer.push(I18n.t('post.actions.people.like',{icons: iconsHtml}));
buffer.push("</div>");
} }
} }
}); });

View File

@ -235,18 +235,11 @@ blockquote > *:last-child {
} }
.who-liked { .who-liked {
transition: height 0.5s;
a { a {
margin: 0 0.25em 0.5em 0; margin: 0 0.25em 0.5em 0;
display: inline-block; display: inline-block;
} }
.fa-heart {
font-size: 20px;
margin-right: 5px;
display: inline-block;
vertical-align: middle;
color: $love;
}
} }

View File

@ -899,6 +899,7 @@ $topic-avatar-width: 45px;
} }
} }
} }
.topic-post { .topic-post {
&.selected { &.selected {
article.boxed { article.boxed {
@ -979,6 +980,13 @@ a.attachment:before {
} }
.who-liked {
margin-top: 20px;
margin-bottom: 0px;
width: 100%;
text-align: right;
}
span.highlighted { span.highlighted {
background-color: dark-light-diff($tertiary, $secondary, 85%, -65%); background-color: dark-light-diff($tertiary, $secondary, 85%, -65%);
} }
@ -1035,6 +1043,8 @@ and (max-width : 870px) {
} }
/* below standard tablet portrait ----------- */ /* below standard tablet portrait ----------- */
@media all @media all

View File

@ -32,7 +32,7 @@ nav.post-controls {
} }
.who-liked { .who-liked {
margin-left: 20px; margin-left: 10px;
} }
button.like-count { button.like-count {