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

media assets: redesign show page.

Browse Source 
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.
This commit is contained in:
evazion
2022-11-27 21:19:05 -06:00
parent 8a2f59172b
commit a5d4af332d
8 changed files with 258 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
app/components/media_asset_component/media_asset_component.html.erb
View File

@@ -1,15 +1,23 @@
<div class="media-asset-component relative fit-screen">
<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">
100%
<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>
<% if is_image? %>
<%= tag.img src: variant(:original).file_url, width: image_width, height: image_height, draggable: "false", class: "media-asset-image 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 %>
<%= footer %>
</div>