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

posts: add hidden 540px thumbnail size option.

Browse Source 
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.
This commit is contained in:
evazion
2022-06-26 15:34:47 -05:00
parent 5795a651f1
commit f35bc60e51
5 changed files with 11 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
app/components/media_asset_gallery_component/media_asset_gallery_component.scss
View File

@@ -9,6 +9,7 @@
&.media-asset-gallery-225 .post-preview-container { height: 225px; } &.media-asset-gallery-225 .post-preview-container { height: 225px; }
&.media-asset-gallery-270 .post-preview-container { height: 270px; } &.media-asset-gallery-270 .post-preview-container { height: 270px; }
&.media-asset-gallery-360 .post-preview-container { height: 360px; } &.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; } &.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-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-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-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-asset-gallery-720 .media-assets-container { grid-template-columns: repeat(auto-fill, minmax(720px, 1fr)); }
@media screen and (max-width: 660px) { @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-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-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-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); } &.media-asset-gallery-720 .media-assets-container { grid-template-columns: repeat(1, auto); }
} }
} }

2
app/components/media_asset_preview_component.rb
View File

@@ -33,7 +33,7 @@ class MediaAssetPreviewComponent < ApplicationComponent
media_asset.variant("180x180") media_asset.variant("180x180")
when 225, 270, 360 when 225, 270, 360
media_asset.variant("360x360") media_asset.variant("360x360")
when 720 when 540, 720
media_asset.variant("720x720") media_asset.variant("720x720")
else else
raise NotImplementedError raise NotImplementedError

3
app/components/post_gallery_component/post_gallery_component.scss
View File

@@ -28,6 +28,7 @@
&.post-gallery-225 .post-preview-container { height: 225px; } &.post-gallery-225 .post-preview-container { height: 225px; }
&.post-gallery-270 .post-preview-container { height: 270px; } &.post-gallery-270 .post-preview-container { height: 270px; }
&.post-gallery-360 .post-preview-container { height: 360px; } &.post-gallery-360 .post-preview-container { height: 360px; }
&.post-gallery-540 .post-preview-container { height: 540px; }
&.post-gallery-720 .post-preview-container { height: 720px; } &.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-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-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-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)); } &.post-gallery-720 .posts-container { grid-template-columns: repeat(auto-fill, minmax(720px, 1fr)); }
@media screen and (max-width: 660px) { @media screen and (max-width: 660px) {
@@ -52,6 +54,7 @@
&.post-gallery-270 .posts-container { grid-template-columns: repeat(2, auto); } &.post-gallery-270 .posts-container { grid-template-columns: repeat(2, auto); }
&.post-gallery-270w .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-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); } &.post-gallery-720 .posts-container { grid-template-columns: repeat(1, auto); }
} }
} }

4
app/components/post_preview_component.rb
View File

@@ -5,7 +5,7 @@ class PostPreviewComponent < ApplicationComponent
# PostGalleryComponent::DEFAULT_SIZE for the default size of thumbnails in a gallery. # PostGalleryComponent::DEFAULT_SIZE for the default size of thumbnails in a gallery.
DEFAULT_SIZE = "180" 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 with_collection_parameter :post
@@ -66,7 +66,7 @@ class PostPreviewComponent < ApplicationComponent
media_asset.variant("360x360") media_asset.variant("360x360")
when "360" when "360"
media_asset.variant("360x360") media_asset.variant("360x360")
when "720" when "540", "720"
media_asset.variant("720x720") media_asset.variant("720x720")
else else
raise NotImplementedError raise NotImplementedError

2
app/components/post_preview_component/post_preview_component.scss
View File

@@ -36,6 +36,7 @@ article.post-preview {
&.post-preview-270 { width: 270px; } &.post-preview-270 { width: 270px; }
&.post-preview-270w { width: 270px; } &.post-preview-270w { width: 270px; }
&.post-preview-360 { width: 360px; } &.post-preview-360 { width: 360px; }
&.post-preview-540 { width: 540px; }
&.post-preview-720 { width: 720px; } &.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-270 .post-preview-image { max-height: 270px; width: auto; }
.post-preview-270w .post-preview-image { max-height: 360px; 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-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-720 .post-preview-image { max-height: 720px; width: auto; }
.post-preview { .post-preview {