From f35bc60e51e0908c5c4b6c5172bc22c28a7cddf6 Mon Sep 17 00:00:00 2001 From: evazion Date: Sun, 26 Jun 2022 15:34:47 -0500 Subject: [PATCH] posts: add hidden 540px thumbnail size option. Add a hidden option for 540px size thumbnails. This option currently isn't listed in the thumbnail size menu, but it can be enabled with an URL param: https://danbooru.donmai.us/posts?size=540. --- .../media_asset_gallery_component.scss | 3 +++ app/components/media_asset_preview_component.rb | 2 +- .../post_gallery_component/post_gallery_component.scss | 3 +++ app/components/post_preview_component.rb | 4 ++-- .../post_preview_component/post_preview_component.scss | 2 ++ 5 files changed, 11 insertions(+), 3 deletions(-) diff --git a/app/components/media_asset_gallery_component/media_asset_gallery_component.scss b/app/components/media_asset_gallery_component/media_asset_gallery_component.scss index 267dde096..3ad12a17a 100644 --- a/app/components/media_asset_gallery_component/media_asset_gallery_component.scss +++ b/app/components/media_asset_gallery_component/media_asset_gallery_component.scss @@ -9,6 +9,7 @@ &.media-asset-gallery-225 .post-preview-container { height: 225px; } &.media-asset-gallery-270 .post-preview-container { height: 270px; } &.media-asset-gallery-360 .post-preview-container { height: 360px; } + &.media-asset-gallery-540 .post-preview-container { height: 540px; } &.media-asset-gallery-720 .post-preview-container { height: 720px; } } @@ -17,6 +18,7 @@ &.media-asset-gallery-225 .media-assets-container { grid-template-columns: repeat(auto-fill, minmax(225px, 1fr)); } &.media-asset-gallery-270 .media-assets-container { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); } &.media-asset-gallery-360 .media-assets-container { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); } + &.media-asset-gallery-540 .media-assets-container { grid-template-columns: repeat(auto-fill, minmax(540px, 1fr)); } &.media-asset-gallery-720 .media-assets-container { grid-template-columns: repeat(auto-fill, minmax(720px, 1fr)); } @media screen and (max-width: 660px) { @@ -29,6 +31,7 @@ &.media-asset-gallery-225 .media-assets-container { grid-template-columns: repeat(2, auto); } &.media-asset-gallery-270 .media-assets-container { grid-template-columns: repeat(2, auto); } &.media-asset-gallery-360 .media-assets-container { grid-template-columns: repeat(1, auto); } + &.media-asset-gallery-540 .media-assets-container { grid-template-columns: repeat(1, auto); } &.media-asset-gallery-720 .media-assets-container { grid-template-columns: repeat(1, auto); } } } diff --git a/app/components/media_asset_preview_component.rb b/app/components/media_asset_preview_component.rb index 021aeff9a..3d2a0224c 100644 --- a/app/components/media_asset_preview_component.rb +++ b/app/components/media_asset_preview_component.rb @@ -33,7 +33,7 @@ class MediaAssetPreviewComponent < ApplicationComponent media_asset.variant("180x180") when 225, 270, 360 media_asset.variant("360x360") - when 720 + when 540, 720 media_asset.variant("720x720") else raise NotImplementedError diff --git a/app/components/post_gallery_component/post_gallery_component.scss b/app/components/post_gallery_component/post_gallery_component.scss index 9e2927de8..86573eaf0 100644 --- a/app/components/post_gallery_component/post_gallery_component.scss +++ b/app/components/post_gallery_component/post_gallery_component.scss @@ -28,6 +28,7 @@ &.post-gallery-225 .post-preview-container { height: 225px; } &.post-gallery-270 .post-preview-container { height: 270px; } &.post-gallery-360 .post-preview-container { height: 360px; } + &.post-gallery-540 .post-preview-container { height: 540px; } &.post-gallery-720 .post-preview-container { height: 720px; } } @@ -38,6 +39,7 @@ &.post-gallery-270 .posts-container { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); } &.post-gallery-270w .posts-container { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); } &.post-gallery-360 .posts-container { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); } + &.post-gallery-540 .posts-container { grid-template-columns: repeat(auto-fill, minmax(540px, 1fr)); } &.post-gallery-720 .posts-container { grid-template-columns: repeat(auto-fill, minmax(720px, 1fr)); } @media screen and (max-width: 660px) { @@ -52,6 +54,7 @@ &.post-gallery-270 .posts-container { grid-template-columns: repeat(2, auto); } &.post-gallery-270w .posts-container { grid-template-columns: repeat(2, auto); } &.post-gallery-360 .posts-container { grid-template-columns: repeat(1, auto); } + &.post-gallery-540 .posts-container { grid-template-columns: repeat(1, auto); } &.post-gallery-720 .posts-container { grid-template-columns: repeat(1, auto); } } } diff --git a/app/components/post_preview_component.rb b/app/components/post_preview_component.rb index 05e302beb..33e730de1 100644 --- a/app/components/post_preview_component.rb +++ b/app/components/post_preview_component.rb @@ -5,7 +5,7 @@ class PostPreviewComponent < ApplicationComponent # PostGalleryComponent::DEFAULT_SIZE for the default size of thumbnails in a gallery. DEFAULT_SIZE = "180" - SIZES = %w[150 180 225 225w 270 270w 360 720] + SIZES = %w[150 180 225 225w 270 270w 360 540 720] with_collection_parameter :post @@ -66,7 +66,7 @@ class PostPreviewComponent < ApplicationComponent media_asset.variant("360x360") when "360" media_asset.variant("360x360") - when "720" + when "540", "720" media_asset.variant("720x720") else raise NotImplementedError diff --git a/app/components/post_preview_component/post_preview_component.scss b/app/components/post_preview_component/post_preview_component.scss index dd39c0572..926a3c618 100644 --- a/app/components/post_preview_component/post_preview_component.scss +++ b/app/components/post_preview_component/post_preview_component.scss @@ -36,6 +36,7 @@ article.post-preview { &.post-preview-270 { width: 270px; } &.post-preview-270w { width: 270px; } &.post-preview-360 { width: 360px; } + &.post-preview-540 { width: 540px; } &.post-preview-720 { width: 720px; } } @@ -46,6 +47,7 @@ article.post-preview { .post-preview-270 .post-preview-image { max-height: 270px; width: auto; } .post-preview-270w .post-preview-image { max-height: 360px; width: auto; } .post-preview-360 .post-preview-image { max-height: 360px; width: auto; } +.post-preview-540 .post-preview-image { max-height: 540px; width: auto; } .post-preview-720 .post-preview-image { max-height: 720px; width: auto; } .post-preview {