UX: Show a user's badges as cards

app/assets/javascripts/discourse/components/badge-card.js.es6

@@ -4,6 +4,14 @@ export default Ember.Component.extend({
   size: 'medium',
   classNameBindings: [':badge-card', 'size'],
 
+  @computed('count', 'badge.grant_count')
+  displayCount(count, grantCount) {
+    const c = parseInt(count || grantCount || 0);
+    if (count > 1) {
+      return count;
+    }
+  },
+
   @computed('size')
   summary(size) {
     if (size === 'large') {

app/assets/javascripts/discourse/templates/badges/index.hbs

@@ -9,7 +9,9 @@
         </div>
 
         {{#each bg.badges as |b|}}
-          {{badge-card badge=b}}
+          {{#link-to 'badges.show' badge.id badge.slug}}
+            {{badge-card badge=b}}
+          {{/link-to}}
         {{/each}}
       </div>
     {{/each}}

app/assets/javascripts/discourse/templates/components/badge-card.hbs

@@ -1,19 +1,17 @@
-{{#link-to 'badges.show' badge}}
-  {{#if badge.grant_count}}
-    <span class='grant-count' title={{i18n 'badges.granted' count=badge.grant_count}}>{{badge.grant_count}}</span>
-  {{/if}}
-  {{#if badge.has_badge}}
-    <span class='check-display status-checked'>{{fa-icon "check"}}</span>
-  {{/if}}
-  <div class='badge-contents'>
-    <div class='badge-icon {{badge.badgeTypeClassName}}'>
-      {{icon-or-image badge.icon}}
-    </div>
-    <div class='badge-info'>
-      <div class='badge-info-item'>
-        <h3>{{badge.displayName}}</h3>
-        <div class='badge-summary'>{{{summary}}}</div>
-      </div>
+{{#if displayCount}}
+  <span class='grant-count' title={{i18n 'badges.granted' count=displayCount}}>{{displayCount}}</span>
+{{/if}}
+{{#if badge.has_badge}}
+  <span class='check-display status-checked'>{{fa-icon "check"}}</span>
+{{/if}}
+<div class='badge-contents'>
+  <div class='badge-icon {{badge.badgeTypeClassName}}'>
+    {{icon-or-image badge.icon}}
+  </div>
+  <div class='badge-info'>
+    <div class='badge-info-item'>
+      <h3>{{badge.displayName}}</h3>
+      <div class='badge-summary'>{{{summary}}}</div>
     </div>
   </div>
-{{/link-to}}
+</div>

app/assets/javascripts/discourse/templates/user/badges.hbs

@@ -1,5 +1,7 @@
 <section class='user-content user-badges-list'>
-  {{#each ub in controller}}
-    {{user-badge badge=ub.badge count=ub.count user=user}}
+  {{#each controller as |ub|}}
+    {{#link-to 'badges.show' ub.badge.id ub.badge.slug (query-params username=user.username_lower)}}
+      {{badge-card badge=ub.badge count=ub.count}}
+    {{/link-to}}
   {{/each}}
 </section>

app/assets/stylesheets/common/base/user-badges.scss

@@ -32,39 +32,6 @@
   }
 }
 
-
-/* User badge listing. */
-.user-badges-list {
-  text-align: center;
-
-  .user-badge {
-    max-width: 80px;
-    text-align: center;
-    vertical-align: top;
-    margin: 10px;
-    border: none;
-
-    .fa {
-      display: block;
-      font-size: 3.571em;
-      margin-bottom: 5px;
-    }
-
-    img {
-      display: block;
-      margin: auto auto 4px;
-      width: 55px;
-      height: 55px;
-    }
-
-    .count {
-      display: block;
-      font-size: 0.8em;
-      color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%));
-    }
-  }
-}
-
 @media all and (max-width: 750px) {
   .show-badge .user-badge-with-posts .badge-user a.post-link {
     width: auto;
@@ -219,17 +186,13 @@
 }
 
 .badge-card.medium {
-  width: 360px;
+  width: 350px;
 }
 
 .badge-card.large {
   width: 750px;
-  a {
-    cursor: default;
-  }
 }
 
-
 .badge-groups {
   margin: 20px 0;
   color: dark-light-choose(scale-color($primary, $lightness: 40%), scale-color($secondary, $lightness: 60%));