c-l/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-01-17 01:06:46 +01:00
Code Releases Activity

fix(web): Move stack slideshow container higher in the DOM (#8998)

Browse source 
Move stack slideshow container higher in the DOM
This commit is contained in:
Snowknight26 2024-04-24 23:19:23 -05:00 committed by GitHub
parent a90138e42e
commit 0b3373c552
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 40 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -594,7 +594,7 @@
{/if} {/if}
{#if $slideshowState === SlideshowState.None && showNavigation} {#if $slideshowState === SlideshowState.None && showNavigation}
<div class="z-[1001] column-span-1 col-start-1 row-span-1 row-start-2 mb-[60px] justify-self-start"> <div class="z-[1001] column-span-1 col-start-1 row-span-1 row-start-2 justify-self-start">
<NavigationArea onClick={(e) => navigateAsset('previous', e)} label="View previous asset"> <NavigationArea onClick={(e) => navigateAsset('previous', e)} label="View previous asset">
<Icon path={mdiChevronLeft} size="36" ariaHidden /> <Icon path={mdiChevronLeft} size="36" ariaHidden />
</NavigationArea> </NavigationArea>
@ -682,48 +682,10 @@
{/if} {/if}
{/key} {/key}
{/if} {/if}
{#if $stackAssetsStore.length > 0 && withStacked}
<div
id="stack-slideshow"
class="z-[1005] flex place-item-center place-content-center absolute bottom-0 w-full col-span-4 col-start-1 mb-1 overflow-x-auto horizontal-scrollbar"
>
<div class="relative w-full whitespace-nowrap transition-all">
{#each $stackAssetsStore as stackedAsset, index (stackedAsset.id)}
<div
class="{stackedAsset.id == asset.id
? '-translate-y-[1px]'
: '-translate-y-0'} inline-block px-1 transition-transform"
>
<Thumbnail
class="{stackedAsset.id == asset.id
? 'bg-transparent border-2 border-white'
: 'bg-gray-700/40'} inline-block hover:bg-transparent"
asset={stackedAsset}
onClick={() => {
asset = stackedAsset;
preloadAssets = index + 1 >= $stackAssetsStore.length ? [] : [$stackAssetsStore[index + 1]];
}}
on:mouse-event={(e) => handleStackedAssetMouseEvent(e, stackedAsset)}
readonly
thumbnailSize={stackedAsset.id == asset.id ? 65 : 60}
showStackedIcon={false}
/>
{#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>
{/if}
</div>
{/each}
</div>
</div>
{/if}
</div> </div>
{#if $slideshowState === SlideshowState.None && showNavigation} {#if $slideshowState === SlideshowState.None && showNavigation}
<div class="z-[1001] col-span-1 col-start-4 row-span-1 row-start-2 mb-[60px] justify-self-end"> <div class="z-[1001] col-span-1 col-start-4 row-span-1 row-start-2 justify-self-end">
<NavigationArea onClick={(e) => navigateAsset('next', e)} label="View next asset"> <NavigationArea onClick={(e) => navigateAsset('next', e)} label="View next asset">
<Icon path={mdiChevronRight} size="36" ariaHidden /> <Icon path={mdiChevronRight} size="36" ariaHidden />
</NavigationArea> </NavigationArea>
@ -747,6 +709,44 @@
</div> </div>
{/if} {/if}
{#if $stackAssetsStore.length > 0 && withStacked}
<div
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">
{#each $stackAssetsStore as stackedAsset, index (stackedAsset.id)}
<div
class="{stackedAsset.id == asset.id
? '-translate-y-[1px]'
: '-translate-y-0'} inline-block px-1 transition-transform"
>
<Thumbnail
class="{stackedAsset.id == asset.id
? 'bg-transparent border-2 border-white'
: 'bg-gray-700/40'} inline-block hover:bg-transparent"
asset={stackedAsset}
onClick={() => {
asset = stackedAsset;
preloadAssets = index + 1 >= $stackAssetsStore.length ? [] : [$stackAssetsStore[index + 1]];
}}
on:mouse-event={(e) => handleStackedAssetMouseEvent(e, stackedAsset)}
readonly
thumbnailSize={stackedAsset.id == asset.id ? 65 : 60}
showStackedIcon={false}
/>
{#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>
{/if}
</div>
{/each}
</div>
</div>
{/if}
{#if isShared && album && isShowActivity && $user} {#if isShared && album && isShowActivity && $user}
<div <div
transition:fly={{ duration: 150 }} transition:fly={{ duration: 150 }}