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: improve show badge page on mobile

Browse source
This commit is contained in:
Sam Saffron 2015-11-05 20:51:05 +11:00
parent 7e255a151b
commit 6e5bfa62d3
2 changed files with 57 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
app/assets/javascripts/discourse/templates/badges/show.hbs
View file

@ -5,17 +5,16 @@
{{model.displayName}} {{model.displayName}}
</h1> </h1>
<table class='badges-listing'> <div class='badges-listing'>
<tbody> <div class='row'>
<tr> <div class='badge'>{{user-badge badge=model}}</div>
<td class='badge'>{{user-badge badge=model}}</td> <div class='description'>{{{model.displayDescriptionHtml}}}</div>
<td class='description'>{{{model.displayDescriptionHtml}}}</td> <div class='grant-count'>{{i18n 'badges.granted' count=model.grant_count}}</div>
<td class='grant-count'>{{i18n 'badges.granted' count=model.grant_count}}</td> <div class='info'>{{i18n 'badges.allow_title'}} {{{view.allowTitle}}}<br>{{i18n 'badges.multiple_grant'}} {{{view.multipleGrant}}}
<td class='info'>{{i18n 'badges.allow_title'}} {{{view.allowTitle}}}<br>{{i18n 'badges.multiple_grant'}} {{{view.multipleGrant}}} </div>
</td> </div>
</tr> </div>
</tbody>
</table>
{{#if showLongDescription}} {{#if showLongDescription}}
<div class='long-description banner'> <div class='long-description banner'>

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

@ -65,57 +65,73 @@
} }
/* Badge listing in /badges. */ /* Badge listing in /badges. */
table.badges-listing { .badges-listing {
margin: 20px 0; margin: 20px 0;
border-bottom: 1px solid dark-light-diff($primary, $secondary, 90%, -60%); border-bottom: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
width: 90%; width: 90%;
padding: 10px;
display: table;
.row {
display: table-row;
> div {
display: table-cell;
vertical-align: middle;
}
}
.user-badge { .user-badge {
font-size: $base-font-size; font-size: $base-font-size;
} }
tr.title td { .grant-count {
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 {
text-align: center; text-align: center;
color: dark-light-choose(scale-color($primary, $lightness: 40%), scale-color($secondary, $lightness: 60%)); color: dark-light-choose(scale-color($primary, $lightness: 40%), scale-color($secondary, $lightness: 60%));
font-size: 120%; font-size: 120%;
} }
td.badge, td.grant-count { .badge, .grant-count {
white-space: nowrap; white-space: nowrap;
padding-right: 10px;
} }
td.info { .info {
font-size: 0.9em; font-size: 0.9em;
text-align: right; 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. */ /* /badges/:id/:slug page styling. */
.show-badge { .show-badge {
.badge-user { .badge-user {
@ -124,6 +140,7 @@ table.badges-listing {
padding: 5px 10px; padding: 5px 10px;
margin-bottom: 10px; margin-bottom: 10px;
display: inline-block; display: inline-block;
vertical-align: top;
.details { .details {
margin: 0 10px; margin: 0 10px;
@ -131,6 +148,10 @@ table.badges-listing {
color: $primary; color: $primary;
} }
.username {
word-wrap: break-word;
}
.date { .date {
display: block; display: block;
color: lighten($primary, 40%); color: lighten($primary, 40%);