a5d4af332d
Redesign the media assets show page to: * Include sidebar with AI tags and image metadata. * Include next and previous image buttons. * Make the image use 100% of the available screen space and to scroll with the window.
24 lines
1.3 KiB
Plaintext
24 lines
1.3 KiB
Plaintext
<div class="media-asset-container media-asset-container-fit-height flex flex-col <%= outer_classes %>" data-dynamic-height="<%= dynamic_height %>" style="--header-visible-height: 0px">
|
|
<%= header %>
|
|
|
|
<div class="media-asset-component relative max-h-inherit overflow-hidden <%= inner_classes %>">
|
|
<div class="media-asset-zoom-level hidden absolute top-0.5 left-0.5 p-1 m-0.5 leading-none rounded text-xs font-arial font-bold pointer-events-none transition-opacity">
|
|
100%
|
|
</div>
|
|
|
|
<% if !policy(media_asset).can_see_image? %>
|
|
<p>Image unavailable.</p>
|
|
<% elsif is_image? %>
|
|
<%= tag.img src: variant(:original).file_url, width: image_width, height: image_height, draggable: "false", class: "media-asset-image max-h-inherit max-w-full h-full w-auto select-none" -%>
|
|
<% elsif is_video? %>
|
|
<%= tag.video src: variant(:original).file_url, width: image_width, height: image_height, autoplay: true, loop: true, controls: "controls" %>
|
|
<% elsif is_ugoira? %>
|
|
<%= tag.video src: variant(:sample).file_url, width: image_width, height: image_height, autoplay: true, loop: true, controls: "controls" %>
|
|
<% elsif is_flash? %>
|
|
<%= tag.div class: "ruffle-container", "data-swf": variant(:original).file_url %>
|
|
<% end %>
|
|
</div>
|
|
|
|
<%= footer %>
|
|
</div>
|