diff --git a/app/assets/javascripts/discourse/controllers/user-summary.js.es6 b/app/assets/javascripts/discourse/controllers/user-summary.js.es6
index b8c4145215a..b40d027b605 100644
--- a/app/assets/javascripts/discourse/controllers/user-summary.js.es6
+++ b/app/assets/javascripts/discourse/controllers/user-summary.js.es6
@@ -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; },
});
diff --git a/app/assets/javascripts/discourse/templates/components/user-stat.hbs b/app/assets/javascripts/discourse/templates/components/user-stat.hbs
index e2e4561516c..67d28d72763 100644
--- a/app/assets/javascripts/discourse/templates/components/user-stat.hbs
+++ b/app/assets/javascripts/discourse/templates/components/user-stat.hbs
@@ -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>
diff --git a/app/assets/javascripts/discourse/templates/user/summary.hbs b/app/assets/javascripts/discourse/templates/user/summary.hbs
index 9dcea3142d0..e59658a628d 100644
--- a/app/assets/javascripts/discourse/templates/user/summary.hbs
+++ b/app/assets/javascripts/discourse/templates/user/summary.hbs
@@ -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}}
-
diff --git a/app/assets/stylesheets/common/base/user-badges.scss b/app/assets/stylesheets/common/base/user-badges.scss
index 56cfc6b7910..01ff5ab1be5 100644
--- a/app/assets/stylesheets/common/base/user-badges.scss
+++ b/app/assets/stylesheets/common/base/user-badges.scss
@@ -57,6 +57,7 @@
}
}
}
+
.user-info.medium.badge-info {
min-height: 80px;
@@ -194,6 +195,12 @@
vertical-align: top;
}
+@media all and (max-width: 320px) {
+ .badge-card.medium {
+ width: 100%;
+ }
+}
+
.badge-card.large {
width: 750px;
}
diff --git a/app/assets/stylesheets/common/base/user.scss b/app/assets/stylesheets/common/base/user.scss
index 39926e061bd..72f345d7078 100644
--- a/app/assets/stylesheets/common/base/user.scss
+++ b/app/assets/stylesheets/common/base/user.scss
@@ -190,59 +190,82 @@
}
.top-section {
- display: inline-block;
- width: 45%;
- max-width: 500px;
- padding-right: 20px;
- vertical-align: top;
- margin-bottom: 30px;
- .more {
- display: block;
- margin-top: 10px;
- color: dark-light-choose(scale-color($primary, $lightness: 40%), scale-color($secondary, $lightness: 60%));
- }
- h3 {
- margin-bottom: 15px;
- }
- .relative-date {
- color: lighten($primary, 40%);
- font-size: 0.8em;
- margin-left: 5px;
- }
- .like-count {
- margin-left: 5px;
- }
ul {
- list-style-type: none;
- padding: 0;
+ list-style: none;
margin: 0;
- li {
- margin: 0;
- padding: 8px 0;
- .fa-heart {
- margin-left: 3px;
- }
- }
+ }
+}
+
+.top-section,
+.replies-section,
+.topics-section {
+ margin-bottom: 20px;
+}
+
+.stats-title {
+ text-transform: uppercase;
+ margin-bottom: 10px;
+}
+
+.stats-section {
+ ul {
+ margin: 10px 0;
}
- dt,dd {
- float:left;
+ li {
+ display: inline-block;
+ padding: 10px 14px;
+ margin: 0 5px 10px 0;
+ background: dark-light-diff($primary, $secondary, 90%, -65%);
}
- dd {
- min-width: 80px;
- text-align: right;
+
+ li:last-of-type {
+ margin: 0;
}
- dt {
- clear: left;
- min-width: 100px;
- color: dark-light-choose(scale-color($primary, $lightness: 25%), scale-color($secondary, $lightness: 75%));
+
+ .value {
+ font-weight: bold;
+ font-size: 1.2em;
}
}
+.replies-section,
+.topics-section {
+ width: 50%;
+
+ ul {
+ max-width: 95%;
+ }
+
+ li {
+ border-left: dark-light-diff($primary, $secondary, 90%, -65%) solid 2px;
+ padding: 5px 8px;
+ margin: 10px 0;
+ }
+
+ .topic-info {
+ color: dark-light-choose(scale-color($primary, $lightness: 40%), scale-color($secondary, $lightness: 40%));
+ }
+}
+
+.replies-section {
+ float: left;
+}
+
+.topics-section {
+ float: right;
+}
+
+.badges-section {
+ clear: both;
+}
+
@media all
and (max-width : 600px) {
- .top-section {
- width: 90%;
+ .replies-section,
+ .topics-section {
+ float: none;
+ width: 100%;
}
}
diff --git a/app/assets/stylesheets/common/components/buttons.css.scss b/app/assets/stylesheets/common/components/buttons.css.scss
index a0b606291e8..aa6bb489c98 100644
--- a/app/assets/stylesheets/common/components/buttons.css.scss
+++ b/app/assets/stylesheets/common/components/buttons.css.scss
@@ -53,7 +53,7 @@
}
&:hover {
background: dark-light-diff($primary, $secondary, 65%, -75%);
- color: #fff;
+ color: $secondary;
}
&[disabled], &.disabled {
background: dark-light-diff($primary, $secondary, 90%, -60%);
@@ -80,7 +80,7 @@
}
&:active {
@include linear-gradient(scale-color($tertiary, $lightness: -20%), scale-color($tertiary, $lightness: -10%));
- color: #fff;
+ color: $secondary;
}
&[disabled], &.disabled {
background: $tertiary;
diff --git a/app/models/user_summary.rb b/app/models/user_summary.rb
index 4be51a45348..9c9b5605358 100644
--- a/app/models/user_summary.rb
+++ b/app/models/user_summary.rb
@@ -2,7 +2,7 @@
class UserSummary
- MAX_FEATURED_BADGES = 10
+ MAX_BADGES = 6
MAX_TOPICS = 6
alias :read_attribute_for_serialization :send
@@ -18,7 +18,7 @@ class UserSummary
.listable_topics
.visible
.where(user: @user)
- .order('like_count desc, created_at asc')
+ .order('like_count DESC, created_at ASC')
.includes(:user, :category)
.limit(MAX_TOPICS)
end
@@ -26,26 +26,31 @@ class UserSummary
def replies
Post
.secured(@guardian)
- .includes(:user, {topic: :category})
+ .includes(:user, topic: :category)
.references(:topic)
.merge(Topic.listable_topics.visible.secured(@guardian))
.where(user: @user)
.where('post_number > 1')
.where('topics.archetype <> ?', Archetype.private_message)
- .order('posts.like_count desc, posts.created_at asc')
+ .order('posts.like_count DESC, posts.created_at ASC')
.limit(MAX_TOPICS)
end
def badges
- @user.featured_user_badges(MAX_FEATURED_BADGES)
+ @user.featured_user_badges(MAX_BADGES)
end
def user_stat
@user.user_stat
end
- delegate :likes_given, :likes_received, :days_visited,
- :posts_read_count, :topic_count, :post_count,
+ delegate :likes_given,
+ :likes_received,
+ :days_visited,
+ :posts_read_count,
+ :topic_count,
+ :post_count,
+ :time_read,
to: :user_stat
end
diff --git a/app/serializers/user_summary_serializer.rb b/app/serializers/user_summary_serializer.rb
index 1c043d4b6ff..2f65995cc91 100644
--- a/app/serializers/user_summary_serializer.rb
+++ b/app/serializers/user_summary_serializer.rb
@@ -12,11 +12,19 @@ class UserSummarySerializer < ApplicationSerializer
has_many :replies, serializer: ReplySerializer, embed: :object
has_many :badges, serializer: UserBadgeSerializer, embed: :object
- attributes :likes_given, :likes_received, :posts_read_count,
- :days_visited, :topic_count, :post_count
-
+ attributes :likes_given,
+ :likes_received,
+ :posts_read_count,
+ :days_visited,
+ :topic_count,
+ :post_count,
+ :time_read
def include_badges?
SiteSetting.enable_badges
end
+
+ def time_read
+ AgeWords.age_words(object.time_read)
+ end
end
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index 2fd92789a6b..ef82c015035 100644
--- a/config/locales/client.en.yml
+++ b/config/locales/client.en.yml
@@ -734,17 +734,33 @@ en:
summary:
title: "Summary"
stats: "Stats"
- topic_count: "Topics Created"
- post_count: "Posts Created"
- likes_given: "Likes Given"
- likes_received: "Likes Received"
- days_visited: "Days Visited"
- posts_read_count: "Posts Read"
+ time_read: "read time"
+ topic_count:
+ one: "topic created"
+ other: "topics created"
+ post_count:
+ one: "post created"
+ other: "posts created"
+ likes_given:
+ one: "like given"
+ other: "likes given"
+ likes_received:
+ one: "like received"
+ other: "likes received"
+ days_visited:
+ one: "day visited"
+ other: "days visited"
+ posts_read:
+ one: "post read"
+ other: "posts read"
top_replies: "Top Replies"
- top_topics: "Top Topics"
- top_badges: "Top Badges"
- more_topics: "More Topics"
+ no_replies: "No replies yet."
more_replies: "More Replies"
+ top_topics: "Top Topics"
+ no_topics: "No topics yet."
+ more_topics: "More Topics"
+ top_badges: "Top Badges"
+ no_badges: "No badges yet."
more_badges: "More Badges"