c-l/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-01-17 01:06:46 +01:00
Code Releases Activity

fix(web): albums dark mode contrast + a11y issue (#9662)

Browse source
This commit is contained in:
Michel Heusschen 2024-05-22 14:14:53 +02:00 committed by GitHub
parent 06ce8247cc
commit ae21781442
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 30 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
web/src/lib/components/album-page/album-card-group.svelte
View file

@ -29,17 +29,19 @@
{#if group} {#if group}
<div class="grid"> <div class="grid">
<!-- svelte-ignore a11y-click-events-have-key-events --> <button
<!-- svelte-ignore a11y-no-noninteractive-element-interactions --> on:click={() => toggleAlbumGroupCollapsing(group.id)}
<p on:click={() => toggleAlbumGroupCollapsing(group.id)} class="w-fit mt-2 pt-2 pr-2 mb-2 hover:cursor-pointer"> class="w-fit mt-2 pt-2 pr-2 mb-2 dark:text-immich-dark-fg"
aria-expanded={!isCollapsed}
>
<Icon <Icon
path={mdiChevronRight} path={mdiChevronRight}
size="24" size="24"
class="inline-block -mt-2.5 transition-all duration-[250ms] {iconRotation}" class="inline-block -mt-2.5 transition-all duration-[250ms] {iconRotation}"
/> />
<span class="font-bold text-3xl text-black dark:text-white">{group.name}</span> <span class="font-bold text-3xl text-black dark:text-white">{group.name}</span>
<span class="ml-1.5 dark:text-immich-dark-fg">({albums.length} {albums.length > 1 ? 'albums' : 'album'})</span> <span class="ml-1.5">({albums.length} {albums.length > 1 ? 'albums' : 'album'})</span>
</p> </button>
<hr class="dark:border-immich-dark-gray" /> <hr class="dark:border-immich-dark-gray" />
</div> </div>
{/if} {/if}

2
web/src/lib/components/album-page/album-card.svelte
View file

@ -61,7 +61,7 @@
</p> </p>
{/if} {/if}
<span class="flex gap-2 text-sm" data-testid="album-details"> <span class="flex gap-2 text-sm dark:text-immich-dark-fg" data-testid="album-details">
{#if showItemCount} {#if showItemCount}
<p> <p>
{album.assetCount.toLocaleString($locale)} {album.assetCount.toLocaleString($locale)}

38
web/src/lib/components/album-page/albums-table.svelte
View file

@ -40,24 +40,30 @@
{#each groupedAlbums as albumGroup (albumGroup.id)} {#each groupedAlbums as albumGroup (albumGroup.id)}
{@const isCollapsed = isAlbumGroupCollapsed($albumViewSettings, albumGroup.id)} {@const isCollapsed = isAlbumGroupCollapsed($albumViewSettings, albumGroup.id)}
{@const iconRotation = isCollapsed ? 'rotate-0' : 'rotate-90'} {@const iconRotation = isCollapsed ? 'rotate-0' : 'rotate-90'}
<!-- svelte-ignore a11y-click-events-have-key-events --> <button
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
<tbody
class="block w-full overflow-y-auto rounded-md border dark:border-immich-dark-gray dark:text-immich-dark-fg mt-4 hover:cursor-pointer"
on:click={() => toggleAlbumGroupCollapsing(albumGroup.id)} on:click={() => toggleAlbumGroupCollapsing(albumGroup.id)}
class="flex w-full mt-4 rounded-md"
aria-expanded={!isCollapsed}
> >
<tr class="flex w-full place-items-center p-2 md:pl-5 md:pr-5 md:pt-3 md:pb-3"> <tbody
<td class="text-md text-left -mb-1"> class="block w-full overflow-y-auto rounded-md border dark:border-immich-dark-gray dark:text-immich-dark-fg"
<Icon >
path={mdiChevronRight} <tr class="flex w-full place-items-center p-2 md:pl-5 md:pr-5 md:pt-3 md:pb-3">
size="20" <td class="text-md text-left -mb-1">
class="inline-block -mt-2 transition-all duration-[250ms] {iconRotation}" <Icon
/> path={mdiChevronRight}
<span class="font-bold text-2xl">{albumGroup.name}</span> size="20"
<span class="ml-1.5">({albumGroup.albums.length} {albumGroup.albums.length > 1 ? 'albums' : 'album'})</span> class="inline-block -mt-2 transition-all duration-[250ms] {iconRotation}"
</td> />
</tr> <span class="font-bold text-2xl">{albumGroup.name}</span>
</tbody> <span class="ml-1.5">
({albumGroup.albums.length}
{albumGroup.albums.length > 1 ? 'albums' : 'album'})
</span>
</td>
</tr>
</tbody>
</button>
{#if !isCollapsed} {#if !isCollapsed}
<tbody <tbody
class="block w-full overflow-y-auto rounded-md border dark:border-immich-dark-gray dark:text-immich-dark-fg mt-4" class="block w-full overflow-y-auto rounded-md border dark:border-immich-dark-gray dark:text-immich-dark-fg mt-4"