codeninjasllc/discourse
1
0
Fork 0
mirror of https://github.com/codeninjasllc/discourse.git synced 2024-11-27 17:46:05 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

UX: Show a user's badges as cards

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -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') {

2
app/assets/javascripts/discourse/templates/badges/index.hbs
View file

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

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

@ -1,11 +1,10 @@
{{#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}}
{{#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'>
{{/if}}
<div class='badge-contents'>
<div class='badge-icon {{badge.badgeTypeClassName}}'>
{{icon-or-image badge.icon}}
</div>
@ -15,5 +14,4 @@
<div class='badge-summary'>{{{summary}}}</div>
</div>
</div>
</div>
{{/link-to}}
</div>

6
app/assets/javascripts/discourse/templates/user/badges.hbs
View file

@ -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>

39
app/assets/stylesheets/common/base/user-badges.scss
View file

@ -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%));