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

media assets: add thumbnail view to /media_assets page.

Browse Source 
Add a thumbnail view to the /media_assets page. This page lets you see
all images uploaded to Danbooru by all users (although you can't see who
the uploader is). Also add a link to this page in the subnav bar on the
upload page.
This commit is contained in:
evazion
2022-02-01 23:43:12 -06:00
parent 317d369c6a
commit 92a4d045e2
13 changed files with 140 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
app/components/media_asset_gallery_component.rb Normal file
View File

@@ -0,0 +1,17 @@
# frozen_string_literal: true
class MediaAssetGalleryComponent < ApplicationComponent
DEFAULT_SIZE = 180
attr_reader :inline, :size, :options
renders_many :media_assets, MediaAssetPreviewComponent
renders_one :footer
def initialize(inline: false, size: DEFAULT_SIZE, **options)
super
@inline = inline
@size = size
@option = options
end
end

13
app/components/media_asset_gallery_component/media_asset_gallery_component.html.erb Normal file
View File

@@ -0,0 +1,13 @@
<div class="media-asset-gallery media-asset-gallery-<%= size %>">
<% if media_assets.empty? %>
<p>No results found.</p>
<% else %>
<div class="media-assets-container grid justify-items-center items-end">
<% media_assets.each do |media_asset| -%>
<% %><%= media_asset -%>
<% end -%>
</div>
<% end %>
<%= footer %>
</div>

34
app/components/media_asset_gallery_component/media_asset_gallery_component.scss Normal file
View File

@@ -0,0 +1,34 @@
.media-asset-gallery {
.media-assets-container {
gap: 0.5rem;
}
@media screen and (min-width: 660px) {
&.media-asset-gallery-150 .post-preview-container { height: 150px; }
&.media-asset-gallery-180 .post-preview-container { height: 180px; }
&.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-720 .post-preview-container { height: 720px; }
}
&.media-asset-gallery-150 .media-assets-container { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
&.media-asset-gallery-180 .media-assets-container { grid-template-columns: repeat(auto-fill, minmax(180px, 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-360 .media-assets-container { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }
&.media-asset-gallery-720 .media-assets-container { grid-template-columns: repeat(auto-fill, minmax(720px, 1fr)); }
@media screen and (max-width: 660px) {
.media-assets-container {
gap: 0.25rem;
}
&.media-asset-gallery-150 .media-assets-container { grid-template-columns: repeat(3, minmax(0, 150px)); }
&.media-asset-gallery-180 .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-360 .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

@@ -8,6 +8,8 @@ class MediaAssetPreviewComponent < ApplicationComponent
attr_reader :media_asset, :size, :fit, :link_target, :shrink_to_fit, :save_data
delegate :duration_to_hhmmss, :sound_icon, to: :helpers
renders_one :footer
# @param media_asset [MediaAsset] The media asset to show the thumbnail for.
# @param size [String] The size of the thumbnail. One of 150, 180, 225, 270, or 360.
# @param link_target [ApplicationRecord] What the thumbnail links to (default: the media asset).

6
app/components/media_asset_preview_component/media_asset_preview_component.html.erb
View File

@@ -1,5 +1,5 @@
<%= tag.article class: "media-asset-preview media-asset-preview-#{size}" do -%>
<%= link_to link_target, class: "inline-block relative", draggable: "false" do -%>
<%= link_to link_target, class: "inline-block relative flex justify-center", draggable: "false" do -%>
<% if media_asset.is_animated? %>
<div class="media-asset-animation-icon absolute top-0.5 left-0.5 p-0.5 m-0.5 leading-none rounded text-xs font-arial font-bold">
<span class="media-asset-duration align-middle">
@@ -21,4 +21,8 @@
<%= tag.img src: variant.file_url, width: variant.width, height: variant.height, class: "media-asset-preview-image w-auto h-auto max-h-#{size}px #{"max-w-full" if shrink_to_fit}", crossorigin: "anonymous", draggable: "false" -%>
</picture>
<% end %>
<div>
<%= footer %>
</div>
<% end %>