github-mirrors/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2026-05-18 03:10:24 +03:00
Code Issues Packages Projects Releases Wiki Activity

fix(web): transition bg and border-radius (#27438)

Browse Source 
* fix(web): transition bg and border-radius

* also transition thumb
This commit is contained in:
Mees Frensel
2026-04-01 16:34:49 +02:00
committed by GitHub
parent d1e2e8ab4e
commit da4b88fc14
1 changed files with 15 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/lib/components/assets/thumbnail/thumbnail.svelte
+15 -3
View File
@@ -208,7 +208,11 @@
</script> </script>
<div <div
class={['group focus-visible:outline-none flex overflow-hidden', backgroundColorClass, { 'rounded-xl': selected }]} class={[
'group focus-visible:outline-none flex overflow-hidden transition-[background-color,border-radius]',
backgroundColorClass,
{ 'rounded-xl': selected },
]}
style:width="{width}px" style:width="{width}px"
style:height="{height}px" style:height="{height}px"
onmouseenter={onMouseEnter} onmouseenter={onMouseEnter}
@@ -248,8 +252,16 @@
]} ]}
> >
<ImageThumbnail <ImageThumbnail
class={['absolute group-focus-visible:rounded-lg', { 'rounded-xl': selected }, imageClass]} class={[
brokenAssetClass={['z-1 absolute group-focus-visible:rounded-lg', { 'rounded-xl': selected }, brokenAssetClass]} 'absolute group-focus-visible:rounded-lg transition-[border-radius]',
{ 'rounded-xl': selected },
imageClass,
]}
brokenAssetClass={[
'z-1 absolute group-focus-visible:rounded-lg transition-[border-radius]',
{ 'rounded-xl': selected },
brokenAssetClass,
]}
url={getAssetMediaUrl({ id: asset.id, size: AssetMediaSize.Thumbnail, cacheKey: asset.thumbhash })} url={getAssetMediaUrl({ id: asset.id, size: AssetMediaSize.Thumbnail, cacheKey: asset.thumbhash })}
altText={$getAltText(asset)} altText={$getAltText(asset)}
widthStyle="{width}px" widthStyle="{width}px"