fix: shrink memory lane, glitchy scrub, bad intersection

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

View File

@ -76,7 +76,7 @@
<div class="inline-block" use:resizeObserver={({ width }) => (innerWidth = width)}>
{#each memoryStore.memories as memory (memory.id)}
<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}"
>
<img
@ -85,7 +85,7 @@
alt={$t('memory_lane_title', { values: { title: $getAltText(memory.assets[0]) } })}
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)}
</p>
<div

View File

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

View File

@ -76,7 +76,7 @@ class IntersectingAsset {
}
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 positionTop = this.#group.absoluteDateGroupTop + this.position.top;
const positionBottom = positionTop + this.position.height;
@ -439,15 +439,7 @@ export class AssetBucket {
}
}
this.#bucketHeight = height;
if (store.topIntersectingBucket) {
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);
}
}
store.updateIntersections();
}
get bucketHeight() {
return this.#bucketHeight;