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

posts: fix thumbnails on comment and modqueue pages.

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

11
app/components/post_preview_component.rb
View File

@@ -7,7 +7,7 @@ class PostPreviewComponent < ApplicationComponent
with_collection_parameter :post 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 :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 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 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 link_target [ApplicationRecord] What the thumbnail links to (default: the post).
# @param current_user [User] The current user. # @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 super
@post = post @post = post
@tags = tags.presence @tags = tags.presence
@@ -34,7 +37,7 @@ class PostPreviewComponent < ApplicationComponent
@pool = pool @pool = pool
@similarity = similarity.round(1) if similarity.present? @similarity = similarity.round(1) if similarity.present?
@recommended = recommended @recommended = recommended
@compact = compact @fit = fit
@show_size = show_size @show_size = show_size
@current_user = current_user @current_user = current_user
@options = options @options = options
@@ -77,7 +80,7 @@ class PostPreviewComponent < ApplicationComponent
klass << "post-status-deleted" if post.is_deleted? klass << "post-status-deleted" if post.is_deleted?
klass << "post-status-has-parent" if post.parent_id klass << "post-status-has-parent" if post.parent_id
klass << "post-status-has-children" if post.has_visible_children? 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 << "post-preview-#{size}"
klass klass
end end

11
app/components/post_preview_component/post_preview_component.scss
View File

@@ -22,9 +22,14 @@ article.post-preview {
vertical-align: text-top; vertical-align: text-top;
} }
&.post-preview-compact { &.post-preview-fit-fixed {
width: auto; &.post-preview-150 { min-width: 150px; min-height: 150px; }
height: auto; &.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 { .desc {

4
app/helpers/components_helper.rb
View File

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

2
app/views/posts/update.js.erb
View File

@@ -1,6 +1,6 @@
<% if @post.valid? %> <% if @post.valid? %>
var $post = $("#post_<%= @post.id %>"); 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)); Danbooru.Blacklist.apply_post($new_post.get(0));
$("#post_<%= @post.id %>").replaceWith($new_post); $("#post_<%= @post.id %>").replaceWith($new_post);
<% if params[:mode] == "quick-edit" %> <% if params[:mode] == "quick-edit" %>