cjones/immich
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: z-index overuse (#18192)

Browse Source
This commit is contained in:
Daniel Dietzler
2025-05-13 16:10:05 +02:00
committed by GitHub
parent 48112d84a3
commit 989d9dbe51
49 changed files with 330 additions and 332 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/lib/components/photos-page/asset-date-group.svelte
+1 -1
View File
@@ -127,7 +127,7 @@
>
<!-- Date group title -->
<div
class="flex z-[100] pt-7 pb-5 max-md:pt-5 max-md:pb-3 h-6 place-items-center text-xs font-medium text-immich-fg dark:text-immich-dark-fg md:text-sm"
class="flex pt-7 pb-5 max-md:pt-5 max-md:pb-3 h-6 place-items-center text-xs font-medium text-immich-fg dark:text-immich-dark-fg md:text-sm"
style:width={dateGroup.width + 'px'}
>
{#if !singleSelect && ((hoveredDateGroup === dateGroup.groupTitle && isMouseOverGroup) || assetInteraction.selectedGroup.has(dateGroup.groupTitle))}
web/src/lib/components/photos-page/asset-grid.svelte
+1 -1
View File
@@ -5,6 +5,7 @@
import { shortcuts, type ShortcutOptions } from '$lib/actions/shortcut';
import type { Action } from '$lib/components/asset-viewer/actions/action';
import Skeleton from '$lib/components/photos-page/skeleton.svelte';
import Scrubber from '$lib/components/shared-components/scrubber/scrubber.svelte';
import { AppRoute, AssetAction } from '$lib/constants';
import { albumMapViewManager } from '$lib/managers/album-view-map.manager.svelte';
import { modalManager } from '$lib/managers/modal-manager.svelte';
@@ -26,7 +27,6 @@
import { onMount, type Snippet } from 'svelte';
import type { UpdatePayload } from 'vite';
import Portal from '../shared-components/portal/portal.svelte';
import Scrubber from '../shared-components/scrubber/scrubber.svelte';
import AssetDateGroup from './asset-date-group.svelte';
import DeleteAssetDialog from './delete-asset-dialog.svelte';
web/src/lib/components/photos-page/memory-lane.svelte
+5 -5
View File
@@ -44,9 +44,9 @@
onscroll={onScroll}
>
{#if canScrollLeft || canScrollRight}
<div class="sticky start-0 z-20">
<div class="sticky start-0">
{#if canScrollLeft}
<div class="absolute start-4 top-[6rem] z-20" transition:fade={{ duration: 200 }}>
<div class="absolute start-4 top-[6rem]" transition:fade={{ duration: 200 }}>
<button
type="button"
class="rounded-full border border-gray-500 bg-gray-100 p-2 text-gray-500 opacity-50 hover:opacity-100"
@@ -59,7 +59,7 @@
</div>
{/if}
{#if canScrollRight}
<div class="absolute end-4 top-[6rem] z-20" transition:fade={{ duration: 200 }}>
<div class="absolute end-4 top-[6rem]" transition:fade={{ duration: 200 }}>
<button
type="button"
class="rounded-full border border-gray-500 bg-gray-100 p-2 text-gray-500 opacity-50 hover:opacity-100"
@@ -85,11 +85,11 @@
alt={$t('memory_lane_title', { values: { title: $getAltText(memory.assets[0]) } })}
draggable="false"
/>
<p class="absolute bottom-2 start-4 z-10 text-lg text-white max-md:text-sm">
<p class="absolute bottom-2 start-4 text-lg text-white max-md:text-sm">
{$memoryLaneTitle(memory)}
</p>
<div
class="absolute start-0 top-0 z-0 h-full w-full rounded-xl bg-gradient-to-t from-black/40 via-transparent to-transparent transition-all hover:bg-black/20"
class="absolute start-0 top-0 h-full w-full rounded-xl bg-gradient-to-t from-black/40 via-transparent to-transparent transition-all hover:bg-black/20"
></div>
</a>
{/each}
web/src/lib/components/photos-page/skeleton.svelte
+1 -1
View File
@@ -9,7 +9,7 @@
<div class="overflow-clip" style:height={height + 'px'}>
<div
class="flex z-[100] pt-7 pb-5 h-6 place-items-center text-xs font-medium text-immich-fg bg-light dark:text-immich-dark-fg md:text-sm"
class="flex pt-7 pb-5 h-6 place-items-center text-xs font-medium text-immich-fg bg-light dark:text-immich-dark-fg md:text-sm"
>
{title}
</div>