Tweak badge styling

This commit is contained in:
Sam 2014-04-14 15:58:36 +10:00
parent 0d114d7b17
commit 4a0c63ec7f
2 changed files with 45 additions and 27 deletions

View File

@ -6,6 +6,17 @@
{{#if showName}} {{#if showName}}
<h2><a {{bind-attr href="usernameUrl"}}>{{name}}</a></h2> <h2><a {{bind-attr href="usernameUrl"}}>{{name}}</a></h2>
{{/if}} {{/if}}
{{#if showBadges}}
<div class="badge-section">
{{#each user.featured_user_badges}}
<span class="user-badge badge-type-{{unbound badge.badge_type_id}}"><i class='fa fa-certificate'></i> {{badge.name}}</span>
{{/each}}
{{#if showMoreBadges}}
<span class="btn more-user-badges">{{i18n badges.more_badges count=moreBadgesCount}}</span>
{{/if}}
</div>
{{/if}}
</div> </div>
{{#if user}} {{#if user}}
@ -15,17 +26,6 @@
{{groups-list groups=user.custom_groups}} {{groups-list groups=user.custom_groups}}
</div> </div>
{{#if showBadges}}
<div class="badge-section">
<h3>{{i18n badges.badge_count count=user.badge_count}}</h3>
{{#each user.featured_user_badges}}
<span class="badge">{{badge.name}}</span>
{{/each}}
{{#if showMoreBadges}}
<span class="btn more-badges">{{i18n badges.more_badges count=moreBadgesCount}}</span>
{{/if}}
</div>
{{/if}}
<div class='bottom'> <div class='bottom'>
{{#if user.bio_cooked}}<div class='bio'>{{{user.bio_cooked}}}</div>{{/if}} {{#if user.bio_cooked}}<div class='bio'>{{{user.bio_cooked}}}</div>{{/if}}

View File

@ -91,10 +91,11 @@
} }
h2 { h2 {
line-height: 15px; line-height: 12px;
} }
.badge-section { .badge-section {
margin-top: 20px;
h3 { h3 {
line-height: 43px; line-height: 43px;
color: $primary_text_color; color: $primary_text_color;
@ -102,21 +103,38 @@
margin-bottom: -8px; margin-bottom: -8px;
} }
.badge, .more-badges {
font-size: 12px;
margin: 0;
line-height: 16px;
display: inline-block;
}
.badge {
padding: 3px 8px;
border: 1px solid $secondary-border-color;
}
.more-badges {
padding: 4px 8px;
}
} }
} }
} }
.user-badge, .more-user-badges {
font-size: 12px;
margin: 0;
line-height: 16px;
display: inline-block;
.fa {
padding-right: 5px;
font-size: 16px;
}
}
.user-badge {
padding: 3px 8px;
border: 1px solid $secondary-border-color;
}
.more-user-badges {
padding: 4px 8px;
}
.badge-type-1 .fa-certificate {
color: #A67D3D;
}
.badge-type-2 .fa-certificate {
color: silver;
}
.badge-type-1 .fa-certificate {
color: gold;
}