diff --git a/app/components/post_gallery_component.rb b/app/components/post_gallery_component.rb index 93b0741a1..95349b9ae 100644 --- a/app/components/post_gallery_component.rb +++ b/app/components/post_gallery_component.rb @@ -1,31 +1,27 @@ # A component that displays a gallery of post thumbnails. # -# There are three types of galleries: +# There are two 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. +# * Grid galleries, where posts are arranged in a fixed grid. +# * Inline galleries, where posts are arranged on a single scrollable row, as +# seen in parent/child post sets. # class PostGalleryComponent < ApplicationComponent - attr_reader :posts, :current_user, :inline, :size, :options + attr_reader :inline, :size, :options - delegate :post_preview, :numbered_paginator, to: :helpers + # The list of posts in the gallery. + renders_many :posts, PostPreviewComponent - # A gallery can optionally have a footer that displays between the posts and the paginator. + # An optional footer that displays beneath the posts. Usually used for 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 size [String] The size of thumbnails in the gallery. Can be "150", # "180", "225", "225w", "270", "270w", or "360". - # @param options [Hash] A set of options given to the thumbnail in `post_preview`. - def initialize(posts:, current_user:, inline: false, size: PostPreviewComponent::DEFAULT_SIZE, **options) + # @param options [Hash] A set of options given to the PostPreviewComponent. + def initialize(inline: false, size: PostPreviewComponent::DEFAULT_SIZE, **options) super - @posts = posts - @posts = @posts.includes(:media_asset) if posts.is_a?(ActiveRecord::Relation) - @current_user = current_user @inline = inline @options = options @@ -39,26 +35,8 @@ class PostGalleryComponent < ApplicationComponent def gallery_type if inline :inline - elsif has_paginator? - :paginated else - :unpaginated + :grid 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 index 5d3bd686b..6375023bb 100644 --- a/app/components/post_gallery_component/post_gallery_component.html.erb +++ b/app/components/post_gallery_component/post_gallery_component.html.erb @@ -1,17 +1,13 @@
- <% if empty? %> + <% if posts.empty? %>

No posts found.

<% else %>
<% posts.each do |post| -%> -<% %><%= post_preview(post, **options) -%> +<% %><%= post -%> <% end -%>
<% end %> <%= footer %> - - <% if has_paginator? %> - <%= numbered_paginator(posts) %> - <% end %>
diff --git a/app/components/post_preview_component/post_preview_component.scss b/app/components/post_preview_component/post_preview_component.scss index e13904fbe..2ade41e76 100644 --- a/app/components/post_preview_component/post_preview_component.scss +++ b/app/components/post_preview_component/post_preview_component.scss @@ -1,7 +1,9 @@ @import "../../javascript/src/styles/base/000_vars.scss"; article.post-preview { - display: inline-block; + display: inline-flex; + flex-direction: column; + place-items: center; position: relative; overflow: hidden; @@ -28,6 +30,7 @@ article.post-preview { .desc { font-size: var(--text-sm); margin-bottom: 0; + text-align: center; } } diff --git a/app/helpers/components_helper.rb b/app/helpers/components_helper.rb index bac2f1b58..da05c3bdc 100644 --- a/app/helpers/components_helper.rb +++ b/app/helpers/components_helper.rb @@ -3,13 +3,22 @@ module ComponentsHelper render PostPreviewComponent.new(post: post, **options) end - def post_previews_html(posts, **options) + # Render a set of posts as thumbnail gallery. + # + # @param posts [ActiveRecord::Relation, Array] A set of posts. + # @param options [Hash] A hash of options for the PostGalleryComponent and PostPreviewComponent. + def render_post_gallery(posts, **options, &block) posts = posts.includes(:media_asset) if posts.is_a?(ActiveRecord::Relation) - 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 + render(PostGalleryComponent.new(**options)) do |gallery| + posts.each do |post| + gallery.post(post: post, size: gallery.size, **options) + end + + if block_given? + yield(gallery, posts) + end + end end def render_comment(comment, current_user:, **options) diff --git a/app/views/explore/posts/curated.html.erb b/app/views/explore/posts/curated.html.erb index 7dbe35cae..3e7a1ed02 100644 --- a/app/views/explore/posts/curated.html.erb +++ b/app/views/explore/posts/curated.html.erb @@ -10,6 +10,10 @@ <%= render "explore/posts/nav_links", path: :curated_explore_posts_path, date: @date, scale: @scale %> <%= render "posts/partials/common/inline_blacklist" %> - <%= render_post_gallery(@posts) %> + <%= render_post_gallery(@posts) do |gallery| %> + <% gallery.footer do %> + <%= numbered_paginator(@posts) %> + <% end %> + <% end %> diff --git a/app/views/explore/posts/popular.html.erb b/app/views/explore/posts/popular.html.erb index 471361f46..79d6b424e 100644 --- a/app/views/explore/posts/popular.html.erb +++ b/app/views/explore/posts/popular.html.erb @@ -10,6 +10,10 @@ <%= render "explore/posts/nav_links", path: :popular_explore_posts_path, date: @date, scale: @scale %> <%= render "posts/partials/common/inline_blacklist" %> - <%= render_post_gallery(@posts) %> + <%= render_post_gallery(@posts) do |gallery| %> + <% gallery.footer do %> + <%= numbered_paginator(@posts) %> + <% end %> + <% end %> diff --git a/app/views/favorite_groups/show.html.erb b/app/views/favorite_groups/show.html.erb index cef47a6d3..0770ddc4b 100644 --- a/app/views/favorite_groups/show.html.erb +++ b/app/views/favorite_groups/show.html.erb @@ -15,6 +15,10 @@ <%= render "posts/partials/common/inline_blacklist" %> - <%= render_post_gallery(@posts, tags: "favgroup:#{@favorite_group.id}", show_deleted: true) %> + <%= render_post_gallery(@posts, tags: "favgroup:#{@favorite_group.id}", show_deleted: true) do |gallery| %> + <% gallery.footer do %> + <%= numbered_paginator(@posts) %> + <% end %> + <% end %> diff --git a/app/views/pools/gallery.html.erb b/app/views/pools/gallery.html.erb index 720d8074b..b1eb9b233 100644 --- a/app/views/pools/gallery.html.erb +++ b/app/views/pools/gallery.html.erb @@ -9,12 +9,12 @@ <%= render "posts/partials/common/inline_blacklist" %> -
+ <%= render(PostGalleryComponent.new) do |gallery| %> <% @pools.each do |pool| %> - <%= post_preview(pool.cover_post, link_target: pool, pool: pool, show_deleted: true) %> + <% gallery.post(post: pool.cover_post, link_target: pool, pool: pool, show_deleted: true) %> <% end %> + <% end %> - <%= numbered_paginator(@pools) %> -
+ <%= numbered_paginator(@pools) %> diff --git a/app/views/pools/show.html.erb b/app/views/pools/show.html.erb index 893b926ea..ad8520c81 100644 --- a/app/views/pools/show.html.erb +++ b/app/views/pools/show.html.erb @@ -20,6 +20,10 @@ <%= render "posts/partials/common/inline_blacklist" %> - <%= render_post_gallery(@posts, tags: "pool:#{@pool.id}", show_deleted: @pool.is_series?) %> + <%= render_post_gallery(@posts, tags: "pool:#{@pool.id}", show_deleted: @pool.is_series?) do |gallery| %> + <% gallery.footer do %> + <%= numbered_paginator(@posts) %> + <% end %> + <% end %> diff --git a/app/views/posts/partials/index/_posts.html.erb b/app/views/posts/partials/index/_posts.html.erb index 1352fba3d..18247f84e 100644 --- a/app/views/posts/partials/index/_posts.html.erb +++ b/app/views/posts/partials/index/_posts.html.erb @@ -2,7 +2,7 @@ <% 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?, size: params[:size]) do |gallery| %> + <%= render_post_gallery(post_set.posts, show_deleted: post_set.show_deleted?, tags: post_set.tag_string, show_votes: post_set.show_votes?, size: params[:size]) do |gallery, posts| %> <% gallery.footer do %> <% if post_set.hidden_posts.present? %>
@@ -32,6 +32,8 @@ <% end %> <% end %> <% end %> + + <%= numbered_paginator(posts) %> <% end %> <% end %> <% end %>