From 0997f5595e170ac4e19d3532fc34641f092a18a9 Mon Sep 17 00:00:00 2001 From: evazion Date: Mon, 13 Dec 2021 03:22:57 -0600 Subject: [PATCH] posts: increase default thumbnail size. * Increase the default thumbnail size from small (150x150) to medium (180x180). * Change the mobile layout to use three posts per row instead of two for small thumbnails. Parent/child posts are still 150x150 to avoid taking up even more space above posts. --- app/components/post_gallery_component.rb | 8 ++++++-- .../post_gallery_component.scss | 2 +- app/components/post_preview_component.rb | 4 +++- app/controllers/posts_controller.rb | 4 ++-- .../posts/partials/show/_child_notice.html.erb | 2 +- .../posts/partials/show/_parent_notice.html.erb | 2 +- test/components/post_preview_component_test.rb | 16 ++++++++-------- 7 files changed, 22 insertions(+), 16 deletions(-) diff --git a/app/components/post_gallery_component.rb b/app/components/post_gallery_component.rb index 95349b9ae..fa330a4f6 100644 --- a/app/components/post_gallery_component.rb +++ b/app/components/post_gallery_component.rb @@ -7,6 +7,10 @@ # seen in parent/child post sets. # class PostGalleryComponent < ApplicationComponent + # The default size of thumbnails in a gallery. See also PostPreviewComponent::DEFAULT_SIZE + # for the default size of standalone thumbnails. + DEFAULT_SIZE = "180" + attr_reader :inline, :size, :options # The list of posts in the gallery. @@ -20,7 +24,7 @@ class PostGalleryComponent < ApplicationComponent # @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 PostPreviewComponent. - def initialize(inline: false, size: PostPreviewComponent::DEFAULT_SIZE, **options) + def initialize(inline: false, size: DEFAULT_SIZE, **options) super @inline = inline @options = options @@ -28,7 +32,7 @@ class PostGalleryComponent < ApplicationComponent if size.to_s.in?(PostPreviewComponent::SIZES) @size = size else - @size = PostPreviewComponent::DEFAULT_SIZE + @size = DEFAULT_SIZE end end diff --git a/app/components/post_gallery_component/post_gallery_component.scss b/app/components/post_gallery_component/post_gallery_component.scss index ed2bbd9ce..13631cdf4 100644 --- a/app/components/post_gallery_component/post_gallery_component.scss +++ b/app/components/post_gallery_component/post_gallery_component.scss @@ -43,7 +43,7 @@ gap: 0.25rem; } - &.post-gallery-150 .posts-container { grid-template-columns: repeat(2, auto); } + &.post-gallery-150 .posts-container { grid-template-columns: repeat(3, minmax(0, 150px)); } &.post-gallery-180 .posts-container { grid-template-columns: repeat(2, auto); } &.post-gallery-225 .posts-container { grid-template-columns: repeat(2, auto); } &.post-gallery-225w .posts-container { grid-template-columns: repeat(2, auto); } diff --git a/app/components/post_preview_component.rb b/app/components/post_preview_component.rb index de5eb5eea..7c55fdc63 100644 --- a/app/components/post_preview_component.rb +++ b/app/components/post_preview_component.rb @@ -1,7 +1,9 @@ # frozen_string_literal: true class PostPreviewComponent < ApplicationComponent - DEFAULT_SIZE = "150" + # The default size of standalone thumbnails not in a gallery. See also + # PostGalleryComponent::DEFAULT_SIZE for the default size of thumbnails in a gallery. + DEFAULT_SIZE = "180" SIZES = %w[150 180 225 225w 270 270w 360] diff --git a/app/controllers/posts_controller.rb b/app/controllers/posts_controller.rb index 306943979..f9a25f414 100644 --- a/app/controllers/posts_controller.rb +++ b/app/controllers/posts_controller.rb @@ -18,7 +18,7 @@ class PostsController < ApplicationController tag_query = params[:tags] || params.dig(:post, :tags) @show_votes = (params[:show_votes].presence || cookies[:post_preview_show_votes].presence || "false").truthy? @post_set = PostSets::Post.new(tag_query, params[:page], params[:limit], format: request.format.symbol, show_votes: @show_votes) - @preview_size = params[:size].presence || cookies[:post_preview_size].presence || PostPreviewComponent::DEFAULT_SIZE + @preview_size = params[:size].presence || cookies[:post_preview_size].presence || PostGalleryComponent::DEFAULT_SIZE @posts = authorize @post_set.posts, policy_class: PostPolicy @post_set.log! respond_with(@posts) do |format| @@ -60,7 +60,7 @@ class PostsController < ApplicationController @post = authorize Post.find(params[:id]) @post.update(permitted_attributes(@post)) @show_votes = (params[:show_votes].presence || cookies[:post_preview_show_votes].presence || "false").truthy? - @preview_size = params[:size].presence || cookies[:post_preview_size].presence || PostPreviewComponent::DEFAULT_SIZE + @preview_size = params[:size].presence || cookies[:post_preview_size].presence || PostGalleryComponent::DEFAULT_SIZE respond_with_post_after_update(@post) end diff --git a/app/views/posts/partials/show/_child_notice.html.erb b/app/views/posts/partials/show/_child_notice.html.erb index 963d079c0..aa90bd128 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") %>
- <%= render_post_gallery([parent, *children], tags: "parent:#{parent.id}", show_deleted: true, inline: true) %> + <%= render_post_gallery([parent, *children], tags: "parent:#{parent.id}", show_deleted: true, inline: true, size: "150") %>
diff --git a/app/views/posts/partials/show/_parent_notice.html.erb b/app/views/posts/partials/show/_parent_notice.html.erb index 339825a7c..e6b4500ef 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" %>
- <%= render_post_gallery([parent, *children], tags: "parent:#{parent.id}", show_deleted: true, inline: true) %> + <%= render_post_gallery([parent, *children], tags: "parent:#{parent.id}", show_deleted: true, inline: true, size: "150") %>
diff --git a/test/components/post_preview_component_test.rb b/test/components/post_preview_component_test.rb index f42591b28..3aab74012 100644 --- a/test/components/post_preview_component_test.rb +++ b/test/components/post_preview_component_test.rb @@ -14,7 +14,7 @@ class PostPreviewComponentTest < ViewComponent::TestCase node = render_preview(@post, current_user: User.anonymous) assert_equal(post_path(@post), node.css("article a").attr("href").value) - assert_equal(@post.preview_file_url, node.css("article img").attr("src").value) + assert_equal(@post.media_asset.variant("180x180").file_url, node.css("article img").attr("src").value) end end @@ -24,7 +24,7 @@ class PostPreviewComponentTest < ViewComponent::TestCase node = render_preview(@post, current_user: User.anonymous) assert_equal(post_path(@post), node.css("article a").attr("href").value) - assert_equal(@post.preview_file_url, node.css("article img").attr("src").value) + assert_equal(@post.media_asset.variant("180x180").file_url, node.css("article img").attr("src").value) assert_equal("0:01", node.css("article .post-duration").text.strip) end end @@ -35,7 +35,7 @@ class PostPreviewComponentTest < ViewComponent::TestCase node = render_preview(@post, current_user: User.anonymous) assert_equal(post_path(@post), node.css("article a").attr("href").value) - assert_equal(@post.preview_file_url, node.css("article img").attr("src").value) + assert_equal(@post.media_asset.variant("180x180").file_url, node.css("article img").attr("src").value) assert(node.css("article .sound-icon").present?) end end @@ -50,7 +50,7 @@ class PostPreviewComponentTest < ViewComponent::TestCase node = render_preview(@post, current_user: create(:gold_user)) assert_equal(post_path(@post), node.css("article a").attr("href").value) - assert_equal(@post.preview_file_url, node.css("article img").attr("src").value) + assert_equal(@post.media_asset.variant("180x180").file_url, node.css("article img").attr("src").value) end should "not be visible to Members" do @@ -68,7 +68,7 @@ class PostPreviewComponentTest < ViewComponent::TestCase node = render_preview(@post, current_user: create(:gold_user)) assert_equal(post_path(@post), node.css("article a").attr("href").value) - assert_equal(@post.preview_file_url, node.css("article img").attr("src").value) + assert_equal(@post.media_asset.variant("180x180").file_url, node.css("article img").attr("src").value) end should "not be visible to Members" do @@ -86,7 +86,7 @@ class PostPreviewComponentTest < ViewComponent::TestCase node = render_preview(@post, current_user: create(:approver)) assert_equal(post_path(@post), node.css("article a").attr("href").value) - assert_equal(@post.preview_file_url, node.css("article img").attr("src").value) + assert_equal(@post.media_asset.variant("180x180").file_url, node.css("article img").attr("src").value) end should "not be visible to Gold users" do @@ -104,7 +104,7 @@ class PostPreviewComponentTest < ViewComponent::TestCase node = render_preview(@post, current_user: User.anonymous) assert_equal(post_path(@post), node.css("article a").attr("href").value) - assert_equal(@post.preview_file_url, node.css("article img").attr("src").value) + assert_equal(@post.media_asset.variant("180x180").file_url, node.css("article img").attr("src").value) end should "not be visible to users with safe mode on" do @@ -124,7 +124,7 @@ class PostPreviewComponentTest < ViewComponent::TestCase node = render_preview(@post, current_user: User.anonymous, show_deleted: true) assert_equal(post_path(@post), node.css("article a").attr("href").value) - assert_equal(@post.preview_file_url, node.css("article img").attr("src").value) + assert_equal(@post.media_asset.variant("180x180").file_url, node.css("article img").attr("src").value) end should "not be visible to users normally" do