posts: fix thumbnails on comment and modqueue pages.

Fix thumbnails being fit-to-width instead of a fixed size on the
/comments and /modqueue pages, which caused the columns to be misaligned.
This commit is contained in:
evazion
2021-12-05 16:39:24 -06:00
parent 9cb70fa632
commit 396062869a
4 changed files with 18 additions and 10 deletions

View File

@@ -7,7 +7,7 @@ class PostPreviewComponent < ApplicationComponent
with_collection_parameter :post
attr_reader :post, :tags, :size, :show_deleted, :link_target, :pool, :similarity, :recommended, :show_votes, :compact, :show_size, :current_user, :options
attr_reader :post, :tags, :size, :show_deleted, :link_target, :pool, :similarity, :recommended, :show_votes, :fit, :show_size, :current_user, :options
delegate :external_link_to, :time_ago_in_words_tagged, :duration_to_hhmmss, :render_post_votes, :empty_heart_icon, :sound_icon, to: :helpers
delegate :image_width, :image_height, :file_ext, :file_size, :duration, :is_animated?, to: :media_asset
@@ -23,7 +23,10 @@ class PostPreviewComponent < ApplicationComponent
# @param show_size [Boolean] If true, show filesize and resolution beneath the thumbnail.
# @param link_target [ApplicationRecord] What the thumbnail links to (default: the post).
# @param current_user [User] The current user.
def initialize(post:, tags: "", size: DEFAULT_SIZE, show_deleted: false, show_votes: false, link_target: post, pool: nil, similarity: nil, recommended: nil, compact: nil, show_size: nil, current_user: CurrentUser.user, **options)
# @param fit [Symbol] If `:fixed`, make the thumbnail container a fixed size
# (e.g. 180x180), even if the thumbnail image is smaller than that. If `:compact`,
# make the thumbnail container shrink to the same size as the thumbnail image.
def initialize(post:, tags: "", size: DEFAULT_SIZE, show_deleted: false, show_votes: false, link_target: post, pool: nil, similarity: nil, recommended: nil, show_size: nil, fit: :compact, current_user: CurrentUser.user, **options)
super
@post = post
@tags = tags.presence
@@ -34,7 +37,7 @@ class PostPreviewComponent < ApplicationComponent
@pool = pool
@similarity = similarity.round(1) if similarity.present?
@recommended = recommended
@compact = compact
@fit = fit
@show_size = show_size
@current_user = current_user
@options = options
@@ -77,7 +80,7 @@ class PostPreviewComponent < ApplicationComponent
klass << "post-status-deleted" if post.is_deleted?
klass << "post-status-has-parent" if post.parent_id
klass << "post-status-has-children" if post.has_visible_children?
klass << "post-preview-compact" if compact
klass << "post-preview-fit-#{fit}"
klass << "post-preview-#{size}"
klass
end

View File

@@ -22,9 +22,14 @@ article.post-preview {
vertical-align: text-top;
}
&.post-preview-compact {
width: auto;
height: auto;
&.post-preview-fit-fixed {
&.post-preview-150 { min-width: 150px; min-height: 150px; }
&.post-preview-180 { min-width: 180px; min-height: 180px; }
&.post-preview-225 { min-width: 225px; min-height: 225px; }
&.post-preview-225w { min-width: 225px; min-height: 360px; }
&.post-preview-270 { min-width: 270px; min-height: 270px; }
&.post-preview-270w { min-width: 270px; min-height: 360px; }
&.post-preview-360 { min-width: 360px; min-height: 360px; }
}
.desc {

View File

@@ -1,6 +1,6 @@
module ComponentsHelper
def post_preview(post, **options)
render PostPreviewComponent.new(post: post, **options)
def post_preview(post, fit: :fixed, **options)
render PostPreviewComponent.new(post: post, fit: fit, **options)
end
# Render a set of posts as thumbnail gallery.

View File

@@ -1,6 +1,6 @@
<% if @post.valid? %>
var $post = $("#post_<%= @post.id %>");
var $new_post = $("<%= j post_preview(@post, show_deleted: true, show_votes: params[:view] == "score", size: params[:size]) %>");
var $new_post = $("<%= j post_preview(@post, fit: :compact, show_deleted: true, show_votes: params[:view] == "score", size: params[:size]) %>");
Danbooru.Blacklist.apply_post($new_post.get(0));
$("#post_<%= @post.id %>").replaceWith($new_post);
<% if params[:mode] == "quick-edit" %>