KevinMidboe/immich
1
0
Fork 0
mirror of https://github.com/KevinMidboe/immich.git synced 2025-10-29 17:40:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

Use table element with formatting similar to other pages

Browse Source
This commit is contained in:
Kevin
2023-08-14 19:19:39 +02:00
parent b4d7301017
commit 054f469b2f
1 changed files with 33 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
web/src/routes/(user)/albums/+page.svelte
View File

@@ -102,6 +102,10 @@
} }
}; };
const dateLocaleString = (dateString: string) => {
return new Date(dateString).toLocaleDateString($locale, dateFormats.album)
}
onMount(() => { onMount(() => {
removeAlbumsIfEmpty(); removeAlbumsIfEmpty();
}); });
@@ -142,34 +146,35 @@
{/each} {/each}
</div> </div>
{:else if $albumViewSettings.view === 'List'} {:else if $albumViewSettings.view === 'List'}
<div class="grid grid-cols-4 text-white mb-2"> <table class="mt-5 w-full text-left">
<span>Album title</span> <thead
<span>Assets</span> class="mb-4 flex h-12 w-full rounded-md border bg-gray-50 text-immich-primary dark:border-immich-dark-gray dark:bg-immich-dark-gray dark:text-immich-dark-primary"
<span>Updated date</span> >
<span>Created date</span> <tr class="flex w-full place-items-center">
</div> <th class="w-1/4 text-center text-sm font-medium">Album title</th>
<th class="w-1/4 text-center text-sm font-medium">Assets</th>
{#each $albums as album (album.id)} <th class="w-1/4 text-center text-sm font-medium">Updated date</th>
<a class="grid grid-cols-4" data-sveltekit-preload-data="hover" href={`albums/${album.id}`}> <th class="w-1/4 text-center text-sm font-medium">Created date</th>
<span </tr>
class="w-full truncate text-xl font-semibold text-immich-primary dark:text-immich-dark-primary" </thead>
data-testid="album-name" <tbody
title={album.albumName} class="block max-h-[320px] w-full overflow-y-auto rounded-md border dark:border-immich-dark-gray dark:text-immich-dark-fg"
> >
{album.albumName} {#each $albums as album (album.id)}
</span> <tr
class="flex h-[50px] w-full place-items-center text-center odd:bg-immich-gray even:bg-immich-bg odd:dark:bg-immich-dark-gray/75 even:dark:bg-immich-dark-gray/50"
<span> >
{album.assetCount} <td class="w-1/4 text-ellipsis px-2 text-md">{album.albumName}</td>
{album.assetCount == 1 ? `item` : `items`} <td class="w-1/4 text-ellipsis px-2 text-md">
</span> {album.assetCount}
{album.assetCount == 1 ? `item` : `items`}
<span>{new Date(album.updatedAt).toLocaleDateString($locale, dateFormats.album)}</span> </td>
<span>{new Date(album.createdAt).toLocaleDateString($locale, dateFormats.album)}</span> <td class="w-1/4 text-ellipsis px-2 text-md">{dateLocaleString(album.updatedAt)}</td>
<td class="w-1/4 text-ellipsis px-2 text-md">{dateLocaleString(album.createdAt)}</td>
<!-- <span>{album.startDate} - {album.endDate}</span> --> </tr>
</a> {/each}
{/each} </tbody>
</table>
{/if} {/if}
<!-- Empty Message --> <!-- Empty Message -->