strtus/Vercel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refine matte layouts based on aspect ratio

Browse Source
This commit is contained in:
Sam Becker 2025-01-25 19:40:12 -06:00
parent 24a1e396d6
commit b7eb946d18
1 changed files with 15 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/photo/PhotoLarge.tsx
View File

@ -115,6 +115,16 @@ export default function PhotoLarge({
prefetch={prefetch}
/>;
const matteContentWidthForAspectRatio = () => {
// Restrict width for landscape photos
// (portrait photos are always height restricted)
if (photo.aspectRatio > 3 / 2 + 0.1) {
return 'w-[90%]';
} else if (photo.aspectRatio >= 1) {
return 'w-[80%]';
}
};
return (
<SiteGrid
containerRef={ref}
@ -123,16 +133,15 @@ export default function PhotoLarge({
<Link
href={pathForPhoto({ photo })}
className={clsx(arePhotosMatted &&
'flex items-center aspect-[3/2] bg-gray-100',
'flex items-center justify-center aspect-[3/2] bg-gray-100',
)}
prefetch={prefetch}
>
<div className={clsx(
arePhotosMatted &&
'flex items-center justify-center w-full',
arePhotosMatted && photo.aspectRatio >= 1
? 'h-[80%]'
: 'h-[90%]',
arePhotosMatted && 'flex items-center justify-center',
// Always specify height to ensure fallback doesn't collapse
arePhotosMatted && 'h-[90%]',
arePhotosMatted && matteContentWidthForAspectRatio(),
)}>
<ImageLarge
className={clsx(arePhotosMatted && 'h-full')}