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

posts: factor out post gallery component.

Browse Source 
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.
This commit is contained in:
evazion
2021-11-22 20:46:04 -06:00
parent 15657aad6d
commit 74e28e14b8
17 changed files with 147 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
app/components/post_gallery_component.rb Normal file
View File

@@ -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<Post>, ActiveRecord::Relation<Post>] 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

17
app/components/post_gallery_component/post_gallery_component.html.erb Normal file
View File

@@ -0,0 +1,17 @@
<div class="post-gallery post-gallery-<%= gallery_type %>">
<% if empty? %>
<p>No posts found.</p>
<% else %>
<div class="posts-container user-disable-cropped-<%= current_user.disable_cropped_thumbnails? %>">
<% posts.each do |post| -%>
<% %><%= post_preview(post, **options) -%>
<% end -%>
</div>
<% end %>
<%= footer %>
<% if has_paginator? %>
<%= numbered_paginator(posts) %>
<% end %>
</div>

27
app/components/post_gallery_component/post_gallery_component.scss Normal file
View File

@@ -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;
}
}
}
}

4
app/helpers/components_helper.rb
View File

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

20
app/javascript/src/styles/specific/posts.scss
View File

@@ -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);
}
}

10
app/javascript/src/styles/specific/z_responsive.scss
View File

@@ -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;
}
}
}

4
app/views/artists/_show.html.erb
View File

@@ -28,9 +28,7 @@
<%= render "posts/partials/common/inline_blacklist" %>
<div class="recent-posts-previews">
<%= post_previews_html(@artist.tag.posts.limit(8), tags: @artist.name) %>
</div>
<%= render_post_gallery(@artist.tag.posts.limit(8), tags: @artist.name) %>
</div>
<% end %>
<% end%>

3
app/views/explore/posts/curated.html.erb
View File

@@ -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) %>
</div>
</div>

3
app/views/explore/posts/popular.html.erb
View File

@@ -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) %>
</div>
</div>

2
app/views/explore/posts/viewed.html.erb
View File

@@ -9,7 +9,7 @@
<%= render "posts/partials/common/inline_blacklist" %>
<%= post_previews_html(@posts) %>
<%= render_post_gallery(@posts) %>
<div class="paginator text-center mt-4">
<menu>

10
app/views/favorite_groups/show.html.erb
View File

@@ -15,14 +15,6 @@
<%= render "posts/partials/common/inline_blacklist" %>
<section>
<% 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 %>
</section>
<%= render_post_gallery(@posts, tags: "favgroup:#{@favorite_group.id}", show_deleted: true) %>
</div>
</div>

10
app/views/pools/show.html.erb
View File

@@ -20,14 +20,6 @@
<%= render "posts/partials/common/inline_blacklist" %>
<section>
<% 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 %>
</section>
<%= render_post_gallery(@posts, tags: "pool:#{@pool.id}", show_deleted: @pool.is_series?) %>
</div>
</div>

62
app/views/posts/partials/index/_posts.html.erb
View File

@@ -1,40 +1,38 @@
<div id="posts">
<div class="posts-container user-disable-cropped-<%= CurrentUser.user.disable_cropped_thumbnails? %>">
<% 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 %>
</div>
<% 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? %>
<div class="fineprint hidden-posts-notice">
<% 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" %>).<br>
<% end %>
<% if post_set.hidden_posts.present? %>
<div class="fineprint hidden-posts-notice">
<% 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" %>).<br>
<% 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" %>).<br>
<% 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" %>).<br>
<% 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" %>).<br>
<% end %>
</div>
<% 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" %>).<br>
<% end %>
</div>
<% 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? %>
<div class="fineprint tag-change-notice">
<p>
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 } %>.
</p>
</div>
<% 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? %>
<div class="fineprint tag-change-notice">
<p>
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 } %>.
</p>
</div>
<% end %>
<% end %>
<% end %>
<% end %>
<% end %>
<% end %>
<%= numbered_paginator(post_set.posts) %>
</div>

2
app/views/posts/partials/show/_child_notice.html.erb
View File

@@ -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") %>
<div id="has-children-relationship-preview">
<%= 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) %>
</div>

2
app/views/posts/partials/show/_parent_notice.html.erb
View File

@@ -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" %>
<div id="has-parent-relationship-preview">
<%= 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) %>
</div>

8
app/views/users/_post_summary.html.erb
View File

@@ -3,9 +3,7 @@
<h2 class="recent-posts-header">
<%= link_to "Uploads", posts_path(tags: "user:#{user.name}") %>
</h2>
<div class="recent-posts-previews">
<%= post_previews_html(presenter.uploads, tags: "user:#{user.name}") %>
</div>
<%= render_post_gallery(presenter.uploads, tags: "user:#{user.name}", show_deleted: true) %>
</div>
<% end %>
@@ -14,8 +12,6 @@
<h2 class="recent-posts-header">
<%= link_to "Favorites", posts_path(tags: "ordfav:#{user.name}") %>
</h2>
<div class="recent-posts-previews">
<%= post_previews_html(presenter.favorites, tags: "ordfav:#{user.name}") %>
</div>
<%= render_post_gallery(presenter.favorites, tags: "ordfav:#{user.name}", show_deleted: true) %>
</div>
<% end %>

4
app/views/wiki_pages/_posts.html.erb
View File

@@ -4,8 +4,6 @@
<%= link_to "Posts", posts_path(tags: wiki_page.title) %>
</h2>
<div class="recent-posts-previews">
<%= post_previews_html(wiki_page.tag.posts.limit(8), tags: wiki_page.title) %>
</div>
<%= render_post_gallery(wiki_page.tag.posts.limit(8), tags: wiki_page.title) %>
</div>
<% end %>