Cutlery/immich
1
0
Fork 1
mirror of https://github.com/immich-app/immich.git synced 2025-07-09 03:04:16 -04:00
Code Issues Packages Projects Releases Wiki Activity

fix: shrink memory lane, glitchy scrub, bad intersection

Browse Source
This commit is contained in:
Min Idzelis 2025-03-25 00:28:12 +00:00
parent 4a0045db44
commit 22edfda105
3 changed files with 6 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -76,7 +76,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 mr-8 last:mr-0 inline-block aspect-[3/4] md:aspect-[4/3] xl:aspect-video h-[215px] rounded-xl" class="memory-card relative mr-8 last:mr-0 inline-block aspect-[3/4] md:aspect-[4/3] max-md:h-[150px] xl:aspect-video h-[215px] rounded-xl"
href="{AppRoute.MEMORY}?{QueryParameter.ID}={memory.assets[0].id}" href="{AppRoute.MEMORY}?{QueryParameter.ID}={memory.assets[0].id}"
> >
<img <img
@ -85,7 +85,7 @@
alt={$t('memory_lane_title', { values: { title: $getAltText(memory.assets[0]) } })} alt={$t('memory_lane_title', { values: { title: $getAltText(memory.assets[0]) } })}
draggable="false" draggable="false"
/> />
<p class="absolute bottom-2 left-4 z-10 text-lg text-white"> <p class="absolute bottom-2 left-4 z-10 text-lg text-white max-md:text-sm">
{$memoryLaneTitle(memory)} {$memoryLaneTitle(memory)}
</p> </p>
<div <div

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

@ -269,6 +269,7 @@
}; };
}); });
const usingMobileDevice = $derived(mobileDevice.hoverNone); const usingMobileDevice = $derived(mobileDevice.hoverNone);
const width = $derived(isDragging ? '100vw' : usingMobileDevice ? '20px' : '60px');
</script> </script>
<svelte:window <svelte:window
@ -293,7 +294,7 @@
class="absolute right-0 z-[1] select-none bg-immich-bg hover:cursor-row-resize" class="absolute right-0 z-[1] select-none bg-immich-bg hover:cursor-row-resize"
style:padding-top={HOVER_DATE_HEIGHT + 'px'} style:padding-top={HOVER_DATE_HEIGHT + 'px'}
style:padding-bottom={HOVER_DATE_HEIGHT + 'px'} style:padding-bottom={HOVER_DATE_HEIGHT + 'px'}
style:width={isDragging ? '100vw' : '60px'} style:width
style:height={height + 'px'} style:height={height + 'px'}
style:background-color={isDragging ? 'transparent' : 'transparent'} style:background-color={isDragging ? 'transparent' : 'transparent'}
bind:this={scrollBar} bind:this={scrollBar}

12
web/src/lib/stores/assets-store.svelte.ts
View File

@ -76,7 +76,7 @@ class IntersectingAsset {
} }
const store = this.#group.bucket.store; const store = this.#group.bucket.store;
const topWindow = store.visibleWindow.top + HEADER - INTERSECTION_EXPAND_TOP; const topWindow = store.visibleWindow.top - HEADER - INTERSECTION_EXPAND_TOP;
const bottomWindow = store.visibleWindow.bottom + HEADER + INTERSECTION_EXPAND_BOTTOM; const bottomWindow = store.visibleWindow.bottom + HEADER + INTERSECTION_EXPAND_BOTTOM;
const positionTop = this.#group.absoluteDateGroupTop + this.position.top; const positionTop = this.#group.absoluteDateGroupTop + this.position.top;
const positionBottom = positionTop + this.position.height; const positionBottom = positionTop + this.position.height;
@ -439,15 +439,7 @@ export class AssetBucket {
} }
} }
this.#bucketHeight = height; this.#bucketHeight = height;
if (store.topIntersectingBucket) { store.updateIntersections();
const currentIndex = store.buckets.indexOf(store.topIntersectingBucket);
// if the bucket is 'before' the last intersecting bucket in the sliding window
// then adjust the scroll position by the delta, to compensate for the bucket
// size adjustment
if (currentIndex > 0 && index <= currentIndex) {
store.compensateScrollCallback?.(bucketHeightDelta);
}
}
} }
get bucketHeight() { get bucketHeight() {
return this.#bucketHeight; return this.#bucketHeight;