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

media assets: scroll to position on zoom.

Browse Source 
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.
This commit is contained in:
evazion
2022-12-09 18:18:42 -06:00
parent aefa7586fd
commit 16c9e906b2
4 changed files with 24 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/views/media_assets/show.html.erb
View File

@@ -2,7 +2,7 @@
<div id="a-show">
<div class="md:flex flex-row gap-4">
<div class="flex-1 w-full min-w-0">
<%= render MediaAssetComponent.new(media_asset: @media_asset, current_user: CurrentUser.user, outer_classes: "sticky h-full relative top-0", inner_classes: "mx-auto", dynamic_height: true) do |component| %>
<%= render MediaAssetComponent.new(media_asset: @media_asset, current_user: CurrentUser.user, outer_classes: "sticky h-full relative top-0", inner_classes: "mx-auto", dynamic_height: true, scroll_on_zoom: true) do |component| %>
<% component.with_header do %>
<div class="paginator top-0 w-full z-10">
<%= link_to chevron_left_icon, media_assets_path(search: { id: ">#{@media_asset.id}", order: "id_asc" }, limit: 1, redirect: true), class: "paginator-prev flex items-center justify-center text-xl absolute left-0 z-10", "data-shortcut": "a left" %>