codeninjasllc/discourse
1
0
Fork 0
mirror of https://github.com/codeninjasllc/discourse.git synced 2024-11-23 23:58:31 -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}}
</h1>
<table class='badges-listing'>
<tbody>
<tr>
<td class='badge'>{{user-badge badge=model}}</td>
<td class='description'>{{{model.displayDescriptionHtml}}}</td>
<td class='grant-count'>{{i18n 'badges.granted' count=model.grant_count}}</td>
<td class='info'>{{i18n 'badges.allow_title'}} {{{view.allowTitle}}}<br>{{i18n 'badges.multiple_grant'}} {{{view.multipleGrant}}}
</td>
</tr>
</tbody>
</table>
<div class='badges-listing'>
<div class='row'>
<div class='badge'>{{user-badge badge=model}}</div>
<div class='description'>{{{model.displayDescriptionHtml}}}</div>
<div class='grant-count'>{{i18n 'badges.granted' count=model.grant_count}}</div>
<div class='info'>{{i18n 'badges.allow_title'}} {{{view.allowTitle}}}<br>{{i18n 'badges.multiple_grant'}} {{{view.multipleGrant}}}
</div>
</div>
</div>
{{#if showLongDescription}}
<div class='long-description banner'>

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

@ -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%);