UX: improved user summary page

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; },
 });

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>

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 class='top-section stats-section'>
+  <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>
-{{/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>
+  <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}}
-

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;
 }

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;
+  ul {
+    list-style: none;
+    margin: 0;
   }
-  .relative-date {
-    color: lighten($primary, 40%);
-    font-size: 0.8em;
-    margin-left: 5px;
+}
+
+.top-section,
+.replies-section,
+.topics-section {
+  margin-bottom: 20px;
+}
+
+.stats-title {
+  text-transform: uppercase;
+  margin-bottom: 10px;
+}
+
+.stats-section {
+  ul {
+    margin: 10px 0;
   }
-  .like-count {
-    margin-left: 5px;
+
+  li {
+    display: inline-block;
+    padding: 10px 14px;
+    margin: 0 5px 10px 0;
+    background: dark-light-diff($primary, $secondary, 90%, -65%);
   }
-  ul {
-    list-style-type: none;
-    padding: 0;
+
+  li:last-of-type {
     margin: 0;
-    li {
-      margin: 0;
-      padding: 8px 0;
-      .fa-heart {
-        margin-left: 3px;
-      }
-    }
   }
 
-  dt,dd {
-    float:left;
+  .value {
+    font-weight: bold;
+    font-size: 1.2em;
   }
-  dd {
-    min-width: 80px;
-    text-align: right;
+}
+
+.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;
   }
-  dt {
-    clear: left;
-    min-width: 100px;
-    color: dark-light-choose(scale-color($primary, $lightness: 25%), scale-color($secondary, $lightness: 75%));
+
+  .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%;
   }
 }
 

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;

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,34 +18,39 @@ def topics
       .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
 
   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