UX: improved user summary page
This commit is contained in:
@@ -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}}
|
||||
·
|
||||
<span class='like-count'>{{number reply.like_count}} {{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}}
|
||||
·
|
||||
<span class='like-count'>{{number topic.like_count}} {{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}}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user