diff --git a/app/assets/javascripts/discourse/templates/poster_expansion.handlebars b/app/assets/javascripts/discourse/templates/poster_expansion.handlebars index 12957c1e4..1e9f3e99e 100644 --- a/app/assets/javascripts/discourse/templates/poster_expansion.handlebars +++ b/app/assets/javascripts/discourse/templates/poster_expansion.handlebars @@ -6,6 +6,17 @@ {{#if showName}} <h2><a {{bind-attr href="usernameUrl"}}>{{name}}</a></h2> {{/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> {{#if user}} @@ -15,17 +26,6 @@ {{groups-list groups=user.custom_groups}} </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'> {{#if user.bio_cooked}}<div class='bio'>{{{user.bio_cooked}}}</div>{{/if}} diff --git a/app/assets/stylesheets/desktop/poster_expansion.scss b/app/assets/stylesheets/desktop/poster_expansion.scss index bbd1fb9e2..8a90a8694 100644 --- a/app/assets/stylesheets/desktop/poster_expansion.scss +++ b/app/assets/stylesheets/desktop/poster_expansion.scss @@ -91,10 +91,11 @@ } h2 { - line-height: 15px; + line-height: 12px; } .badge-section { + margin-top: 20px; h3 { line-height: 43px; color: $primary_text_color; @@ -102,21 +103,38 @@ 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; +}