From 74e28e14b86e2344b7ba7ff9aeaa98bd466f534c Mon Sep 17 00:00:00 2001 From: evazion Date: Mon, 22 Nov 2021 20:46:04 -0600 Subject: [PATCH] posts: factor out post gallery component. Factor out thumbnail galleries into a PostGallery component. This changes the html structure so that post galleries on all pages are always wrapped in a `.posts-container` class. This fixes an issue with thumbnails on the pool show page not being aligned correctly on mobile, like they are on the post index page. This also affected thumbnail galleries on other pages, like wiki pages and user profiles. --- app/components/post_gallery_component.rb | 56 +++++++++++++++++ .../post_gallery_component.html.erb | 17 +++++ .../post_gallery_component.scss | 27 ++++++++ app/helpers/components_helper.rb | 4 ++ app/javascript/src/styles/specific/posts.scss | 20 +----- .../src/styles/specific/z_responsive.scss | 10 --- app/views/artists/_show.html.erb | 4 +- app/views/explore/posts/curated.html.erb | 3 +- app/views/explore/posts/popular.html.erb | 3 +- app/views/explore/posts/viewed.html.erb | 2 +- app/views/favorite_groups/show.html.erb | 10 +-- app/views/pools/show.html.erb | 10 +-- .../posts/partials/index/_posts.html.erb | 62 +++++++++---------- .../partials/show/_child_notice.html.erb | 2 +- .../partials/show/_parent_notice.html.erb | 2 +- app/views/users/_post_summary.html.erb | 8 +-- app/views/wiki_pages/_posts.html.erb | 4 +- 17 files changed, 147 insertions(+), 97 deletions(-) create mode 100644 app/components/post_gallery_component.rb create mode 100644 app/components/post_gallery_component/post_gallery_component.html.erb create mode 100644 app/components/post_gallery_component/post_gallery_component.scss diff --git a/app/components/post_gallery_component.rb b/app/components/post_gallery_component.rb new file mode 100644 index 000000000..cc16bdad1 --- /dev/null +++ b/app/components/post_gallery_component.rb @@ -0,0 +1,56 @@ +# A component that displays a gallery of post thumbnails. +# +# There are three types of galleries: +# +# * Paginated galleries, as seen on the post index page and pool show page. +# * Unpaginated galleries, as seen on wiki pages, artist pages, and user profiles. +# * Inline galleries that fit on a single row, as seen in parent/child post sets. +# +class PostGalleryComponent < ApplicationComponent + attr_reader :posts, :current_user, :inline, :options + + delegate :post_preview, :numbered_paginator, to: :helpers + + # A gallery can optionally have a footer that displays between the posts and the paginator. + renders_one :footer + + # @param posts [Array, ActiveRecord::Relation] The set of posts to display + # @param current_user [User] The current user. + # @param inline [Boolean] If true, the gallery is rendered as a single row with a + # horizontal scrollbar. If false, the gallery is rendered as a grid of thumbnails. + # @param options [Hash] A set of options given to the thumbnail in `post_preview`. + def initialize(posts:, current_user:, inline: false, **options) + super + @posts = posts + @posts = @posts.includes(:media_asset) if posts.is_a?(ActiveRecord::Relation) + @current_user = current_user + @inline = inline + @options = options + end + + def gallery_type + if inline + :inline + elsif has_paginator? + :paginated + else + :unpaginated + end + end + + def has_paginator? + posts.respond_to?(:total_count) + end + + def total_count + if has_paginator? + posts.total_count + else + posts.length + end + end + + def empty? + total_count == 0 + end +end diff --git a/app/components/post_gallery_component/post_gallery_component.html.erb b/app/components/post_gallery_component/post_gallery_component.html.erb new file mode 100644 index 000000000..3e10e11a1 --- /dev/null +++ b/app/components/post_gallery_component/post_gallery_component.html.erb @@ -0,0 +1,17 @@ +
+ <% if empty? %> +

No posts found.

+ <% else %> +
+ <% posts.each do |post| -%> +<% %><%= post_preview(post, **options) -%> + <% end -%> +
+ <% end %> + + <%= footer %> + + <% if has_paginator? %> + <%= numbered_paginator(posts) %> + <% end %> +
diff --git a/app/components/post_gallery_component/post_gallery_component.scss b/app/components/post_gallery_component/post_gallery_component.scss new file mode 100644 index 000000000..b2cb868cd --- /dev/null +++ b/app/components/post_gallery_component/post_gallery_component.scss @@ -0,0 +1,27 @@ +.post-gallery-inline { + overflow-x: auto; + white-space: nowrap; + + article.post-preview { + width: auto; + height: auto; + margin: 0 0 0.5rem 0; + padding: 0.5rem; + overflow: hidden; + vertical-align: top; + } +} + +@media screen and (max-width: 660px) { + .post-gallery-full { + .posts-container { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 0.25rem; + + &.user-disable-cropped-false article.post-preview img.has-cropped-true { + object-fit: none; + } + } + } +} diff --git a/app/helpers/components_helper.rb b/app/helpers/components_helper.rb index 05ccd28e2..bac2f1b58 100644 --- a/app/helpers/components_helper.rb +++ b/app/helpers/components_helper.rb @@ -8,6 +8,10 @@ module ComponentsHelper render PostPreviewComponent.with_collection(posts, **options) end + def render_post_gallery(posts, current_user: CurrentUser.user, **options, &block) + render PostGalleryComponent.new(posts: posts, current_user: current_user, **options), &block + end + def render_comment(comment, current_user:, **options) render CommentComponent.new(comment: comment, current_user: current_user, **options) end diff --git a/app/javascript/src/styles/specific/posts.scss b/app/javascript/src/styles/specific/posts.scss index 460f1de71..b3b8ea1ae 100644 --- a/app/javascript/src/styles/specific/posts.scss +++ b/app/javascript/src/styles/specific/posts.scss @@ -32,25 +32,9 @@ } #has-parent-relationship-preview, #has-children-relationship-preview { - overflow-x: auto; - white-space: nowrap; - - article.post-preview { - width: auto; - height: auto; - margin: 0.5rem 0; - padding: 0.5rem; - overflow: hidden; - vertical-align: top; + article.post-preview.current-post { border-radius: 0.25rem; - - &.current-post { - background-color: var(--preview-selected-color); - } - - img { - white-space: normal; - } + background-color: var(--preview-selected-color); } } diff --git a/app/javascript/src/styles/specific/z_responsive.scss b/app/javascript/src/styles/specific/z_responsive.scss index 4bb6cc934..ff203952a 100644 --- a/app/javascript/src/styles/specific/z_responsive.scss +++ b/app/javascript/src/styles/specific/z_responsive.scss @@ -40,14 +40,4 @@ } } } - - .posts-container { - display: grid; - grid-template-columns: repeat(3, minmax(0, 1fr)); - gap: 0.25rem; - - &.user-disable-cropped-false article.post-preview img.has-cropped-true { - object-fit: none; - } - } } diff --git a/app/views/artists/_show.html.erb b/app/views/artists/_show.html.erb index b6fae3244..7851ff52f 100644 --- a/app/views/artists/_show.html.erb +++ b/app/views/artists/_show.html.erb @@ -28,9 +28,7 @@ <%= render "posts/partials/common/inline_blacklist" %> -
- <%= post_previews_html(@artist.tag.posts.limit(8), tags: @artist.name) %> -
+ <%= render_post_gallery(@artist.tag.posts.limit(8), tags: @artist.name) %> <% end %> <% end%> diff --git a/app/views/explore/posts/curated.html.erb b/app/views/explore/posts/curated.html.erb index 2cf1bd0e4..7dbe35cae 100644 --- a/app/views/explore/posts/curated.html.erb +++ b/app/views/explore/posts/curated.html.erb @@ -10,7 +10,6 @@ <%= render "explore/posts/nav_links", path: :curated_explore_posts_path, date: @date, scale: @scale %> <%= render "posts/partials/common/inline_blacklist" %> - <%= post_previews_html(@posts) %> - <%= numbered_paginator(@posts) %> + <%= render_post_gallery(@posts) %> diff --git a/app/views/explore/posts/popular.html.erb b/app/views/explore/posts/popular.html.erb index 69534403d..471361f46 100644 --- a/app/views/explore/posts/popular.html.erb +++ b/app/views/explore/posts/popular.html.erb @@ -10,7 +10,6 @@ <%= render "explore/posts/nav_links", path: :popular_explore_posts_path, date: @date, scale: @scale %> <%= render "posts/partials/common/inline_blacklist" %> - <%= post_previews_html(@posts) %> - <%= numbered_paginator(@posts) %> + <%= render_post_gallery(@posts) %> diff --git a/app/views/explore/posts/viewed.html.erb b/app/views/explore/posts/viewed.html.erb index 96f6dc04f..e1b253ba2 100644 --- a/app/views/explore/posts/viewed.html.erb +++ b/app/views/explore/posts/viewed.html.erb @@ -9,7 +9,7 @@ <%= render "posts/partials/common/inline_blacklist" %> - <%= post_previews_html(@posts) %> + <%= render_post_gallery(@posts) %>
diff --git a/app/views/favorite_groups/show.html.erb b/app/views/favorite_groups/show.html.erb index d838e7c6e..cef47a6d3 100644 --- a/app/views/favorite_groups/show.html.erb +++ b/app/views/favorite_groups/show.html.erb @@ -15,14 +15,6 @@ <%= render "posts/partials/common/inline_blacklist" %> -
- <% if @favorite_group.post_count == 0 %> - <%= render "post_sets/blank" %> - <% else %> - <%= post_previews_html(@posts, tags: "favgroup:#{@favorite_group.id}", show_deleted: true) %> - - <%= numbered_paginator(@posts) %> - <% end %> -
+ <%= render_post_gallery(@posts, tags: "favgroup:#{@favorite_group.id}", show_deleted: true) %>
diff --git a/app/views/pools/show.html.erb b/app/views/pools/show.html.erb index 273a723f4..893b926ea 100644 --- a/app/views/pools/show.html.erb +++ b/app/views/pools/show.html.erb @@ -20,14 +20,6 @@ <%= render "posts/partials/common/inline_blacklist" %> -
- <% if @pool.post_count == 0 %> - <%= render "post_sets/blank" %> - <% else %> - <%= post_previews_html(@posts, tags: "pool:#{@pool.id}", show_deleted: @pool.is_series?) %> - - <%= numbered_paginator(@posts) %> - <% end %> -
+ <%= render_post_gallery(@posts, tags: "pool:#{@pool.id}", show_deleted: @pool.is_series?) %> diff --git a/app/views/posts/partials/index/_posts.html.erb b/app/views/posts/partials/index/_posts.html.erb index e8956443a..17cc0ad4c 100644 --- a/app/views/posts/partials/index/_posts.html.erb +++ b/app/views/posts/partials/index/_posts.html.erb @@ -1,40 +1,38 @@
-
- <% if post_set.shown_posts.empty? %> - <%= render "post_sets/blank" %> - <% else %> - <%= post_previews_html(post_set.posts, show_deleted: post_set.show_deleted?, show_cropped: true, tags: post_set.tag_string, show_votes: post_set.show_votes?) %> - <% end %> -
+ <% if post_set.shown_posts.empty? %> + <%= render "post_sets/blank" %> + <% else %> + <%= render_post_gallery(post_set.posts, show_deleted: post_set.show_deleted?, tags: post_set.tag_string, show_votes: post_set.show_votes?) do |gallery| %> + <% gallery.footer do %> + <% if post_set.hidden_posts.present? %> +
+ <% if post_set.banned_posts.present? %> + <%= post_set.banned_posts.size %> post(s) were removed from this page at the artist's request (<%= link_to_wiki "learn more", "banned_artist" %>).
+ <% end %> - <% if post_set.hidden_posts.present? %> -
- <% if post_set.banned_posts.present? %> - <%= post_set.banned_posts.size %> post(s) were removed from this page at the artist's request (<%= link_to_wiki "learn more", "banned_artist" %>).
- <% end %> + <% if post_set.censored_posts.present? %> + <%= post_set.censored_posts.size %> post(s) on this page require a <%= link_to "Gold account", new_user_upgrade_path %> to view (<%= link_to_wiki "learn more", "help:censored_tags" %>).
+ <% end %> - <% if post_set.censored_posts.present? %> - <%= post_set.censored_posts.size %> post(s) on this page require a <%= link_to "Gold account", new_user_upgrade_path %> to view (<%= link_to_wiki "learn more", "help:censored_tags" %>).
- <% end %> + <% if post_set.safe_posts.present? %> + <%= post_set.safe_posts.size %> post(s) on this page were hidden by safe mode. Go to <%= link_to "Danbooru", "https://danbooru.donmai.us" %> or disable safe mode to view them (<%= link_to_wiki "learn more", "help:user_settings" %>).
+ <% end %> +
+ <% end %> - <% if post_set.safe_posts.present? %> - <%= post_set.safe_posts.size %> post(s) on this page were hidden by safe mode. Go to <%= link_to "Danbooru", "https://danbooru.donmai.us" %> or disable safe mode to view them (<%= link_to_wiki "learn more", "help:user_settings" %>).
- <% end %> -
- <% end %> - - <% if !CurrentUser.user.is_anonymous? && post_set.tag.present? && post_set.current_page == 1 %> - <% cache("tag-change-notice:#{post_set.tag.name}", expires_in: 4.hours) do %> - <% if post_set.pending_bulk_update_requests.present? %> -
-

- This tag is being discussed in - <%= to_sentence post_set.pending_bulk_update_requests.map { |bur| link_to "Topic ##{bur.forum_topic_id}: #{bur.forum_topic.title}", bur.forum_post } %>. -

-
+ <% if !CurrentUser.user.is_anonymous? && post_set.tag.present? && post_set.current_page == 1 %> + <% cache("tag-change-notice:#{post_set.tag.name}", expires_in: 4.hours) do %> + <% if post_set.pending_bulk_update_requests.present? %> +
+

+ This tag is being discussed in + <%= to_sentence post_set.pending_bulk_update_requests.map { |bur| link_to "Topic ##{bur.forum_topic_id}: #{bur.forum_topic.title}", bur.forum_post } %>. +

+
+ <% end %> + <% end %> + <% end %> <% end %> <% end %> <% end %> - - <%= numbered_paginator(post_set.posts) %>
diff --git a/app/views/posts/partials/show/_child_notice.html.erb b/app/views/posts/partials/show/_child_notice.html.erb index 4017e7012..963d079c0 100644 --- a/app/views/posts/partials/show/_child_notice.html.erb +++ b/app/views/posts/partials/show/_child_notice.html.erb @@ -4,5 +4,5 @@ This post has <%= link_to pluralize(children.length, "child"), posts_path(tags: <%= link_to("« hide", "#", id: "has-children-relationship-preview-link") %>
- <%= post_previews_html([parent, *children], tags: "parent:#{parent.id}", show_deleted: true) %> + <%= render_post_gallery([parent, *children], tags: "parent:#{parent.id}", show_deleted: true, inline: true) %>
diff --git a/app/views/posts/partials/show/_parent_notice.html.erb b/app/views/posts/partials/show/_parent_notice.html.erb index d4388757f..339825a7c 100644 --- a/app/views/posts/partials/show/_parent_notice.html.erb +++ b/app/views/posts/partials/show/_parent_notice.html.erb @@ -10,5 +10,5 @@ This post belongs to a <%= link_to "parent", posts_path(tags: "parent:#{parent.i <%= link_to "« hide", "#", id: "has-parent-relationship-preview-link" %>
- <%= post_previews_html([parent, *children], tags: "parent:#{parent.id}", show_deleted: true) %> + <%= render_post_gallery([parent, *children], tags: "parent:#{parent.id}", show_deleted: true, inline: true) %>
diff --git a/app/views/users/_post_summary.html.erb b/app/views/users/_post_summary.html.erb index ce2fa71ce..16524df47 100644 --- a/app/views/users/_post_summary.html.erb +++ b/app/views/users/_post_summary.html.erb @@ -3,9 +3,7 @@

<%= link_to "Uploads", posts_path(tags: "user:#{user.name}") %>

-
- <%= post_previews_html(presenter.uploads, tags: "user:#{user.name}") %> -
+ <%= render_post_gallery(presenter.uploads, tags: "user:#{user.name}", show_deleted: true) %> <% end %> @@ -14,8 +12,6 @@

<%= link_to "Favorites", posts_path(tags: "ordfav:#{user.name}") %>

-
- <%= post_previews_html(presenter.favorites, tags: "ordfav:#{user.name}") %> -
+ <%= render_post_gallery(presenter.favorites, tags: "ordfav:#{user.name}", show_deleted: true) %> <% end %> diff --git a/app/views/wiki_pages/_posts.html.erb b/app/views/wiki_pages/_posts.html.erb index 756329a9f..7a6008679 100644 --- a/app/views/wiki_pages/_posts.html.erb +++ b/app/views/wiki_pages/_posts.html.erb @@ -4,8 +4,6 @@ <%= link_to "Posts", posts_path(tags: wiki_page.title) %> -
- <%= post_previews_html(wiki_page.tag.posts.limit(8), tags: wiki_page.title) %> -
+ <%= render_post_gallery(wiki_page.tag.posts.limit(8), tags: wiki_page.title) %> <% end %>