UX: admin flags needed some ❤️

This commit is contained in:
Régis Hanol
2016-06-22 16:32:50 +02:00
parent 2ecd0da59f
commit fc9cfd698d
2 changed files with 136 additions and 156 deletions

View File

@ -1,5 +1,6 @@
{{#if model.length}} {{#if model.length}}
{{#load-more tagName="table" className="admin-flags" selector="tbody tr" action="loadMore"}} {{#load-more selector="tbody tr" action="loadMore"}}
<table class="admin-flags">
<thead> <thead>
<tr> <tr>
<th class='user'></th> <th class='user'></th>
@ -15,7 +16,7 @@
<td class='user'> <td class='user'>
{{#if flaggedPost.postAuthorFlagged}} {{#if flaggedPost.postAuthorFlagged}}
{{#if flaggedPost.user}} {{#if flaggedPost.user}}
{{#link-to 'adminUser' flaggedPost.user}}{{avatar flaggedPost.user imageSize="small"}}{{/link-to}} {{#link-to 'adminUser' flaggedPost.user}}{{avatar flaggedPost.user imageSize="large"}}{{/link-to}}
{{#if flaggedPost.wasEdited}}<i class="fa fa-pencil" title="{{i18n 'admin.flags.was_edited'}}"></i>{{/if}} {{#if flaggedPost.wasEdited}}<i class="fa fa-pencil" title="{{i18n 'admin.flags.was_edited'}}"></i>{{/if}}
{{/if}} {{/if}}
{{/if}} {{/if}}
@ -35,7 +36,7 @@
<a href='{{unbound flaggedPost.url}}'>{{{unbound flaggedPost.topic.fancyTitle}}}</a> <a href='{{unbound flaggedPost.url}}'>{{{unbound flaggedPost.topic.fancyTitle}}}</a>
</h3> </h3>
{{#if flaggedPost.postAuthorFlagged}} {{#if flaggedPost.postAuthorFlagged}}
{{{flaggedPost.excerpt}}} <p>{{{flaggedPost.excerpt}}}</p>
{{/if}} {{/if}}
</td> </td>
@ -46,7 +47,7 @@
<tr> <tr>
<td class='avatar'> <td class='avatar'>
{{#link-to 'adminUser' flagger.user}} {{#link-to 'adminUser' flagger.user}}
{{avatar flagger.user imageSize="small"}} {{avatar flagger.user imageSize="medium"}}
{{/link-to}} {{/link-to}}
</td> </td>
<td> <td>
@ -71,7 +72,7 @@
<tr> <tr>
<td class='avatar'> <td class='avatar'>
{{#link-to 'adminUser' flagger.disposedBy}} {{#link-to 'adminUser' flagger.disposedBy}}
{{avatar flagger.disposedBy imageSize="small"}} {{avatar flagger.disposedBy imageSize="medium"}}
{{/link-to}} {{/link-to}}
</td> </td>
<td> <td>
@ -108,11 +109,11 @@
<div> <div>
{{#if c.response}} {{#if c.response}}
<p> <p>
{{#link-to 'adminUser' c.response.user}}{{avatar c.response.user imageSize="small"}}{{/link-to}}&nbsp;{{{c.response.excerpt}}} {{#link-to 'adminUser' c.response.user}}{{avatar c.response.user imageSize="medium"}}{{/link-to}}&nbsp;{{{c.response.excerpt}}}
</p> </p>
{{#if c.reply}} {{#if c.reply}}
<p> <p>
{{#link-to 'adminUser' c.reply.user}}{{avatar c.reply.user imageSize="small"}}{{/link-to}}&nbsp;{{{c.reply.excerpt}}} {{#link-to 'adminUser' c.reply.user}}{{avatar c.reply.user imageSize="medium"}}{{/link-to}}&nbsp;{{{c.reply.excerpt}}}
{{#if c.hasMore}} {{#if c.hasMore}}
<a href="{{unbound c.permalink}}">{{i18n 'admin.flags.more'}}</a> <a href="{{unbound c.permalink}}">{{i18n 'admin.flags.more'}}</a>
{{/if}} {{/if}}
@ -127,6 +128,7 @@
</tr> </tr>
{{/each}} {{/each}}
{{#unless adminOldFlagsView}}
<tr> <tr>
<td colspan="4" class="action"> <td colspan="4" class="action">
{{#if adminActiveFlagsView}} {{#if adminActiveFlagsView}}
@ -141,10 +143,12 @@
{{/if}} {{/if}}
</td> </td>
</tr> </tr>
{{/unless}}
{{/each}} {{/each}}
</tbody> </tbody>
</table>
{{/load-more}} {{/load-more}}
{{else}} {{else}}

View File

@ -818,24 +818,21 @@ section.details {
} }
} }
.admin-flags { .admin-flags {
table-layout: fixed; .hidden-post td.excerpt,
.hidden-post td.user {
opacity: 0.5;
}
.deleted td.excerpt,
.deleted td.user {
background-color: scale-color($danger, $lightness: 70%);
}
.hidden-post td.excerpt, .hidden-post td.user { opacity: 0.5; }
.deleted td.excerpt, .deleted td.user { background-color: scale-color($danger, $lightness: 70%); }
.message { background-color: dark-light-diff($highlight, $secondary, 50%, -70%); } .message { background-color: dark-light-diff($highlight, $secondary, 50%, -70%); }
.message:hover { background-color: dark-light-diff($highlight, $secondary, 60%, -60%); } .message:hover { background-color: dark-light-diff($highlight, $secondary, 60%, -60%); }
td { vertical-align: top; }
th { text-align: left; }
.user {
width: 25px;
padding: 8px 0 0 0;
text-align: center;
}
.excerpt { .excerpt {
max-width: 700px;
width: 75%;
padding: 8px; padding: 8px;
word-wrap: break-word; word-wrap: break-word;
.fa { display: inline-block; } .fa { display: inline-block; }
@ -846,34 +843,13 @@ section.details {
margin-bottom: 5px; margin-bottom: 5px;
} }
} }
.flaggers {
font-size: 11px; .flagged-posts { background: $danger; }
padding: 8px 0 0 5px;
.avatar {
width: 25px;
}
table {
max-width: 145px;
}
tr {
height: 44px;
}
td {
vertical-align: middle;
padding: 3px;
line-height: 1.4;
}
}
.action { .action {
button { margin: 4px; } button { margin: 4px; }
text-align: right; text-align: right;
padding-bottom: 20px;
} }
td p {
font-size: 0.929em;
margin: 0 0 5px 0;
}
.flagged-posts { background: $danger; }
} }
/* Dashboard */ /* Dashboard */