diff --git a/app/assets/javascripts/discourse/templates/badges/show.hbs b/app/assets/javascripts/discourse/templates/badges/show.hbs
index 42a13208c..4b245ee2f 100644
--- a/app/assets/javascripts/discourse/templates/badges/show.hbs
+++ b/app/assets/javascripts/discourse/templates/badges/show.hbs
@@ -5,17 +5,16 @@
{{model.displayName}}
-
-
-
- {{user-badge badge=model}} |
- {{{model.displayDescriptionHtml}}} |
- {{i18n 'badges.granted' count=model.grant_count}} |
- {{i18n 'badges.allow_title'}} {{{view.allowTitle}}} {{i18n 'badges.multiple_grant'}} {{{view.multipleGrant}}}
- |
-
-
-
+
+
+
{{user-badge badge=model}}
+
{{{model.displayDescriptionHtml}}}
+
{{i18n 'badges.granted' count=model.grant_count}}
+
{{i18n 'badges.allow_title'}} {{{view.allowTitle}}}
{{i18n 'badges.multiple_grant'}} {{{view.multipleGrant}}}
+
+
+
+
{{#if showLongDescription}}
diff --git a/app/assets/stylesheets/common/base/user-badges.scss b/app/assets/stylesheets/common/base/user-badges.scss
index 9f812fa89..01f25c4d7 100644
--- a/app/assets/stylesheets/common/base/user-badges.scss
+++ b/app/assets/stylesheets/common/base/user-badges.scss
@@ -65,57 +65,73 @@
}
/* Badge listing in /badges. */
-table.badges-listing {
+.badges-listing {
margin: 20px 0;
border-bottom: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
+ border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
width: 90%;
+ padding: 10px;
+ display: table;
+
+ .row {
+ display: table-row;
+ > div {
+ display: table-cell;
+ vertical-align: middle;
+ }
+ }
.user-badge {
font-size: $base-font-size;
}
- tr.title td {
- padding-top: 30px;
- padding-bottom: 15px;
- }
-
- tr.title {
- border-top: 0px solid;
- }
-
- td {
- padding: 10px 0px;
- }
-
- td.granted{
- color: $success;
- font-size: 120%;
- }
-
- td.grant-count {
+ .grant-count {
text-align: center;
color: dark-light-choose(scale-color($primary, $lightness: 40%), scale-color($secondary, $lightness: 60%));
font-size: 120%;
}
- td.badge, td.grant-count {
+ .badge, .grant-count {
white-space: nowrap;
- padding-right: 10px;
}
- td.info {
+ .info {
font-size: 0.9em;
text-align: right;
}
- td.description {
+ .description {
}
- tr {
- border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
+}
+
+@media all and (max-width: 750px) {
+ .show-badge .user-badge-with-posts .badge-user a.post-link {
+ width: auto;
+ }
+ .show-badge div.badge-user {
+ padding: 0;
+ }
+ .badges-listing {
+ display: block;
+
+ .info, .grant-count {
+ text-align: left;
+ }
+
+ .row > div.info { display: none; }
+
+ .row {
+ display: block;
+ > div {
+ display: block;
+ margin-top: 10px;
+ }
+ }
}
}
+
/* /badges/:id/:slug page styling. */
.show-badge {
.badge-user {
@@ -124,6 +140,7 @@ table.badges-listing {
padding: 5px 10px;
margin-bottom: 10px;
display: inline-block;
+ vertical-align: top;
.details {
margin: 0 10px;
@@ -131,6 +148,10 @@ table.badges-listing {
color: $primary;
}
+ .username {
+ word-wrap: break-word;
+ }
+
.date {
display: block;
color: lighten($primary, 40%);