codeninjasllc/discourse
1
0
Fork 0
mirror of https://github.com/codeninjasllc/discourse.git synced 2024-11-23 23:58:31 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

UX: improve styling of closed messages

Browse source 
also cleans up styling of time gaps on mobile
This commit is contained in:
Sam 2015-07-30 11:19:30 +10:00
parent 3ccae5ed32
commit ccc07605a7
4 changed files with 37 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
app/assets/javascripts/discourse/components/small-action.js.es6
View file

@ -22,8 +22,16 @@ export default Ember.Component.extend({
if (actionCode) { if (actionCode) {
const dt = new Date(this.get('post.created_at')); const dt = new Date(this.get('post.created_at'));
const when = Discourse.Formatter.relativeAge(dt, {format: 'medium-with-ago'}); const when = Discourse.Formatter.relativeAge(dt, {format: 'medium-with-ago'});
const result = I18n.t(`action_codes.${actionCode}`, {when}); var result = I18n.t(`action_codes.${actionCode}`, {when});
return result + (this.get('post.cooked') || ''); var cooked = this.get('post.cooked');
result = "<p>" + result + "</p>";
if (!Em.isEmpty(cooked)) {
result += "<div class='custom-message'>" + cooked + "</div>";
}
return result;
} }
}.property('actionCode', 'post.created_at', 'post.cooked'), }.property('actionCode', 'post.created_at', 'post.cooked'),

2
app/assets/javascripts/discourse/templates/components/small-action.hbs
View file

@ -11,5 +11,5 @@
{{avatar post imageSize="small"}} {{avatar post imageSize="small"}}
</a> </a>
{{/if}} {{/if}}
<p>{{{description}}}</p> {{{description}}}
</div> </div>

14
app/assets/stylesheets/common/base/topic-post.scss
View file

@ -279,14 +279,24 @@ table.md-table {
text-transform: uppercase; text-transform: uppercase;
font-weight: bold; font-weight: bold;
font-size: 0.9em; font-size: 0.9em;
color: lighten($primary, 60%); color: lighten($primary, 50%);
.custom-message {
text-transform: none;
margin: 15px 0px 5px;
font-weight: normal;
font-size: 14px;
p {
margin: 5px 0;
}
}
.avatar { .avatar {
margin-right: 0.8em; margin-right: 0.8em;
float: left; float: left;
} }
p { > p {
margin: 0; margin: 0;
padding-top: 4px; padding-top: 4px;
} }

14
app/assets/stylesheets/mobile/topic-post.scss
View file

@ -512,3 +512,17 @@ span.highlighted {
.read-state { .read-state {
display: none; display: none;
} }
.small-action .small-action-desc {
.custom-message {
margin-left: -40px;
}
}
.small-action .topic-avatar {
padding: 0;
}
.small-action.time-gap .topic-avatar {
margin-top: -5px;
}