tbelway/immich-quadlet
1
0
Fork 0
forked from Cutlery/immich
Code Pull Requests Activity

fix(web): grid on people page (#5640)

Browse Source 
* fix: grid on people page

* pr feedback

* wait before width is set

* fix: animation

* fix: use grid instead

---------

Co-authored-by: Alex <alex.tran1502@gmail.com>
This commit is contained in:
martin 2024-01-09 04:04:38 +01:00 committed by GitHub
parent bf8e2966c4
commit 29b204de57
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 46 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/lib/components/faces-page/people-card.svelte
View File

@ -46,7 +46,7 @@
role="group"
>
<a href="{AppRoute.PEOPLE}/{person.id}?previousRoute={AppRoute.PEOPLE}" draggable="false">
<div class="h-48 w-48 rounded-xl brightness-95 filter">
<div class="w-full h-full rounded-xl brightness-95 filter">
<ImageThumbnail
shadow
{preload}

3
web/src/lib/components/faces-page/show-hide.svelte
View File

@ -16,10 +16,11 @@
export let showLoadingSpinner: boolean;
export let toggleVisibility: boolean;
export let screenHeight: number;
</script>
<section
transition:fly={{ y: 500, duration: 100, easing: quintOut }}
transition:fly={{ y: screenHeight, duration: 150, easing: quintOut, opacity: 1 }}
class="absolute left-0 top-0 z-[9999] h-full w-full bg-immich-bg dark:bg-immich-dark-bg"
>
<div

81
web/src/routes/(user)/people/+page.svelte
View File

@ -45,6 +45,8 @@
let potentialMergePeople: PersonResponseDto[] = [];
let edittingPerson: PersonResponseDto | null = null;
let innerHeight: number;
people.forEach((person: PersonResponseDto) => {
initialHiddenValues[person.id] = person.isHidden;
});
@ -344,6 +346,8 @@
};
</script>
<svelte:window bind:innerHeight />
{#if showMergeModal}
<FullScreenModal on:clickOutside={() => (showMergeModal = false)}>
<MergeSuggestionModal
@ -370,21 +374,19 @@
</svelte:fragment>
{#if countVisiblePeople > 0}
<div class="pl-4">
<div class="flex flex-row flex-wrap gap-1">
{#each people as person, idx (person.id)}
{#if !person.isHidden}
<PeopleCard
{person}
preload={idx < 20}
on:change-name={() => handleChangeName(person)}
on:set-birth-date={() => handleSetBirthDate(person)}
on:merge-people={() => handleMergePeople(person)}
on:hide-person={() => handleHidePerson(person)}
/>
{/if}
{/each}
</div>
<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 xl:grid-cols-7 2xl:grid-cols-9 gap-1">
{#each people as person, idx (person.id)}
{#if !person.isHidden}
<PeopleCard
{person}
preload={idx < 20}
on:change-name={() => handleChangeName(person)}
on:set-birth-date={() => handleSetBirthDate(person)}
on:merge-people={() => handleMergePeople(person)}
on:hide-person={() => handleHidePerson(person)}
/>
{/if}
{/each}
</div>
{:else}
<div class="flex min-h-[calc(66vh_-_11rem)] w-full place-content-center items-center dark:text-white">
@ -444,29 +446,32 @@
on:change={handleToggleVisibility}
bind:showLoadingSpinner
bind:toggleVisibility
screenHeight={innerHeight}
>
{#each people as person, idx (person.id)}
<button
class="relative h-36 w-36 md:h-48 md:w-48"
on:click={() => (person.isHidden = !person.isHidden)}
on:mouseenter={() => (eyeColorMap[person.id] = 'black')}
on:mouseleave={() => (eyeColorMap[person.id] = 'white')}
>
<ImageThumbnail
preload={idx < 20}
bind:hidden={person.isHidden}
shadow
url={api.getPeopleThumbnailUrl(person.id)}
altText={person.name}
widthStyle="100%"
bind:eyeColor={eyeColorMap[person.id]}
/>
{#if person.name}
<span class="absolute bottom-2 left-0 w-full select-text px-1 text-center font-medium text-white">
{person.name}
</span>
{/if}
</button>
{/each}
<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 xl:grid-cols-7 2xl:grid-cols-9 gap-1">
{#each people as person, idx (person.id)}
<button
class="relative"
on:click={() => (person.isHidden = !person.isHidden)}
on:mouseenter={() => (eyeColorMap[person.id] = 'black')}
on:mouseleave={() => (eyeColorMap[person.id] = 'white')}
>
<ImageThumbnail
preload={idx < 20}
bind:hidden={person.isHidden}
shadow
url={api.getPeopleThumbnailUrl(person.id)}
altText={person.name}
widthStyle="100%"
bind:eyeColor={eyeColorMap[person.id]}
/>
{#if person.name}
<span class="absolute bottom-2 left-0 w-full select-text px-1 text-center font-medium text-white">
{person.name}
</span>
{/if}
</button>
{/each}
</div>
</ShowHide>
{/if}