self-hosted/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2024-11-28 09:33:27 +02:00
Code Issues Releases Activity

fix(web): single row of items (#11729)

Browse Source 
* fix(web): single row of items

* remove filterBoxWidth

* slight size adjustment

* rewrite action as component
This commit is contained in:
Michel Heusschen 2024-08-13 14:20:08 +02:00 committed by GitHub
parent e384692025
commit 5acdc958b6
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 68 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
web/src/lib/components/shared-components/search-bar/search-filter-box.svelte
View File

@ -77,8 +77,6 @@
: MediaType.All,
};
let filterBoxWidth = 0;
const resetForm = () => {
filter = {
personIds: new Set(),
@ -120,7 +118,6 @@
</script>
<div
bind:clientWidth={filterBoxWidth}
transition:fly={{ y: 25, duration: 250 }}
class="absolute w-full rounded-b-3xl border-2 border-t-0 border-gray-200 bg-white shadow-2xl dark:border-gray-700 dark:bg-immich-dark-gray dark:text-gray-300"
>
@ -132,7 +129,7 @@
>
<div class="px-4 sm:px-6 py-4 space-y-10 max-h-[calc(100dvh-12rem)] overflow-y-auto immich-scrollbar" tabindex="-1">
<!-- PEOPLE -->
<SearchPeopleSection width={filterBoxWidth} bind:selectedPeople={filter.personIds} />
<SearchPeopleSection bind:selectedPeople={filter.personIds} />
<!-- TEXT -->
<SearchTextSection bind:filename={filter.filename} bind:context={filter.context} />

13
web/src/lib/components/shared-components/search-bar/search-people-section.svelte
View File

@ -8,14 +8,14 @@
import { mdiClose, mdiArrowRight } from '@mdi/js';
import { handleError } from '$lib/utils/handle-error';
import { t } from 'svelte-i18n';
import SingleGridRow from '$lib/components/shared-components/single-grid-row.svelte';
export let width: number;
export let selectedPeople: Set<string>;
let peoplePromise = getPeople();
let showAllPeople = false;
let name = '';
$: numberOfPeople = (width - 80) / 85;
let numberOfPeople = 1;
function orderBySelectedPeopleFirst(people: PersonResponseDto[]) {
return [
@ -60,11 +60,14 @@
<SearchBar bind:name placeholder={$t('filter_people')} showLoadingSpinner={false} />
</div>
<div class="flex -mx-1 max-h-64 gap-1 mt-2 flex-wrap overflow-y-auto immich-scrollbar">
<SingleGridRow
class="grid grid-cols-[repeat(auto-fill,minmax(5rem,1fr))] -mx-1 gap-1 mt-2 overflow-y-auto immich-scrollbar"
bind:itemCount={numberOfPeople}
>
{#each peopleList as person (person.id)}
<button
type="button"
class="flex flex-col items-center w-20 rounded-3xl border-2 hover:bg-immich-gray dark:hover:bg-immich-dark-primary/20 p-2 transition-all {selectedPeople.has(
class="flex flex-col items-center rounded-3xl border-2 hover:bg-immich-gray dark:hover:bg-immich-dark-primary/20 p-2 transition-all {selectedPeople.has(
person.id,
)
? 'dark:border-slate-500 border-slate-400 bg-slate-200 dark:bg-slate-800 dark:text-white'
@ -75,7 +78,7 @@
<p class="mt-2 line-clamp-2 text-sm font-medium dark:text-white">{person.name}</p>
</button>
{/each}
</div>
</SingleGridRow>
{#if showAllPeople || people.length > peopleList.length}
<div class="flex justify-center mt-2">

38
web/src/lib/components/shared-components/single-grid-row.svelte Normal file
View File

@ -0,0 +1,38 @@
<script lang="ts">
let className = '';
export { className as class };
export let itemCount = 1;
let container: HTMLElement | undefined;
let contentRect: DOMRectReadOnly | undefined;
const getGridGap = (element: Element) => {
const style = getComputedStyle(element);
return {
columnGap: parsePixels(style.columnGap),
};
};
const parsePixels = (style: string) => Number.parseInt(style, 10) || 0;
const getItemCount = (container: HTMLElement, containerWidth: number) => {
if (!container.firstElementChild) {
return 1;
}
const childContentRect = container.firstElementChild.getBoundingClientRect();
const childWidth = Math.floor(childContentRect.width || Infinity);
const { columnGap } = getGridGap(container);
return Math.floor((containerWidth + columnGap) / (childWidth + columnGap)) || 1;
};
$: if (container && contentRect) {
itemCount = getItemCount(container, contentRect.width);
}
</script>
<div class={className} bind:this={container} bind:contentRect>
<slot {itemCount} />
</div>

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

@ -10,6 +10,7 @@
import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
import { onMount } from 'svelte';
import { websocketEvents } from '$lib/stores/websocket';
import SingleGridRow from '$lib/components/shared-components/single-grid-row.svelte';
export let data: PageData;
@ -19,25 +20,14 @@
OBJECTS = 'smartInfo.objects',
}
let MAX_PEOPLE_ITEMS: number;
let MAX_PLACE_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 || [];
};
$: places = getFieldItems(data.items, Field.CITY).slice(0, MAX_PLACE_ITEMS);
$: people = data.response.people.slice(0, MAX_PEOPLE_ITEMS);
$: places = getFieldItems(data.items, Field.CITY);
$: people = data.response.people;
$: hasPeople = data.response.total > 0;
$: {
if (innerWidth && screenSize) {
// Set the number of faces according to the screen size and the div size
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);
}
}
onMount(() => {
return websocketEvents.on('on_person_thumbnail', (personId: string) => {
@ -52,8 +42,6 @@
});
</script>
<svelte:window bind:innerWidth={screenSize} />
<UserPageLayout title={data.meta.title}>
{#if hasPeople}
<div class="mb-6 mt-2">
@ -65,25 +53,17 @@
draggable="false">{$t('view_all')}</a
>
</div>
<div
class="flex flex-row {MAX_PEOPLE_ITEMS < 5 ? 'justify-center' : ''} flex-wrap gap-4"
bind:offsetWidth={innerWidth}
<SingleGridRow
class="grid md:grid-cols-[repeat(auto-fill,minmax(7rem,1fr))] grid-cols-[repeat(auto-fill,minmax(5rem,1fr))] gap-x-4"
let:itemCount
>
{#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
circle
shadow
url={getPeopleThumbnailUrl(person)}
altText={person.name}
widthStyle="100%"
/>
{#each people.slice(0, itemCount) as person (person.id)}
<a href="{AppRoute.PEOPLE}/{person.id}" class="text-center">
<ImageThumbnail circle shadow url={getPeopleThumbnailUrl(person)} 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>
</SingleGridRow>
</div>
{/if}
@ -97,16 +77,17 @@
draggable="false">{$t('view_all')}</a
>
</div>
<div class="flex flex-row flex-wrap gap-4">
{#each places as item (item.data.id)}
<a class="relative" href="{AppRoute.SEARCH}?{getMetadataSearchQuery({ city: 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"
<SingleGridRow
class="grid md:grid-cols-[repeat(auto-fill,minmax(9rem,1fr))] grid-cols-[repeat(auto-fill,minmax(7rem,1fr))] gap-x-4"
let:itemCount
>
{#each places.slice(0, itemCount) as item (item.data.id)}
<a class="relative" href="{AppRoute.SEARCH}?{getMetadataSearchQuery({ city: item.value })}" draggable="false">
<div class="flex justify-center overflow-hidden rounded-xl brightness-75 filter">
<img
src={getAssetThumbnailUrl({ id: item.data.id, size: AssetMediaSize.Thumbnail })}
alt={item.value}
class="object-cover w-[156px] h-[156px]"
class="object-cover aspect-square w-full"
/>
</div>
<span
@ -116,7 +97,7 @@
</span>
</a>
{/each}
</div>
</SingleGridRow>
</div>
{/if}