mirror of
https://github.com/immich-app/immich.git
synced 2025-02-11 01:18:24 -05:00
fix(web): justified layout (#2313)
This commit is contained in:
parent
6f6f847ee2
commit
736a946101
1 changed files with 26 additions and 24 deletions
|
@ -32,25 +32,24 @@
|
||||||
let viewWidth: number;
|
let viewWidth: number;
|
||||||
|
|
||||||
$: isMultiSelectionMode = selectedAssets.size > 0;
|
$: isMultiSelectionMode = selectedAssets.size > 0;
|
||||||
|
$: geometry = justifiedLayout(assets.map(getAssetRatio), {
|
||||||
|
boxSpacing: 5,
|
||||||
|
containerWidth: Math.floor(viewWidth),
|
||||||
|
targetRowHeight: 235
|
||||||
|
});
|
||||||
|
|
||||||
|
function getAssetRatio(asset: AssetResponseDto) {
|
||||||
|
let height = asset.exifInfo?.exifImageHeight || 235;
|
||||||
|
let width = asset.exifInfo?.exifImageWidth || 235;
|
||||||
|
|
||||||
function getAssetRatio(asset: AssetResponseDto): number {
|
|
||||||
const height = asset.exifInfo?.exifImageHeight;
|
|
||||||
const width = asset.exifInfo?.exifImageWidth;
|
|
||||||
const orientation = Number(asset.exifInfo?.orientation);
|
const orientation = Number(asset.exifInfo?.orientation);
|
||||||
|
if (orientation) {
|
||||||
if (height && width) {
|
if (orientation == 6 || orientation == -90) {
|
||||||
if (orientation) {
|
[width, height] = [height, width];
|
||||||
if (orientation == 6 || orientation == -90) {
|
|
||||||
return height / width;
|
|
||||||
} else {
|
|
||||||
return width / height;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
return width / height;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
return 1;
|
return { width, height };
|
||||||
}
|
}
|
||||||
|
|
||||||
const viewAssetHandler = (event: CustomEvent) => {
|
const viewAssetHandler = (event: CustomEvent) => {
|
||||||
|
@ -122,20 +121,23 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
{#if assets.length > 0}
|
{#if assets.length > 0}
|
||||||
<div class="flex flex-wrap gap-1 w-full pb-20" bind:clientWidth={viewWidth}>
|
<div
|
||||||
|
class="relative w-full mb-20"
|
||||||
|
bind:clientWidth={viewWidth}
|
||||||
|
style="height: {geometry.containerHeight}px"
|
||||||
|
>
|
||||||
{#if viewWidth}
|
{#if viewWidth}
|
||||||
{@const geoArray = assets.map(getAssetRatio)}
|
|
||||||
{@const justifiedLayoutResult = justifiedLayout(geoArray, {
|
|
||||||
targetRowHeight: 235,
|
|
||||||
containerWidth: Math.floor(viewWidth)
|
|
||||||
})}
|
|
||||||
|
|
||||||
{#each assets as asset, index (asset.id)}
|
{#each assets as asset, index (asset.id)}
|
||||||
<div animate:flip={{ duration: 500 }}>
|
{@const box = geometry.boxes[index]}
|
||||||
|
<div
|
||||||
|
class="absolute"
|
||||||
|
style="width: {box.width}px; height: {box.height}px; top: {box.top}px; left: {box.left}px"
|
||||||
|
animate:flip={{ duration: 500 }}
|
||||||
|
>
|
||||||
<Thumbnail
|
<Thumbnail
|
||||||
{asset}
|
{asset}
|
||||||
thumbnailWidth={justifiedLayoutResult.boxes[index].width || 235}
|
thumbnailWidth={box.width}
|
||||||
thumbnailHeight={justifiedLayoutResult.boxes[index].height || 235}
|
thumbnailHeight={box.height}
|
||||||
readonly={disableAssetSelect}
|
readonly={disableAssetSelect}
|
||||||
publicSharedKey={sharedLink?.key}
|
publicSharedKey={sharedLink?.key}
|
||||||
format={assets.length < 7 ? ThumbnailFormat.Jpeg : ThumbnailFormat.Webp}
|
format={assets.length < 7 ? ThumbnailFormat.Jpeg : ThumbnailFormat.Webp}
|
||||||
|
|
Loading…
Add table
Reference in a new issue