self-hosted/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2024-11-24 08:52:28 +02:00
Code Issues Releases Activity

chore(web): scrubber animation (#13936)

Browse Source 
* chore(web): scrubber animation

* minor styling
This commit is contained in:
Alex 2024-11-05 12:55:20 -06:00 committed by GitHub
parent b36de7d7d4
commit 06e0ba29f8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 4 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
web/src/lib/components/shared-components/scrubber/scrubber.svelte
View File

@ -6,7 +6,7 @@
import { onMount } from 'svelte';
import { isTimelineScrolling } from '$lib/stores/timeline.store';
import { parseUtcDate } from '$lib/utils/date-time';
import { fly } from 'svelte/transition';
import { fade, fly } from 'svelte/transition';
export let timelineTopOffset = 0;
export let timelineBottomOffset = 0;
@ -240,15 +240,13 @@
<!-- Scroll Position Indicator Line -->
{#if !isDragging}
<div
class="absolute right-0 {$isTimelineScrolling && formatedDate
? 'h-[0px]'
: 'h-[2px]'} w-10 bg-immich-primary dark:bg-immich-dark-primary"
class="absolute right-0 h-[2px] w-10 bg-immich-primary dark:bg-immich-dark-primary"
style:top="{scrollY + HOVER_DATE_HEIGHT}px"
>
{#if $isTimelineScrolling && formatedDate}
<p
transition:fly={{ y: -15, duration: 350 }}
class="truncate opacity-85 pointer-events-none absolute right-0 bottom-0 z-[100] min-w-20 max-w-64 w-fit rounded-tl-md border-b-2 border-immich-primary bg-immich-bg py-1 px-1 text-sm font-medium shadow-[0_0_8px_rgba(0,0,0,0.25)] dark:border-immich-dark-primary dark:bg-immich-dark-gray dark:text-immich-dark-fg"
transition:fade={{ duration: 200 }}
class="truncate pointer-events-none absolute right-0 bottom-0 z-[100] min-w-20 max-w-64 w-fit rounded-tl-md border-b-2 border-immich-primary bg-immich-bg/80 py-1 px-1 text-sm font-medium shadow-[0_0_8px_rgba(0,0,0,0.25)] dark:border-immich-dark-primary dark:bg-immich-dark-gray/80 dark:text-immich-dark-fg"
>
{formatedDate}
</p>