c-l/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-01-04 02:46:47 +01:00
Code 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 --> <!-- svelte-ignore a11y-no-static-element-interactions -->
<div <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:click={() => dispatchClick('click', album)}
on:keydown={() => dispatchClick('click', album)} on:keydown={() => dispatchClick('click', album)}
on:mouseenter={() => (showVerticalDots = true)} on:mouseenter={() => (showVerticalDots = true)}
@ -87,20 +87,16 @@
loading={preload ? 'eager' : 'lazy'} loading={preload ? 'eager' : 'lazy'}
src={imageData} src={imageData}
alt={album.id} 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" data-testid="album-image"
draggable="false" draggable="false"
/> />
<div <div class="absolute top-0 h-full w-full rounded-3xl" />
class="absolute top-0 h-full w-full rounded-3xl {isSharingView
? 'group-hover:bg-yellow-800/25'
: 'group-hover:bg-indigo-800/25'} "
/>
</div> </div>
<div class="mt-4"> <div class="mt-4">
<p <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" data-testid="album-name"
title={album.albumName} title={album.albumName}
> >

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

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

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

@ -572,7 +572,7 @@
{/if} {/if}
<main <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`} style={`width:${assetGridWidth}px`}
> >
{#if viewMode === ViewMode.SELECT_ASSETS} {#if viewMode === ViewMode.SELECT_ASSETS}