From d723195838d0c24585b7b2f28075b3a94a20b47f Mon Sep 17 00:00:00 2001 From: evazion Date: Sun, 6 Oct 2019 18:05:13 -0500 Subject: [PATCH] post tooltips: remove gap beneath thumbnail on post #xxx tooltips. Set the thumbnail height to auto instead of 154px so that there's not a big empty gap beneath thumbnails that aren't 150px high. This requires setting dimensions on the tag itself so that the image height is known before loading, otherwise the tooltip will be mispositioned after the image loads in. We set the min-width and min-height instead of the width and height properties because our calculated dimensions are sometimes off-by-one compared to the actual dimensions. I'm not sure how libvips calculates the thumbnail dimensions, but this avoids forcing a slightly wrong aspect ratio, which produces ugly resizing artifacts. --- app/javascript/src/styles/specific/post_tooltips.scss | 1 + app/presenters/post_presenter.rb | 4 ++++ app/views/posts/partials/index/_preview.html.erb | 2 +- 3 files changed, 6 insertions(+), 1 deletion(-) diff --git a/app/javascript/src/styles/specific/post_tooltips.scss b/app/javascript/src/styles/specific/post_tooltips.scss index 2cf1f7681..9d94d1da2 100644 --- a/app/javascript/src/styles/specific/post_tooltips.scss +++ b/app/javascript/src/styles/specific/post_tooltips.scss @@ -74,6 +74,7 @@ $tooltip-width: 164px * 3 - 10; // 3 thumbnails wide. article.post-preview { margin: 0 8px 0 0; + height: auto; } } diff --git a/app/presenters/post_presenter.rb b/app/presenters/post_presenter.rb index cdac88196..8a5c26fec 100644 --- a/app/presenters/post_presenter.rb +++ b/app/presenters/post_presenter.rb @@ -63,6 +63,10 @@ class PostPresenter < Presenter locals[:width] = post.image_width locals[:height] = post.image_height + downscale_ratio = Danbooru.config.small_image_width.to_f / [post.image_width, post.image_height].max + locals[:preview_width] = [(downscale_ratio * post.image_width).floor, post.image_width].min + locals[:preview_height] = [(downscale_ratio * post.image_height).floor, post.image_height].min + if options[:similarity] locals[:similarity] = options[:similarity].round else diff --git a/app/views/posts/partials/index/_preview.html.erb b/app/views/posts/partials/index/_preview.html.erb index 9dda428ff..0dfd621d5 100644 --- a/app/views/posts/partials/index/_preview.html.erb +++ b/app/views/posts/partials/index/_preview.html.erb @@ -3,7 +3,7 @@ <%= content_tag(:picture) do -%> <%= tag.source media: "(max-width: 660px)", srcset: cropped_url -%> <%= tag.source media: "(min-width: 660px)", srcset: preview_url -%> - <%= tag.img class: "has-cropped-#{has_cropped}", src: preview_url, title: tooltip, alt: alt_text -%> + <%= tag.img class: "has-cropped-#{has_cropped}", src: preview_url, style: "min-width: #{preview_width}px; min-height: #{preview_height}px;", title: tooltip, alt: alt_text -%> <% end -%> <% end -%> <% if pool -%>