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

chore(web): display places on a single row (#5825)

Browse Source
This commit is contained in:
Alex 2023-12-18 10:34:25 -06:00 committed by GitHub
parent d3e1572229
commit fade8b627f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 11 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
web/src/routes/(user)/explore/+page.svelte
View File

@ -14,7 +14,8 @@
OBJECTS = 'smartInfo.objects',
}
let MAX_ITEMS: number;
let MAX_PEOPLE_ITEMS: number;
let MAX_PLACE_ITEMS: number;
let innerWidth: number;
let screenSize: number;
const getFieldItems = (items: SearchExploreResponseDto[], field: Field) => {
@ -22,14 +23,14 @@
return targetField?.items || [];
};
$: things = getFieldItems(data.items, Field.OBJECTS);
$: places = getFieldItems(data.items, Field.CITY);
$: people = data.response.people.slice(0, MAX_ITEMS);
$: places = getFieldItems(data.items, Field.CITY).slice(0, MAX_PLACE_ITEMS);
$: people = data.response.people.slice(0, MAX_PEOPLE_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 / 120);
MAX_PEOPLE_ITEMS = screenSize < 768 ? Math.floor(innerWidth / 96) : Math.floor(innerWidth / 120);
MAX_PLACE_ITEMS = screenSize < 768 ? Math.floor(innerWidth / 150) : Math.floor(innerWidth / 172);
}
}
</script>
@ -47,8 +48,11 @@
draggable="false">View All</a
>
</div>
<div class="flex flex-row {MAX_ITEMS < 5 ? 'justify-center' : ''} flex-wrap gap-4" bind:offsetWidth={innerWidth}>
{#if MAX_ITEMS}
<div
class="flex flex-row {MAX_PEOPLE_ITEMS < 5 ? 'justify-center' : ''} flex-wrap gap-4"
bind:offsetWidth={innerWidth}
>
{#if MAX_PEOPLE_ITEMS}
{#each people as person (person.id)}
<a href="{AppRoute.PEOPLE}/{person.id}" class="w-20 md:w-24 text-center">
<ImageThumbnail
@ -90,29 +94,5 @@
</div>
{/if}
{#if things.length > 0}
<div class="mb-6 mt-2">
<div>
<p class="mb-4 font-medium dark:text-immich-dark-fg">Things</p>
</div>
<div class="flex flex-row flex-wrap gap-4">
{#each things as item}
<a class="relative" href="{AppRoute.SEARCH}?q={item.value}" draggable="false">
<div
class="flex w-[calc((100vw-(72px+5rem))/2)] max-w-[156px] justify-center overflow-hidden rounded-xl brightness-75 filter"
>
<Thumbnail thumbnailSize={156} asset={item.data} readonly />
</div>
<span
class="w-100 absolute bottom-2 w-full text-ellipsis px-1 text-center text-sm font-medium capitalize text-white backdrop-blur-[1px] hover:cursor-pointer"
>
{item.value}
</span>
</a>
{/each}
</div>
</div>
{/if}
<hr class="mb-4 dark:border-immich-dark-gray" />
</UserPageLayout>