697691589e
Fix images on the upload page appearing stretched (having the incorrect aspect ratio) when the image is enlarged on Safari. The fix is to set `aspect-ratio` and `height: intrinsic` to ensure the image is the right size. I have no idea how this works or why it's necessary on Safari. Fixes https://danbooru.donmai.us/forum_posts/227099.
30 lines
1.6 KiB
Plaintext
30 lines
1.6 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; --media-asset-width: <%= image_width %>; --media-asset-height: <%= image_height %>;">
|
|
<%= 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 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>
|