From 396062869a9fcd01fa0b79c2e996ce71aab69873 Mon Sep 17 00:00:00 2001 From: evazion Date: Sun, 5 Dec 2021 16:39:24 -0600 Subject: [PATCH] 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. --- app/components/post_preview_component.rb | 11 +++++++---- .../post_preview_component.scss | 11 ++++++++--- app/helpers/components_helper.rb | 4 ++-- app/views/posts/update.js.erb | 2 +- 4 files changed, 18 insertions(+), 10 deletions(-) diff --git a/app/components/post_preview_component.rb b/app/components/post_preview_component.rb index 8414f8c61..ccd63ac1a 100644 --- a/app/components/post_preview_component.rb +++ b/app/components/post_preview_component.rb @@ -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 diff --git a/app/components/post_preview_component/post_preview_component.scss b/app/components/post_preview_component/post_preview_component.scss index 2ade41e76..5fc7dc8fb 100644 --- a/app/components/post_preview_component/post_preview_component.scss +++ b/app/components/post_preview_component/post_preview_component.scss @@ -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 { diff --git a/app/helpers/components_helper.rb b/app/helpers/components_helper.rb index da05c3bdc..c2ca4811f 100644 --- a/app/helpers/components_helper.rb +++ b/app/helpers/components_helper.rb @@ -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. diff --git a/app/views/posts/update.js.erb b/app/views/posts/update.js.erb index 4690c2d30..54e95ac08 100644 --- a/app/views/posts/update.js.erb +++ b/app/views/posts/update.js.erb @@ -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" %>