16c9e906b2
On the media asset show page, make it so that when you click an image to zoom in, the page scrolls to the clicked position. For example, if you click on the bottom of an image, scroll down so that the bottom of the zoomed image is in view. This makes it easier to view very tall images by letting you click on the part of the image you want to see.
30 lines
1.7 KiB
Plaintext
30 lines
1.7 KiB
Plaintext
<div class="media-asset-component media-asset-component-fit-height media-asset-component-fit-width flex flex-col <%= outer_classes %>" data-dynamic-height="<%= dynamic_height %>" data-scroll-on-zoom="<%= scroll_on_zoom %>" style="--header-visible-height: 0px; --media-asset-width: <%= image_width %>; --media-asset-height: <%= image_height %>;">
|
|
<%= header %>
|
|
|
|
<div class="media-asset-container 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 media_asset.removed? %>
|
|
<p>Image deleted.</p>
|
|
<% elsif media_asset.processing? %>
|
|
<p><%= spinner_icon(class: "h-8") %></p>
|
|
<% elsif media_asset.failed? %>
|
|
<p>Upload failed.</p>
|
|
<% elsif !media_asset.active? || !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" -%>
|
|
<% elsif is_video? %>
|
|
<%= tag.video src: variant(:original).file_url, width: image_width, height: image_height, autoplay: true, loop: true, controls: "controls", class: "media-asset-image" %>
|
|
<% elsif is_ugoira? %>
|
|
<%= tag.video src: variant(:sample).file_url, width: image_width, height: image_height, autoplay: true, loop: true, controls: "controls", class: "media-asset-image" %>
|
|
<% elsif is_flash? %>
|
|
<%= tag.div "data-swf": variant(:original).file_url, class: "media-asset-image ruffle-container" %>
|
|
<% end %>
|
|
</div>
|
|
|
|
<%= footer %>
|
|
</div>
|