diff --git a/app/assets/javascripts/discourse/templates/poster_expansion.handlebars b/app/assets/javascripts/discourse/templates/poster_expansion.handlebars
index 12957c1e43a..1e9f3e99ed7 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}}
{{/if}}
+
+ {{#if showBadges}}
+
+ {{#each user.featured_user_badges}}
+ {{badge.name}}
+ {{/each}}
+ {{#if showMoreBadges}}
+ {{i18n badges.more_badges count=moreBadgesCount}}
+ {{/if}}
+
+ {{/if}}
{{#if user}}
@@ -15,17 +26,6 @@
{{groups-list groups=user.custom_groups}}
- {{#if showBadges}}
-
-
{{i18n badges.badge_count count=user.badge_count}}
- {{#each user.featured_user_badges}}
- {{badge.name}}
- {{/each}}
- {{#if showMoreBadges}}
- {{i18n badges.more_badges count=moreBadgesCount}}
- {{/if}}
-
- {{/if}}
{{#if user.bio_cooked}}
{{{user.bio_cooked}}}
{{/if}}
diff --git a/app/assets/stylesheets/desktop/poster_expansion.scss b/app/assets/stylesheets/desktop/poster_expansion.scss
index bbd1fb9e20d..8a90a8694c4 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;
+}