ai tags: adjust thumbnail layout.
This commit is contained in:
@@ -5,7 +5,7 @@
|
|||||||
class MediaAssetPreviewComponent < ApplicationComponent
|
class MediaAssetPreviewComponent < ApplicationComponent
|
||||||
DEFAULT_SIZE = 180
|
DEFAULT_SIZE = 180
|
||||||
|
|
||||||
attr_reader :media_asset, :size, :link_target, :classes, :html, :save_data
|
attr_reader :media_asset, :size, :link_target, :classes, :inner_classes, :html, :save_data
|
||||||
delegate :duration_to_hhmmss, :sound_icon, to: :helpers
|
delegate :duration_to_hhmmss, :sound_icon, to: :helpers
|
||||||
|
|
||||||
renders_one :header
|
renders_one :header
|
||||||
@@ -17,12 +17,13 @@ class MediaAssetPreviewComponent < ApplicationComponent
|
|||||||
# @param link_target [ApplicationRecord] What the thumbnail links to (default: the media asset).
|
# @param link_target [ApplicationRecord] What the thumbnail links to (default: the media asset).
|
||||||
# @param save_data [Boolean] If true, save data by not serving higher quality thumbnails
|
# @param save_data [Boolean] If true, save data by not serving higher quality thumbnails
|
||||||
# on 2x pixel density displays. Default: false.
|
# on 2x pixel density displays. Default: false.
|
||||||
def initialize(media_asset:, size: DEFAULT_SIZE, link_target: media_asset, classes: [], html: {}, save_data: CurrentUser.save_data)
|
def initialize(media_asset:, size: DEFAULT_SIZE, link_target: media_asset, classes: [], inner_classes: [], html: {}, save_data: CurrentUser.save_data)
|
||||||
super
|
super
|
||||||
@media_asset = media_asset
|
@media_asset = media_asset
|
||||||
@size = size.presence&.to_i || DEFAULT_SIZE
|
@size = size.presence&.to_i || DEFAULT_SIZE
|
||||||
@link_target = link_target
|
@link_target = link_target
|
||||||
@classes = classes
|
@classes = classes
|
||||||
|
@inner_classes = inner_classes
|
||||||
@html = html
|
@html = html
|
||||||
@save_data = save_data
|
@save_data = save_data
|
||||||
end
|
end
|
||||||
|
|||||||
@@ -1,4 +1,5 @@
|
|||||||
<%= tag.article class: ["media-asset-preview media-asset-preview-#{size}", *classes], **html do -%>
|
<%= tag.article class: ["media-asset-preview media-asset-preview-#{size}", *classes], **html do -%>
|
||||||
|
<%= tag.div class: inner_classes do %>
|
||||||
<%= link_to link_target, class: "inline-block relative", draggable: "false" do -%>
|
<%= link_to link_target, class: "inline-block relative", draggable: "false" do -%>
|
||||||
<%= header %>
|
<%= header %>
|
||||||
|
|
||||||
@@ -39,6 +40,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<% end %>
|
<% end %>
|
||||||
<% end %>
|
<% end %>
|
||||||
|
<% end %>
|
||||||
|
|
||||||
<%= footer %>
|
<%= footer %>
|
||||||
<% end %>
|
<% end %>
|
||||||
|
|||||||
@@ -1,26 +1,17 @@
|
|||||||
<%= render(MediaAssetPreviewComponent.new(media_asset: media_asset, size: size, link_target: media_asset.post || media_asset, classes: "flex flex-col items-center w-full h-full border rounded pb-2", html: { "data-tag-id": ai_tag.tag_id, **data_attributes_for(media_asset) })) do |preview| %>
|
<%= render(MediaAssetPreviewComponent.new(media_asset: media_asset, size: size, link_target: media_asset.post || media_asset, classes: "flex flex-col items-center w-full h-full border rounded pb-2", inner_classes: "flex-auto flex items-center", html: { "data-tag-id": ai_tag.tag_id, **data_attributes_for(media_asset) })) do |preview| %>
|
||||||
<% preview.footer do %>
|
<% preview.footer do %>
|
||||||
<div class="text-center text-xs flex flex-col px-2 h-full justify-end">
|
<div class="text-center text-xs leading-none px-2 w-full mt-2">
|
||||||
<div class="mb-2">
|
<div class="truncate mb-2">
|
||||||
<% if media_asset.post.present? %>
|
<%= link_to "#{ai_tag.tag.pretty_name}", ai_tags_path(search: search_params.merge(tag_name: ai_tag.tag.name)), class: "tag-type-#{ai_tag.tag.category}", "data-tag-name": ai_tag.tag.name, title: ai_tag.tag.pretty_name %>
|
||||||
<div>
|
<%= link_to "#{ai_tag.score}%", ai_tags_path(search: search_params.merge(tag_name: ai_tag.tag.name, score: ">=#{ai_tag.score}")), class: "block tag-type-#{ai_tag.tag.category}", "data-tag-name": ai_tag.tag.name %>
|
||||||
<%= link_to "post ##{media_asset.post.id}", media_asset.post %>
|
|
||||||
<%= link_to "»", ai_tags_path(search: search_params.merge(media_asset_id: ai_tag.media_asset_id)) %>
|
|
||||||
</div>
|
|
||||||
<% end %>
|
|
||||||
|
|
||||||
<div class="leading-none">
|
|
||||||
<%= link_to ai_tag.tag.pretty_name, ai_tags_path(search: search_params.merge(tag_name: ai_tag.tag.name)), class: "tag-type-#{ai_tag.tag.category}", "data-tag-name": ai_tag.tag.name %>
|
|
||||||
<%= link_to "#{ai_tag.score}%", ai_tags_path(search: search_params.merge(tag_name: ai_tag.tag.name, score: ">=#{ai_tag.score}")), class: "tag-type-#{ai_tag.tag.category}", "data-tag-name": ai_tag.tag.name %>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<% if ai_tag.post.nil? || !policy(ai_tag).update? %>
|
<% if ai_tag.post.nil? || !policy(ai_tag).update? %>
|
||||||
<%= button_to "Add", nil, class: "button-primary button-sm", disabled: true %>
|
<%= button_to "Add", nil, class: "button-primary button-sm", disabled: true %>
|
||||||
<% elsif ai_tag.post_tagged? %>
|
<% elsif ai_tag.post_tagged? %>
|
||||||
<%= button_to "Remove", tag_ai_tag_path(media_asset_id: ai_tag.media_asset, tag_id: ai_tag.tag), remote: true, method: :put, params: { mode: "remove" }, class: "button-outline-danger button-sm" %>
|
<%= button_to "Remove", tag_ai_tag_path(media_asset_id: ai_tag.media_asset, tag_id: ai_tag.tag), remote: true, method: :put, params: { mode: "remove" }, class: "button-outline-danger button-sm", title: "Remove the tag from the post" %>
|
||||||
<% else %>
|
<% else %>
|
||||||
<%= button_to "Add", tag_ai_tag_path(media_asset_id: ai_tag.media_asset, tag_id: ai_tag.tag), remote: true, method: :put, params: { mode: "add" }, class: "button-primary button-sm" %>
|
<%= button_to "Add", tag_ai_tag_path(media_asset_id: ai_tag.media_asset, tag_id: ai_tag.tag), remote: true, method: :put, params: { mode: "add" }, class: "button-primary button-sm", title: "Add the tag to the post" %>
|
||||||
<% end %>
|
<% end %>
|
||||||
</div>
|
</div>
|
||||||
<% end %>
|
<% end %>
|
||||||
|
|||||||
Reference in New Issue
Block a user