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

attempts to add border between have not worked yet

Browse Source
This commit is contained in:
Chuck Dries 2021-06-14 22:02:45 -07:00
parent 5b7a678d19
commit be863ffe7f
No known key found for this signature in database
GPG Key ID: 4E6B9B2DCEC64BA9
2 changed files with 22 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
gatsby/src/components/MasonryGallery.js
View File

@ -8,9 +8,9 @@ import resolveConfig from 'tailwindcss/resolveConfig';
import tailwindConfig from '../../tailwind.config.js'; import tailwindConfig from '../../tailwind.config.js';
import useBreakpoint from 'use-breakpoint'; import useBreakpoint from 'use-breakpoint';
const {theme: {screens}} = resolveConfig(tailwindConfig); const {theme} = resolveConfig(tailwindConfig);
const themeBreakpoints = R.map(size => parseInt(size, 10), screens); const themeBreakpoints = R.map(size => parseInt(size, 10), theme.screens);
console.log(themeBreakpoints); console.log(theme);
const MasonryGallery = ({ images, itemsPerRow: itemsPerRowByBreakpoint }) => { const MasonryGallery = ({ images, itemsPerRow: itemsPerRowByBreakpoint }) => {
const breakpoints = React.useMemo(() => const breakpoints = React.useMemo(() =>
@ -25,49 +25,49 @@ const MasonryGallery = ({ images, itemsPerRow: itemsPerRowByBreakpoint }) => {
R.map(R.sum) R.map(R.sum)
))(itemsPerRowByBreakpoint), [aspectRatios, itemsPerRowByBreakpoint]); ))(itemsPerRowByBreakpoint), [aspectRatios, itemsPerRowByBreakpoint]);
// console.log('bp', breakpoint); const itemsPerRow = itemsPerRowByBreakpoint[breakpoint];
const rowAspectRatioSumsForCurrentBP = rowAspectRatioSumsByBreakpoint[breakpoint]; const rowAspectRatioSumsForCurrentBP = rowAspectRatioSumsByBreakpoint[breakpoint];
// console.log('rowAspectRatioSumsForCurrentBP :', rowAspectRatioSumsForCurrentBP);
return ( return (
<div <div
className='w-full'
style={{ style={{
width: '100%',
position: 'relative', position: 'relative',
}} }}
// className='mx-auto'
// style={{ maxWidth: minWidth }} // style={{ maxWidth: minWidth }}
> >
{images.map((image, i) => { {images.map((image, i) => {
const rowIndex = Math.floor(i / itemsPerRowByBreakpoint[breakpoint]); const rowIndex = Math.floor(i / itemsPerRow);
const rowAspectRatioSum = rowAspectRatioSumsForCurrentBP[rowIndex]; const rowAspectRatioSum = rowAspectRatioSumsForCurrentBP[rowIndex];
const width = ((getAspectRatio(image) / rowAspectRatioSum) * 100).toFixed(10); // const width = ((getAspectRatio(image) / rowAspectRatioSum) * 100).toFixed(10);
const ar = getAspectRatio(image);
const widthNumber = ((ar / rowAspectRatioSum) * 100);
const gutterReserve = parseInt(theme.spacing['1'], 10) * (itemsPerRow - 1);
const width = `${widthNumber}%`;
// const width = `${widthNumber}%`;
// console.log('ars', rowAspectRatioSum); // console.log('ars', rowAspectRatioSum);
if (i === 0) { if (i === 0) {
// console.log(rowIndex, rowAspectRatioSum); // console.log(rowIndex, rowAspectRatioSum);
console.log(getName(image), `${width}%`); console.log(getName(image), width);
} }
return ( return (
<div <Link
key={`${image.base}`} key={`${image.base}`}
className='inline-block' className='inline-block'
style={{ style={{
width: `${width}%`, width,
// marginLeft: '8px',
}} }}
state={{modal: true}} to={`/photogallery/${image.base}`}
> >
{/* // <Link className='inline-block' key={image.base} state={{modal: true}} to={`/photogallery/${image.base}`}> */}
<GatsbyImage <GatsbyImage
// key={`${image.base}-img`} className='w-full'
// className='p-2' objectFit='cover'
style={{ // style={{ width }}
width: '100%',
}}
objectFit='contain'
image={getImage(image)} image={getImage(image)}
alt={getName(image)} alt={getName(image)}
/> />
{/* // </Link> */} </Link>
</div>
); );
})} })}
</div>); </div>);

14
gatsby/src/pages/photogallery.js
View File

@ -11,18 +11,6 @@ const GalleryPage = ({ data }) => {
const images = React.useMemo(() => const images = React.useMemo(() =>
data.allFile.edges data.allFile.edges
.map(edge => edge.node, [data]) .map(edge => edge.node, [data])
// .sort((left, right) => {
// const leftDate = new Date(getMeta(left).dateTaken);
// console.log(leftDate);
// const rightDate = new Date(getMeta(right).dateTaken);
// if (leftDate < rightDate) {
// return 1;
// }
// if (leftDate > rightDate) {
// return -1;
// }
// return 0;
// }) // TODO HERE
, [data]); , [data]);
return (<> return (<>
@ -32,7 +20,7 @@ const GalleryPage = ({ data }) => {
</Helmet> </Helmet>
<div className="bg-black min-h-screen"> <div className="bg-black min-h-screen">
<h1 className="text-2xl">Gallery</h1> <h1 className="text-2xl">Gallery</h1>
<div className="mx-auto" style={{maxWidth: '1800px'}}> <div className="mx-auto 2xl:container">
<MasonryGallery <MasonryGallery
images={images} images={images}
itemsPerRow={{ itemsPerRow={{