jaculabilis/danbooru
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

modqueue: rework post display.

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

40
app/javascript/src/styles/specific/mod_queue.scss.erb
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;
}
}
}
}

94
app/views/modqueue/_post.html.erb
View File

@@ -1,37 +1,79 @@
<%= content_tag(:div, { id: "post-#{post.id}", class: ["post", "mod-queue-preview", "column-container", *PostPresenter.preview_class(post, highlight_score: true)].join(" ") }.merge(PostPresenter.data_attributes(post))) do %>
<aside class="column column-shrink">
<%= link_to(image_tag(post.preview_file_url), post_path(post), :target => "_blank") %>
<%= PostPresenter.preview(post, size: true) %>
</aside>
<section class="column column-expand">
<ul>
<li>
<%= render "modqueue/quick_mod", post: post %>
</li>
<li><strong>Rating</strong>: <%= post.pretty_rating %></li>
<li><strong>Score</strong>: <%= post.score %></li>
<li>
<strong>Size:</strong>
<%= number_to_human_size(post.file_size) %>
<% if post.has_dimensions? %>
(<%= post.image_width %>x<%= post.image_height %>)
<% end %>
</li>
<li><strong>Uploader</strong>: <%= link_to_user(post.uploader) %> <%= time_ago_in_words_tagged(post.created_at) %></li>
<div class="row quick-mod-row">
<%= render "modqueue/quick_mod", post: post %>
<%= render "post_disapprovals/compact_counts", disapprovals: post.disapprovals, post: post %>
</div>
<div class="row">
<span class="info">
<strong>Date</strong>
<%= compact_time(post.created_at) %>
</span>
<span class="info">
<strong>User</strong>
<%= link_to_user(post.uploader) %>
<%= link_to "»", modqueue_index_path(search: { tags: "user:#{post.uploader.name}" }) %>
</span>
<span class="info">
<strong>Rating</strong>
<%= post.pretty_rating %>
</span>
<span class="info">
<strong>Score</strong>
<span>
<span id="score-for-post-<%= post.id %>"><%= post.score %></span>
<% if CurrentUser.is_voter? %>
(vote <%= link_to tag.i(class: "far fa-thumbs-up"), post_post_votes_path(score: "up", post_id: post.id), remote: true, method: :post %>/<%= link_to tag.i(class: "far fa-thumbs-down"), post_post_votes_path(score: "down", post_id: post.id), remote: true, method: :post %>)
<% end %>
</span>
</span>
</div>
<div class="row">
<span class="info">
<strong>Source</strong>
<%= post_source_tag(post) %>
</span>
</div>
<% if post.has_active_pools? %>
<div class="row">
<span class="info">
<strong>Pools</strong>
<%= render "pools/inline_list", pools: post.pools.undeleted %>
</span>
</div>
<% end %>
<div class="row list-of-tags">
<span class="info">
<strong>Tags</strong>
<%= post.presenter.inline_tag_list_html %>
</span>
</div>
<div class="row post-flags-row">
<% if post.is_flagged? %>
<li><strong>Flagged</strong>: <%= render "post_flags/reasons", flags: post.flags %></li>
<span class="info">
<strong>Flagged</strong>
<%= render "post_flags/reasons", flags: post.flags %>
</span>
<% end %>
<% if (post.is_flagged? || post.is_deleted?) && post.appeals.any? %>
<li><strong>Appeals</strong>: <%= render "post_appeals/reasons", appeals: post.appeals %></li>
<span class="info">
<strong>Appeals</strong>
<%= render "post_appeals/reasons", appeals: post.appeals %>
</span>
<% end %>
<li>
<strong>Hidden</strong>: <%= render "post_disapprovals/compact_counts", :disapprovals => post.disapprovals, :post => post %>
</li>
<li class="mod-queue-post-source"><strong>Source</strong>: <%= post_source_tag(post) %></li>
<% if post.has_active_pools? %>
<li><strong>Pools</strong>: <%= render "pools/inline_list", pools: post.pools.undeleted %></li>
<% end %>
<li><strong>Tags</strong>: <%= post.presenter.inline_tag_list_html %></li>
</ul>
</div>
</section>
<% end %>