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

feat(web): album card hover styling (#2424)

Browse source 
* feat(web): album card hover styling

* feedback

* fix delete button not shown

* better color
This commit is contained in:
Alex 2023-05-11 11:50:48 -05:00 committed by GitHub
parent 2c7821e5e6
commit f961acdf0c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 10 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -61,7 +61,7 @@
</script>
<div
class="hover:cursor-pointer mt-4 relative"
class="group hover:cursor-pointer mt-4 border-[3px] border-transparent dark:hover:border-immich-dark-primary/75 hover:border-immich-primary/75 rounded-3xl p-5 relative"
on:click={() => dispatchClick('click', album)}
on:keydown={() => dispatchClick('click', album)}
data-testid="album-card"
@ -69,32 +69,34 @@
<!-- svelte-ignore a11y-click-events-have-key-events -->
<div
id={`icon-${album.id}`}
class="absolute top-2 right-2"
class="absolute top-6 right-6 z-10"
on:click|stopPropagation|preventDefault={showAlbumContextMenu}
data-testid="context-button-parent"
>
<CircleIconButton logo={DotsVertical} size={'20'} hoverColor={'rgba(95,99,104, 0.5)'} />
<CircleIconButton logo={DotsVertical} size={'20'} />
</div>
<div class={`aspect-square z-[-1]`}>
<div class={`aspect-square relative`}>
<img
src={imageData}
alt={album.id}
class={`object-cover h-full w-full transition-all z-0 rounded-xl duration-300 hover:shadow-lg`}
class={`object-cover h-full w-full transition-all z-0 rounded-3xl duration-300 hover:shadow-lg`}
data-testid="album-image"
draggable="false"
/>
<div class="w-full h-full absolute top-0 rounded-3xl group-hover:bg-indigo-800/25" />
</div>
<div class="mt-4">
<p
class="text-sm font-medium text-gray-800 dark:text-immich-dark-primary"
class="text-xl font-semibold dark:text-immich-dark-primary text-immich-primary w-full truncate"
data-testid="album-name"
title={album.albumName}
>
{album.albumName}
</p>
<span class="text-xs flex gap-2 dark:text-immich-dark-fg" data-testid="album-details">
<span class="text-sm flex gap-2 dark:text-immich-dark-fg" data-testid="album-details">
<p>
{album.assetCount.toLocaleString($locale)}
{album.assetCount == 1 ? `item` : `items`}

2
web/src/routes/(user)/albums/+page.svelte
View file

@ -62,7 +62,7 @@
</div>
<!-- Album Card -->
<div class="grid grid-cols-[repeat(auto-fill,minmax(15rem,1fr))] gap-8">
<div class="grid grid-cols-[repeat(auto-fill,minmax(15rem,1fr))]">
{#each $albums as album (album.id)}
<a
data-sveltekit-preload-data="hover"