chuckdries/Personal-Website
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix "last image" problem in masonry gallery

Browse Source
This commit is contained in:
Chuck Dries 2022-06-28 21:04:11 -07:00
parent 023936ce35
commit 5ada3c3b0d
No known key found for this signature in database
GPG Key ID: A00B7AEAE1DC5BE6
1 changed files with 10 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/MasonryGallery.js
View File

@ -103,9 +103,15 @@ const MasonryGallery = ({
} }
const rowAspectRatioSum = currentRow.aspect; const rowAspectRatioSum = currentRow.aspect;
const ar = getAspectRatio(image); const ar = getAspectRatio(image);
const widthNumber = ((ar / rowAspectRatioSum) * 100).toFixed(7); let width;
let height = `calc(100vw / ${rowAspectRatioSum} - 10px)`
const width = `${widthNumber}%`; if (ar === rowAspectRatioSum) {
width = `calc(300px * ${ar})`;
height = 'unset'
} else {
const widthNumber = ((ar / rowAspectRatioSum) * 100).toFixed(7);
width = `${widthNumber}%`;
}
return ( return (
<Link <Link
className={classNames( className={classNames(
@ -116,8 +122,7 @@ const MasonryGallery = ({
key={`${image.base}`} key={`${image.base}`}
state={{ modal: true }} state={{ modal: true }}
style={{ style={{
height: `calc(100vw / ${rowAspectRatioSum} - 10px)`, height,
maxHeight: '50vh',
width, width,
// borderColor: `hsl(${image.fields.imageMeta.dominantHue}, 100%, 50%)` // borderColor: `hsl(${image.fields.imageMeta.dominantHue}, 100%, 50%)`
// borderColor: `rgb(${image.fields.imageMeta.vibrant.Vibrant.join(',')})` // borderColor: `rgb(${image.fields.imageMeta.vibrant.Vibrant.join(',')})`