1
0
mirror of https://github.com/immich-app/immich.git synced 2024-11-28 09:33:27 +02:00

feat(web): add padding to memory asset navigation (#2822)

The bars are 2 pixels tall, which can be tricky to click. Additional padding
increases the height to 16 pixels, without changing how it looks, and makes for
much easier clicking.

In addition, remove the onDestroy lifecycle for the tween as it's not
necessary. It was a relic from using animation frames.
This commit is contained in:
Thomas 2023-06-16 23:37:11 +01:00 committed by GitHub
parent bff6914a73
commit 3512140148
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -1,7 +1,7 @@
<script lang="ts">
import { memoryStore } from '$lib/stores/memory.store';
import { DateTime } from 'luxon';
import { onDestroy, onMount } from 'svelte';
import { onMount } from 'svelte';
import { api } from '@api';
import { goto } from '$app/navigation';
import ControlAppBar from '$lib/components/shared-components/control-app-bar.svelte';
@ -72,8 +72,6 @@
// Progress should be reset when the current memory or asset changes.
$: memoryIndex, assetIndex, reset();
onDestroy(() => pause());
onMount(async () => {
if (!$memoryStore) {
const { data } = await api.assetApi.getMemoryLane({
@ -107,7 +105,7 @@
{#each currentMemory.assets as _, i}
<button
class="relative w-full"
class="relative w-full py-2"
on:click={() => goto(`?memory=${memoryIndex}&asset=${i}`)}
>
<span class="absolute left-0 w-full h-[2px] bg-gray-500" />