cjones/immich
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(web): multiple improvements for people page (1) (#4717)

Browse Source 
* fix(web): multiple improvements for people page

* feat: better responsive icons
This commit is contained in:
martin
2023-10-30 20:40:28 +01:00
committed by GitHub
parent 8dcd159bd6
commit 9a60578088
4 changed files with 49 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/routes/(user)/explore/+page.svelte
+26 -14
View File
@@ -22,7 +22,9 @@
OBJECTS = 'smartInfo.objects',
}
const MAX_ITEMS = 12;
let MAX_ITEMS: number;
let innerWidth: number;
let screenSize: number;
const getFieldItems = (items: SearchExploreResponseDto[], field: Field) => {
const targetField = items.find((item) => item.fieldName === field);
return targetField?.items || [];
@@ -32,8 +34,16 @@
$: places = getFieldItems(data.items, Field.CITY);
$: people = data.response.people.slice(0, MAX_ITEMS);
$: hasPeople = data.response.total > 0;
$: {
if (innerWidth && screenSize) {
// Set the number of faces according to the screen size and the div size
MAX_ITEMS = screenSize < 768 ? Math.floor(innerWidth / 96) : Math.floor(innerWidth / 112);
}
}
</script>
<svelte:window bind:innerWidth={screenSize} />
<UserPageLayout user={data.user} title={data.meta.title}>
{#if hasPeople}
<div class="mb-6 mt-2">
@@ -45,19 +55,21 @@
draggable="false">View All</a
>
</div>
<div class="flex flex-row flex-wrap gap-4">
{#each people as person (person.id)}
<a href="/people/{person.id}" class="w-24 text-center">
<ImageThumbnail
circle
shadow
url={api.getPeopleThumbnailUrl(person.id)}
altText={person.name}
widthStyle="100%"
/>
<p class="mt-2 text-ellipsis text-sm font-medium dark:text-white">{person.name}</p>
</a>
{/each}
<div class="flex flex-row {MAX_ITEMS < 5 ? 'justify-center' : ''} flex-wrap gap-4" bind:offsetWidth={innerWidth}>
{#if MAX_ITEMS}
{#each people as person (person.id)}
<a href="/people/{person.id}" class="w-20 md:w-24 text-center">
<ImageThumbnail
circle
shadow
url={api.getPeopleThumbnailUrl(person.id)}
altText={person.name}
widthStyle="100%"
/>
<p class="mt-2 text-ellipsis text-sm font-medium dark:text-white">{person.name}</p>
</a>
{/each}
{/if}
</div>
</div>
{/if}
web/src/routes/(user)/people/[personId]/+page.svelte
+8 -5
View File
@@ -87,7 +87,7 @@
if ((people.length < 20 && name.startsWith(searchWord)) || name === '') {
return;
}
const timeout = setTimeout(() => (isSearchingPeople = true), 300);
const timeout = setTimeout(() => (isSearchingPeople = true), 100);
try {
const { data } = await api.searchApi.searchPerson({ name });
people = data;
@@ -156,6 +156,7 @@
personId: data.person.id,
});
previousPersonId = data.person.id;
name = data.person.name;
refreshAssetGrid = !refreshAssetGrid;
}
});
@@ -265,7 +266,7 @@
if (viewMode === ViewMode.SUGGEST_MERGE) {
return;
}
isSearchingPeople = false;
isEditingName = false;
};
@@ -463,7 +464,7 @@
<div class="absolute z-[999] w-64 sm:w-96">
{#if isSearchingPeople}
<div
class="flex rounded-b-lg dark:border-immich-dark-gray place-items-center bg-gray-100 p-2 dark:bg-gray-700"
class="flex border h-14 rounded-b-lg border-gray-400 dark:border-immich-dark-gray place-items-center bg-gray-200 p-2 dark:bg-gray-700"
>
<div class="flex w-full place-items-center">
<LoadingSpinner />
@@ -472,8 +473,10 @@
{:else}
{#each suggestedPeople as person, index (person.id)}
<div
class="flex border-t dark:border-immich-dark-gray place-items-center bg-gray-100 p-2 dark:bg-gray-700 {index ===
suggestedPeople.length - 1 && 'rounded-b-lg'}"
class="flex border-t border-x border-gray-400 dark:border-immich-dark-gray h-14 place-items-center bg-gray-200 p-2 dark:bg-gray-700 hover:bg-gray-300 hover:dark:bg-[#232932] {index ===
suggestedPeople.length - 1
? 'rounded-b-lg border-b'
: ''}"
>
<button class="flex w-full place-items-center" on:click={() => handleSuggestPeople(person)}>
<ImageThumbnail