github/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich synced 2025-06-07 18:42:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(web): center memory lane buttons (#18613)

Browse Source 
* fix(web): center memory lane buttons

* format
This commit is contained in:
Lukas 2025-05-25 21:33:25 +02:00 committed by GitHub
parent 40e7b58ba4
commit c4df96bd72
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 9 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
web/src/lib/components/photos-page/memory-lane.svelte
View File

@ -47,7 +47,10 @@
{#if canScrollLeft || canScrollRight} {#if canScrollLeft || canScrollRight}
<div class="sticky start-0 z-1"> <div class="sticky start-0 z-1">
{#if canScrollLeft} {#if canScrollLeft}
<div class="absolute start-4 top-24" transition:fade={{ duration: 200 }}> <div
class="absolute start-4 max-md:top-[75px] top-[108px] -translate-y-1/2"
transition:fade={{ duration: 200 }}
>
<button <button
type="button" type="button"
class="rounded-full border border-gray-500 bg-gray-100 p-2 text-gray-500 opacity-50 hover:opacity-100" class="rounded-full border border-gray-500 bg-gray-100 p-2 text-gray-500 opacity-50 hover:opacity-100"
@ -60,7 +63,10 @@
</div> </div>
{/if} {/if}
{#if canScrollRight} {#if canScrollRight}
<div class="absolute end-4 top-24 z-1" transition:fade={{ duration: 200 }}> <div
class="absolute end-4 max-md:top-[75px] top-[108px] -translate-y-1/2 z-1"
transition:fade={{ duration: 200 }}
>
<button <button
type="button" type="button"
class="rounded-full border border-gray-500 bg-gray-100 p-2 text-gray-500 opacity-50 hover:opacity-100" class="rounded-full border border-gray-500 bg-gray-100 p-2 text-gray-500 opacity-50 hover:opacity-100"
@ -77,7 +83,7 @@
<div class="inline-block" use:resizeObserver={({ width }) => (innerWidth = width)}> <div class="inline-block" use:resizeObserver={({ width }) => (innerWidth = width)}>
{#each memoryStore.memories as memory (memory.id)} {#each memoryStore.memories as memory (memory.id)}
<a <a
class="memory-card relative me-2 md:me-4 last:me-0 inline-block aspect-3/4 md:aspect-4/3 max-md:h-[150px] xl:aspect-video h-[215px] rounded-xl" class="memory-card relative me-2 md:me-4 last:me-0 inline-block aspect-3/4 md:aspect-4/3 max-md:h-[150px] xl:aspect-video h-[216px] rounded-xl"
href="{AppRoute.MEMORY}?{QueryParameter.ID}={memory.assets[0].id}" href="{AppRoute.MEMORY}?{QueryParameter.ID}={memory.assets[0].id}"
> >
<img <img