tbelway/immich-quadlet
1
0
Fork 0
forked from Cutlery/immich
Code Pull Requests 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', OBJECTS = 'smartInfo.objects',
} }
let MAX_ITEMS: number; let MAX_PEOPLE_ITEMS: number;
let MAX_PLACE_ITEMS: number;
let innerWidth: number; let innerWidth: number;
let screenSize: number; let screenSize: number;
const getFieldItems = (items: SearchExploreResponseDto[], field: Field) => { const getFieldItems = (items: SearchExploreResponseDto[], field: Field) => {
@ -22,14 +23,14 @@
return targetField?.items || []; return targetField?.items || [];
}; };
$: things = getFieldItems(data.items, Field.OBJECTS); $: places = getFieldItems(data.items, Field.CITY).slice(0, MAX_PLACE_ITEMS);
$: places = getFieldItems(data.items, Field.CITY); $: people = data.response.people.slice(0, MAX_PEOPLE_ITEMS);
$: people = data.response.people.slice(0, MAX_ITEMS);
$: hasPeople = data.response.total > 0; $: hasPeople = data.response.total > 0;
$: { $: {
if (innerWidth && screenSize) { if (innerWidth && screenSize) {
// Set the number of faces according to the screen size and the div size // 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> </script>
@ -47,8 +48,11 @@
draggable="false">View All</a draggable="false">View All</a
> >
</div> </div>
<div class="flex flex-row {MAX_ITEMS < 5 ? 'justify-center' : ''} flex-wrap gap-4" bind:offsetWidth={innerWidth}> <div
{#if MAX_ITEMS} 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)} {#each people as person (person.id)}
<a href="{AppRoute.PEOPLE}/{person.id}" class="w-20 md:w-24 text-center"> <a href="{AppRoute.PEOPLE}/{person.id}" class="w-20 md:w-24 text-center">
<ImageThumbnail <ImageThumbnail
@ -90,29 +94,5 @@
</div> </div>
{/if} {/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" /> <hr class="mb-4 dark:border-immich-dark-gray" />
</UserPageLayout> </UserPageLayout>