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 %>