UX: Show a user's badges as cards

This commit is contained in:
Robin Ward
2016-03-25 16:10:21 -04:00
parent 64feffbb60
commit 83b79a4e1e
5 changed files with 31 additions and 58 deletions
@@ -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') {
@@ -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}}
@@ -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>
@@ -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>