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

feat(web): improved album view UI & album card UI (#6822)

Browse Source 
* Modified album card to show gray background instead of purple outline on hover

* Expanded margins in album viewer

* Applied prettier to modified files
This commit is contained in:
Andrew Roberts 2024-02-01 18:50:14 -08:00 committed by GitHub
parent a8dcfe4bd2
commit e4d0560d49
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 6 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -60,7 +60,7 @@
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div
class="group relative mt-4 rounded-3xl border-[3px] border-transparent p-5 hover:cursor-pointer hover:border-immich-primary/75 dark:hover:border-immich-dark-primary/75"
class="group relative mt-4 rounded-2xl border-[1px] border-transparent p-5 hover:cursor-pointer hover:bg-gray-100 hover:border-gray-200 dark:hover:border-gray-800 dark:hover:bg-gray-900"
on:click={() => dispatchClick('click', album)}
on:keydown={() => dispatchClick('click', album)}
on:mouseenter={() => (showVerticalDots = true)}
@ -87,20 +87,16 @@
loading={preload ? 'eager' : 'lazy'}
src={imageData}
alt={album.id}
class={`z-0 h-full w-full rounded-3xl object-cover transition-all duration-300 hover:shadow-lg`}
class={`z-0 h-full w-full rounded-xl object-cover transition-all duration-300 hover:shadow-lg`}
data-testid="album-image"
draggable="false"
/>
<div
class="absolute top-0 h-full w-full rounded-3xl {isSharingView
? 'group-hover:bg-yellow-800/25'
: 'group-hover:bg-indigo-800/25'} "
/>
<div class="absolute top-0 h-full w-full rounded-3xl" />
</div>
<div class="mt-4">
<p
class="w-full truncate text-lg font-semibold text-immich-primary dark:text-immich-dark-primary"
class="w-full truncate text-lg font-semibold text-black dark:text-white group-hover:text-immich-primary dark:group-hover:text-immich-dark-primary"
data-testid="album-name"
title={album.albumName}
>

4
web/src/lib/components/album-page/album-viewer.svelte
View File

@ -137,9 +137,7 @@
{/if}
</header>
<main
class="relative h-screen overflow-hidden bg-immich-bg px-6 pt-[var(--navbar-height)] dark:bg-immich-dark-bg sm:px-12 md:px-24 lg:px-40"
>
<main class="relative h-screen overflow-hidden bg-immich-bg px-6 pt-[var(--navbar-height)] dark:bg-immich-dark-bg">
<AssetGrid {album} {assetStore} {assetInteractionStore}>
<section class="pt-24">
<!-- ALBUM TITLE -->

2
web/src/routes/(user)/albums/[albumId]/+page.svelte
View File

@ -572,7 +572,7 @@
{/if}
<main
class="relative h-screen overflow-hidden bg-immich-bg px-6 pt-[var(--navbar-height)] dark:bg-immich-dark-bg sm:px-12 md:px-24 lg:px-40"
class="relative h-screen overflow-hidden bg-immich-bg px-6 pt-[var(--navbar-height)] dark:bg-immich-dark-bg"
style={`width:${assetGridWidth}px`}
>
{#if viewMode === ViewMode.SELECT_ASSETS}