UX: new topics list for mobile

This commit is contained in:
Régis Hanol 2015-10-23 10:19:28 +02:00
parent fac25763ba
commit 9483940244
3 changed files with 38 additions and 21 deletions

View file

@ -8,6 +8,8 @@ const Topic = RestModel.extend({
message: null, message: null,
errorLoading: false, errorLoading: false,
creator: Ember.computed.alias("posters.firstObject.user"),
@computed('fancy_title') @computed('fancy_title')
fancyTitle(title) { fancyTitle(title) {
title = title || ""; title = title || "";

View file

@ -1,28 +1,35 @@
<td> <td>
<div class='main-link'> <div class='creator pull-left'>
{{raw "topic-status" topic=content}} <a href="{{content.lastPostUrl}}">{{avatar topic.creator imageSize="large"}}</a>
{{topic-link content}} </div>
{{raw "list/topic-excerpt" topic=content}}
</div>
<div class='pull-right'>
{{raw "list/post-count-or-badges" topic=content postBadgesEnabled=controller.showTopicPostBadges}}
</div>
<div class="clearfix"></div>
<div class="topic-item-stats clearfix"> <div class='right'>
{{#unless controller.hideCategory}} <div class='main-link'>
<div class='category'> {{raw "topic-status" topic=content}}
{{category-link content.category}} {{topic-link content}}
{{raw "list/topic-excerpt" topic=content}}
</div> </div>
{{/unless}}
{{plugin-outlet "topic-list-tags"}}
<div class="pull-right"> <div class='pull-right'>
<div class='num activity last'> {{raw "list/post-count-or-badges" topic=content postBadgesEnabled=controller.showTopicPostBadges}}
{{raw "list/activity-column" topic=content tagName="span" class="age"}} </div>
<a href="{{content.lastPostUrl}}" title='{{i18n 'last_post'}}: {{{raw-date content.bumped_at}}}'>{{content.last_poster_username}}</a>
<div class="topic-item-stats clearfix">
{{#unless controller.hideCategory}}
<div class='category'>
{{category-link content.category}}
</div>
{{/unless}}
{{plugin-outlet "topic-list-tags"}}
<div class="pull-right">
<div class='num activity last'>
<span class="age activity" title="{{content.bumpedAtTitle}}"><a href="{{content.lastPostUrl}}">{{format-date content.bumpedAt format="tiny" noTitle="true"}}</a></span>
</div>
</div>
<div class="clearfix"></div>
</div> </div>
</div> </div>
<div class="clearfix"></div>
</div>
</td> </td>

View file

@ -63,6 +63,14 @@
.topic-list { .topic-list {
.creator {
margin-left: 5px;
}
.right {
margin-left: 60px;
}
> tbody > tr { > tbody > tr {
&.highlighted { &.highlighted {
background-color: dark-light-choose(scale-color($tertiary, $lightness: 85%), scale-color($tertiary, $lightness: -55%)); background-color: dark-light-choose(scale-color($tertiary, $lightness: 85%), scale-color($tertiary, $lightness: -55%));