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

post tooltips: remove gap beneath thumbnail on post #xxx tooltips.

Browse Source 
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 <img> 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 <img> 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.
This commit is contained in:
evazion
2019-10-06 18:05:13 -05:00
parent 8e4e274dae
commit d723195838
3 changed files with 6 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
app/javascript/src/styles/specific/post_tooltips.scss
View File

@@ -74,6 +74,7 @@ $tooltip-width: 164px * 3 - 10; // 3 thumbnails wide.
article.post-preview { article.post-preview {
margin: 0 8px 0 0; margin: 0 8px 0 0;
height: auto;
} }
} }

4
app/presenters/post_presenter.rb
View File

@@ -63,6 +63,10 @@ class PostPresenter < Presenter
locals[:width] = post.image_width locals[:width] = post.image_width
locals[:height] = post.image_height 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] if options[:similarity]
locals[:similarity] = options[:similarity].round locals[:similarity] = options[:similarity].round
else else

2
app/views/posts/partials/index/_preview.html.erb
View File

@@ -3,7 +3,7 @@
<%= content_tag(:picture) do -%> <%= content_tag(:picture) do -%>
<%= tag.source media: "(max-width: 660px)", srcset: cropped_url -%> <%= tag.source media: "(max-width: 660px)", srcset: cropped_url -%>
<%= tag.source media: "(min-width: 660px)", srcset: preview_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 -%>
<% end -%> <% end -%>
<% if pool -%> <% if pool -%>