improve who liked styling
This commit is contained in:
parent
f533276507
commit
feadfb2e46
|
@ -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>");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
|
@ -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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -32,7 +32,7 @@ nav.post-controls {
|
||||||
}
|
}
|
||||||
|
|
||||||
.who-liked {
|
.who-liked {
|
||||||
margin-left: 20px;
|
margin-left: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
button.like-count {
|
button.like-count {
|
||||||
|
|
Loading…
Reference in New Issue