self-hosted/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2024-12-25 10:43:13 +02:00
Code Issues Releases Activity

fix(web): scrollbar not showing year (#4782)

Browse Source 
* fix(web): scrollbar not showing year

* grammar

* fix test
This commit is contained in:
Alex 2023-11-01 20:50:24 -05:00 committed by GitHub
parent d8903de92e
commit d5f8199655
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 15 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
web/src/lib/components/shared-components/scrollbar/scrollbar.svelte
View File

@ -96,6 +96,19 @@
{@const date = fromLocalDateTime(segment.timeGroup)} {@const date = fromLocalDateTime(segment.timeGroup)}
{@const year = date.year} {@const year = date.year}
{@const label = `${date.toLocaleString({ month: 'short' })} ${year}`} {@const label = `${date.toLocaleString({ month: 'short' })} ${year}`}
{@const lastGroupYear = fromLocalDateTime(segments[index - 1]?.timeGroup).year}
<!-- Check if the next three segments are different years then don't render
to avoid overlapse -->
{@const canRenderYear = segments.slice(index + 1, index + 3).reduce((_, curr) => {
const nextGroupYear = fromLocalDateTime(curr.timeGroup).year;
if (nextGroupYear !== year || curr.height < 1) {
return false;
}
return true;
}, true)}
<!-- svelte-ignore a11y-no-static-element-interactions --> <!-- svelte-ignore a11y-no-static-element-interactions -->
<div <div
@ -105,10 +118,10 @@
aria-label={segment.timeGroup + ' ' + segment.count} aria-label={segment.timeGroup + ' ' + segment.count}
on:mousemove={() => (hoverLabel = label)} on:mousemove={() => (hoverLabel = label)}
> >
{#if new Date(segments[index - 1]?.timeGroup).getFullYear() !== year} {#if lastGroupYear !== year && canRenderYear}
<div <div
aria-label={segment.timeGroup + ' ' + segment.count} aria-label={segment.timeGroup + ' ' + segment.count}
class="absolute right-0 z-10 pr-5 text-xs font-medium dark:text-immich-dark-fg" class="absolute right-0 z-10 pr-5 text-xs font-medium dark:text-immich-dark-fg font-mono"
> >
{year} {year}
</div> </div>