Cutlery/immich
1
0
Fork 1
mirror of https://github.com/immich-app/immich.git synced 2025-06-01 20:54:22 -04:00
Code Issues Packages Projects Releases Wiki 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

56
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,11 +682,37 @@
{/if} {/if}
{/key} {/key}
{/if} {/if}
</div>
{#if $slideshowState === SlideshowState.None && showNavigation}
<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">
<Icon path={mdiChevronRight} size="36" ariaHidden />
</NavigationArea>
</div>
{/if}
{#if $slideshowState === SlideshowState.None && $isShowDetail}
<div
transition:fly={{ duration: 150 }}
id="detail-panel"
class="z-[1002] row-start-1 row-span-4 w-[360px] overflow-y-auto bg-immich-bg transition-all dark:border-l dark:border-l-immich-dark-gray dark:bg-immich-dark-bg"
translate="yes"
>
<DetailPanel
{asset}
currentAlbum={album}
albums={appearsInAlbums}
on:close={() => ($isShowDetail = false)}
on:closeViewer={handleCloseViewer}
/>
</div>
{/if}
{#if $stackAssetsStore.length > 0 && withStacked} {#if $stackAssetsStore.length > 0 && withStacked}
<div <div
id="stack-slideshow" 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" 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 transition-all">
{#each $stackAssetsStore as stackedAsset, index (stackedAsset.id)} {#each $stackAssetsStore as stackedAsset, index (stackedAsset.id)}
@ -720,32 +746,6 @@
</div> </div>
</div> </div>
{/if} {/if}
</div>
{#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">
<NavigationArea onClick={(e) => navigateAsset('next', e)} label="View next asset">
<Icon path={mdiChevronRight} size="36" ariaHidden />
</NavigationArea>
</div>
{/if}
{#if $slideshowState === SlideshowState.None && $isShowDetail}
<div
transition:fly={{ duration: 150 }}
id="detail-panel"
class="z-[1002] row-start-1 row-span-4 w-[360px] overflow-y-auto bg-immich-bg transition-all dark:border-l dark:border-l-immich-dark-gray dark:bg-immich-dark-bg"
translate="yes"
>
<DetailPanel
{asset}
currentAlbum={album}
albums={appearsInAlbums}
on:close={() => ($isShowDetail = false)}
on:closeViewer={handleCloseViewer}
/>
</div>
{/if}
{#if isShared && album && isShowActivity && $user} {#if isShared && album && isShowActivity && $user}
<div <div