From 9eed21ef14ee3b5f5e4be4000a4539f385de1a17 Mon Sep 17 00:00:00 2001 From: evazion Date: Mon, 13 Dec 2021 01:49:37 -0600 Subject: [PATCH] posts: bottom align thumbnails; prevent thumbnail reflow. * Bottom-align thumbnails on desktop. This is so that vote buttons line up beneath thumbnails. Also so that pool titles line up on the pool gallery page. This is desktop only because it tends to leave large gaps above thumbnails on mobile. * Make thumbnails fixed-height so that the layout doesn't shift as thumbnails are loaded. --- .../post_gallery_component.scss | 22 ++++++-- .../post_preview_component.html.erb | 56 ++++++++++--------- .../post_preview_component.scss | 47 ++++++++-------- 3 files changed, 69 insertions(+), 56 deletions(-) diff --git a/app/components/post_gallery_component/post_gallery_component.scss b/app/components/post_gallery_component/post_gallery_component.scss index de93bdcb8..ed2bbd9ce 100644 --- a/app/components/post_gallery_component/post_gallery_component.scss +++ b/app/components/post_gallery_component/post_gallery_component.scss @@ -5,11 +5,8 @@ } article.post-preview { - width: auto; - height: auto; - margin: 0 0 0.5rem 0; + display: inline-block; padding: 0.5rem; - overflow: hidden; vertical-align: top; } } @@ -20,6 +17,19 @@ gap: 0.5rem; } + .post-preview-container { + display: flex; + place-items: end; + } + + @media screen and (min-width: 660px) { + &.post-gallery-150 .post-preview-container { height: 150px; } + &.post-gallery-180 .post-preview-container { height: 180px; } + &.post-gallery-225 .post-preview-container { height: 225px; } + &.post-gallery-270 .post-preview-container { height: 270px; } + &.post-gallery-360 .post-preview-container { height: 360px; } + } + &.post-gallery-150 .posts-container { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } &.post-gallery-180 .posts-container { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); } &.post-gallery-225 .posts-container { grid-template-columns: repeat(auto-fill, minmax(225px, 1fr)); } @@ -29,6 +39,10 @@ &.post-gallery-360 .posts-container { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); } @media screen and (max-width: 660px) { + .posts-container { + gap: 0.25rem; + } + &.post-gallery-150 .posts-container { grid-template-columns: repeat(2, auto); } &.post-gallery-180 .posts-container { grid-template-columns: repeat(2, auto); } &.post-gallery-225 .posts-container { grid-template-columns: repeat(2, auto); } diff --git a/app/components/post_preview_component/post_preview_component.html.erb b/app/components/post_preview_component/post_preview_component.html.erb index 69c7a3a04..f3395b155 100644 --- a/app/components/post_preview_component/post_preview_component.html.erb +++ b/app/components/post_preview_component/post_preview_component.html.erb @@ -1,33 +1,35 @@ <%= tag.article id: "post_#{post.id}", **article_attrs do -%> - <%= link_to polymorphic_path(link_target, q: tags), class: "post-preview-link" do -%> - <% if is_animated? || has_sound? %> -
- <% if is_animated? %> - - <%= duration_to_hhmmss(duration) %> - - <% end %> - <% if has_sound? %> - <%= sound_icon(class: "h-3 mx-0.5") -%> - <% end %> -
- <% end %> - - - <% unless save_data %> - <% case size %> - <% when "150" %> - <%# no-op %> - <% when "180" %> - <%= tag.source type: "image/jpeg", srcset: "#{media_asset.variant("180x180").file_url} 1x, #{media_asset.variant("360x360").file_url} 2x" %> - <% else # 225 to 360 %> - <%= tag.source type: "image/webp", srcset: "#{media_asset.variant("360x360").file_url} 1x, #{media_asset.variant("720x720").file_url} 2x" %> - <% end %> +
+ <%= link_to polymorphic_path(link_target, q: tags), class: "post-preview-link" do -%> + <% if is_animated? || has_sound? %> +
+ <% if is_animated? %> + + <%= duration_to_hhmmss(duration) %> + + <% end %> + <% if has_sound? %> + <%= sound_icon(class: "h-3 mx-0.5") -%> + <% end %> +
<% end %> - <%= tag.img src: variant.file_url, width: variant.width, height: variant.height, class: "post-preview-image", title: tooltip, alt: "post ##{post.id}", crossorigin: "anonymous" -%> - - <% end -%> + + <% unless save_data %> + <% case size %> + <% when "150" %> + <%# no-op %> + <% when "180" %> + <%= tag.source type: "image/jpeg", srcset: "#{media_asset.variant("180x180").file_url} 1x, #{media_asset.variant("360x360").file_url} 2x" %> + <% else # 225 to 360 %> + <%= tag.source type: "image/webp", srcset: "#{media_asset.variant("360x360").file_url} 1x, #{media_asset.variant("720x720").file_url} 2x" %> + <% end %> + <% end %> + + <%= tag.img src: variant.file_url, width: variant.width, height: variant.height, class: "post-preview-image", title: tooltip, alt: "post ##{post.id}", crossorigin: "anonymous" -%> + + <% end -%> +
<% if pool -%>

<%= link_to pool.pretty_name.truncate(80), pool %> diff --git a/app/components/post_preview_component/post_preview_component.scss b/app/components/post_preview_component/post_preview_component.scss index 075939c7d..080901aba 100644 --- a/app/components/post_preview_component/post_preview_component.scss +++ b/app/components/post_preview_component/post_preview_component.scss @@ -1,15 +1,10 @@ @import "../../javascript/src/styles/base/000_vars.scss"; article.post-preview { - display: inline-flex; - flex-direction: column; - place-items: center; - position: relative; - overflow: hidden; - .post-preview-link { - display: inline-block; + display: block; position: relative; + margin: 0 auto; .post-animation-icon { color: var(--preview-icon-color); @@ -17,21 +12,6 @@ article.post-preview { } } - &.captioned { - height: auto; - vertical-align: text-top; - } - - &.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 { font-size: var(--text-sm); margin-bottom: 0; @@ -44,11 +24,28 @@ article.post-preview { height: auto; } -@media screen and (min-width: 660px) { - .post-preview-225 .post-preview-image { max-height: 225px; width: auto; } - .post-preview-270 .post-preview-image { max-height: 270px; width: auto; } +.post-preview-fit-fixed { + display: inline-flex; + flex-direction: column; + place-items: center; + + &.post-preview-150 { width: 150px; } + &.post-preview-180 { width: 180px; } + &.post-preview-225 { width: 225px; } + &.post-preview-225w { width: 225px; } + &.post-preview-270 { width: 270px; } + &.post-preview-270w { width: 270px; } + &.post-preview-360 { width: 360px; } } +.post-preview-150 .post-preview-image { max-height: 150px; width: auto; } +.post-preview-180 .post-preview-image { max-height: 180px; width: auto; } +.post-preview-225 .post-preview-image { max-height: 225px; width: auto; } +.post-preview-225w .post-preview-image { max-height: 360px; width: auto; } +.post-preview-270 .post-preview-image { max-height: 270px; width: auto; } +.post-preview-270w .post-preview-image { max-height: 360px; width: auto; } +.post-preview-360 .post-preview-image { max-height: 360px; width: auto; } + .post-preview { img { border: 2px solid transparent;