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

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>