modqueue: rework post display.

Rework how posts are displayed in the modqueue:

* Rearrange post info to take up less space and to be consistent with
  how posts are shown on the comments index.
* Reduce font size of approve / reject options.
* Reduce empty space around thumbnails and between posts.
* Add size info beneath thumbnails.
* Allow voting on posts.
* Use PostPresenter.preview to standardize rendering of thumbnails. This
  adds parent/child borders, tooltips, and data attributes.
This commit is contained in:
evazion
2020-03-03 02:32:28 -06:00
parent 04b69954eb
commit fc97ea3c8e
2 changed files with 80 additions and 54 deletions

View File

@@ -3,7 +3,6 @@
div#c-modqueue {
div.post {
padding: 1em;
margin-bottom: 4em;
overflow: hidden;
&.post-pos-score {
@@ -15,27 +14,24 @@ div#c-modqueue {
}
aside.column {
text-align: center;
margin-bottom: 1em;
@media (min-width: 660px) {
flex-basis: 220px;
text-align: right;
padding-right: 2em;
padding-right: 1em;
}
}
.quick-mod {
margin-bottom: 0.5em;
@media (min-width: 660px) {
font-size: $h2_size;
font-weight: bold;
section.column {
span.info {
margin-right: 1.5em;
}
}
.mod-queue-post-source {
word-break: break-all;
.quick-mod {
display: inline-block;
margin-bottom: 1em;
}
.post-flags-row {
margin-top: 1em;
}
}
<% Danbooru.config.modqueue_quality_warning_tags.each do |tag| %>
@@ -49,17 +45,5 @@ div#c-modqueue {
background-color: var(--modqueue-sample-warning-color);
}
<% end %>
&[data-tags~=animated], &[data-file-ext=swf], &[data-file-ext=webm], &[data-file-ext=zip], &[data-file-ext=mp4] {
aside:before {
@include animated-icon;
}
}
&[data-has-sound=true] {
aside:before {
@include sound-icon;
}
}
}
}