helpy4/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich synced 2025-11-07 17:27:20 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix(web): fix thumbnail hover link position (#16762)

Browse source 
* fix(web): don't show a scrollbar when hovering over the last row of images on the search page

* Format code

* Fix asset selection z-index

* Remove anchor overlay on mouseover

* Fix a test

* Fix merge

* Fix overlays

* fix merge

* fix stack thumbs in asset viewer

* fix dimmed bounds, animation

* lint

---------

Co-authored-by: Min Idzelis <min123@gmail.com>
This commit is contained in:
Snowknight26 2025-04-02 10:30:41 -05:00 • committed by GitHub
parent 5a456ef277
commit 4336afd6bf
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 125 additions and 117 deletions
Download patch file Download diff file Expand all files Collapse all files

18
web/src/lib/components/asset-viewer/asset-viewer.svelte
View file

@ -592,29 +592,27 @@
id="stack-slideshow"
class="z-[1002] flex place-item-center place-content-center absolute bottom-0 w-full col-span-4 col-start-1 overflow-x-auto horizontal-scrollbar"
>
<div class="relative w-full whitespace-nowrap transition-all">
<div class="relative w-full whitespace-nowrap">
{#each stackedAssets as stackedAsset (stackedAsset.id)}
<div
class="{stackedAsset.id == asset.id
? '-translate-y-[1px]'
: '-translate-y-0'} inline-block px-1 transition-transform"
class={['inline-block px-1 relative transition-all pb-2']}
style:bottom={stackedAsset.id === asset.id ? '0' : '-10px'}
>
<Thumbnail
class="{stackedAsset.id == asset.id
? 'bg-transparent border-2 border-white'
: 'bg-gray-700/40'} inline-block hover:bg-transparent"
imageClass={{ 'border-2 border-white': stackedAsset.id === asset.id }}
dimmed={stackedAsset.id !== asset.id}
asset={stackedAsset}
onClick={(stackedAsset) => {
asset = stackedAsset;
}}
onMouseEvent={({ isMouseOver }) => handleStackedAssetMouseEvent(isMouseOver, stackedAsset)}
disableMouseOver
readonly
thumbnailSize={stackedAsset.id == asset.id ? 65 : 60}
thumbnailSize={stackedAsset.id === asset.id ? 65 : 60}
showStackedIcon={false}
disableLinkMouseOver
/>
{#if stackedAsset.id == asset.id}
{#if stackedAsset.id === asset.id}
<div class="w-full flex place-items-center place-content-center">
<div class="w-2 h-2 bg-white rounded-full flex mt-[2px]"></div>
</div>