UX: improved user summary page

This commit is contained in:
Régis Hanol
2016-03-30 18:05:16 +02:00
parent b55d3b240b
commit bf579174c1
9 changed files with 219 additions and 131 deletions
@@ -1,13 +1,20 @@
import computed from 'ember-addons/ember-computed-decorators';
// should be kept in sync with 'UserSummary::MAX_TOPICS'
const MAX_TOPICS = 6;
// should be kept in sync with 'UserSummary::MAX_BADGES'
const MAX_BADGES = 6;
export default Ember.Controller.extend({
needs: ['user'],
user: Em.computed.alias('controllers.user.model'),
moreTopics: function(){
return this.get('model.topics').length > 5;
}.property('model'),
moreReplies: function(){
return this.get('model.replies').length > 5;
}.property('model'),
moreBadges: function(){
return this.get('model.badges').length > 5;
}.property('model')
user: Ember.computed.alias('controllers.user.model'),
@computed("model.topics.length")
moreTopics(topicsLength) { return topicsLength >= MAX_TOPICS; },
@computed("model.replies.length")
moreReplies(repliesLength) { return repliesLength >= MAX_TOPICS; },
@computed("model.badges.length")
moreBadges(badgesLength) { return badgesLength >= MAX_BADGES; },
});
@@ -2,4 +2,4 @@
{{#if icon}}{{fa-icon icon}}{{/if}}
{{number value}}
</span>
<span class='label'>{{i18n label}}</span>
<span class='label'>{{{i18n label count=value}}}</span>
@@ -1,62 +1,84 @@
{{#if model.replies.length}}
<div class='top-section'>
<h3>{{i18n "user.summary.top_replies"}}</h3>
{{#each reply in model.replies}}
<ul>
<li>
<a href="{{reply.url}}">{{reply.topic.title}}</a> {{#if reply.like_count}}<span class='like-count'>{{reply.like_count}}<i class='fa fa-heart'></i></span>{{/if}} {{format-date reply.createdAt format="tiny" noTitle="true"}}
</li>
</ul>
{{/each}}
{{#if moreReplies}}
{{#link-to "userActivity.replies" user class="more"}}{{i18n "user.summary.more_replies"}}{{/link-to}}
{{/if}}
</div>
{{/if}}
{{#if model.topics.length}}
<div class='top-section'>
<h3>{{i18n "user.summary.top_topics"}}</h3>
{{#each topic in model.topics}}
<ul>
<li>
<a href="{{topic.url}}">{{topic.title}}</a> {{#if topic.like_count}}<span class='like-count'>{{topic.like_count}}<i class='fa fa-heart'></i></span>{{/if}} {{format-date topic.createdAt format="tiny" noTitle="true"}}
</li>
</ul>
{{/each}}
{{#if moreTopics}}
{{#link-to "userActivity.topics" user class="more"}}{{i18n "user.summary.more_topics"}}{{/link-to}}
{{/if}}
</div>
{{/if}}
<div class='top-section stats-section'>
<h3>{{i18n "user.summary.stats"}}</h3>
<dl>
<dt>{{i18n "user.summary.topic_count"}}</dt>
<dd>{{model.topic_count}}</dd>
<dt>{{i18n "user.summary.post_count"}}</dt>
<dd>{{model.post_count}}</dd>
<dt>{{i18n "user.summary.likes_given"}}</dt>
<dd>{{model.likes_given}}</dd>
<dt>{{i18n "user.summary.likes_received"}}</dt>
<dd>{{model.likes_received}}</dd>
<dt>{{i18n "user.summary.days_visited"}}</dt>
<dd>{{model.days_visited}}</dd>
<dt>{{i18n "user.summary.posts_read_count"}}</dt>
<dd>{{model.posts_read_count}}</dd>
</dl>
<h3 class='stats-title'>{{i18n "user.summary.stats"}}</h3>
<ul>
<li>
<span class='value'>{{model.time_read}}</span>
<span class='label'>{{{i18n "user.summary.time_read"}}}</span>
</li>
<li>{{user-stat value=model.topic_count label="user.summary.topic_count"}}</li>
<li>{{user-stat value=model.post_count label="user.summary.post_count"}}</li>
<li>{{user-stat value=model.likes_received label="user.summary.likes_received"}}</li>
<li>{{user-stat value=model.likes_given label="user.summary.likes_given"}}</li>
<li>{{user-stat value=model.days_visited label="user.summary.days_visited"}}</li>
<li>{{user-stat value=model.posts_read_count label="user.summary.posts_read"}}</li>
</ul>
</div>
<div class='top-section'>
<div class='replies-section'>
<h3 class='stats-title'>{{i18n "user.summary.top_replies"}}</h3>
{{#if model.replies.length}}
<ul>
{{#each reply in model.replies}}
<li>
<span class='topic-info'>
{{format-date reply.createdAt format="tiny" noTitle="true"}}
{{#if reply.like_count}}
&middot;
<span class='like-count'>{{number reply.like_count}}&nbsp;{{fa-icon 'heart'}}</span>
{{/if}}
</span>
<br>
<span>
<a href="{{reply.url}}">{{{reply.topic.fancyTitle}}}</a>
</span>
</li>
{{/each}}
</ul>
{{#if moreReplies}}
<p>{{#link-to "userActivity.replies" user class="more"}}{{i18n "user.summary.more_replies"}}{{/link-to}}</p>
{{/if}}
{{else}}
<p>{{i18n "user.summary.no_replies"}}</p>
{{/if}}
</div>
<div class='topics-section'>
<h3 class='stats-title'>{{i18n "user.summary.top_topics"}}</h3>
{{#if model.topics.length}}
<ul>
{{#each topic in model.topics}}
<li>
<span class='topic-info'>
{{format-date topic.createdAt format="tiny" noTitle="true"}}
{{#if topic.like_count}}
&middot;
<span class='like-count'>{{number topic.like_count}}&nbsp;{{fa-icon 'heart'}}</span>
{{/if}}
</span>
<br>
<span>
<a href="{{topic.url}}">{{{topic.fancyTitle}}}</a>
</span>
</li>
{{/each}}
</ul>
{{#if moreTopics}}
<p>{{#link-to "userActivity.topics" user class="more"}}{{i18n "user.summary.more_topics"}}{{/link-to}}</p>
{{/if}}
{{else}}
<p>{{i18n "user.summary.no_topics"}}</p>
{{/if}}
</div>
</div>
{{#if model.badges.length}}
<div class='top-section badges-section'>
<h3>{{i18n "user.summary.top_badges"}}</h3>
{{#each badge in model.badges}}
{{user-badge badge=badge count=badge.count user=user}}
{{/each}}
{{#if moreBadges}}
{{#link-to "user.badges" user class="more"}}{{i18n "user.summary.more_badges"}}{{/link-to}}
{{/if}}
<h3 class='stats-title'>{{i18n "user.summary.top_badges"}}</h3>
{{#each badge in model.badges}}
{{badge-card badge=badge count=badge.count navigateOnClick="true" username=user.username_lower}}
{{else}}
<p>{{i18n "user.summary.no_badges"}}</p>
{{/each}}
{{#if moreBadges}}
<p>{{#link-to "user.badges" user class="more"}}{{i18n "user.summary.more_badges"}}{{/link-to}}</p>
{{/if}}
</div>
{{/if}}