helpy4/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich synced 2025-11-07 17:27:20 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

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
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">