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

improve debug display

Browse Source
This commit is contained in:
Chuck Dries 2023-03-11 00:12:39 -08:00
parent 5dadfb6f14
commit 44f0b7be9f
1 changed files with 6 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/MasonryGallery.tsx
View File

@ -119,7 +119,7 @@ const MasonryGallery = ({
} }
const rowAspectRatioSum = currentRow.aspect; const rowAspectRatioSum = currentRow.aspect;
const ar = getAspectRatio(image); const ar = getAspectRatio(image);
let width; let width: string;
let height = `calc(${galleryWidth} / ${rowAspectRatioSum} ${ let height = `calc(${galleryWidth} / ${rowAspectRatioSum} ${
showPalette ? "+ 10px" : "- 10px" showPalette ? "+ 10px" : "- 10px"
})`; })`;
@ -138,7 +138,7 @@ const MasonryGallery = ({
const data = dataFn ? dataFn(image) : null; const data = dataFn ? dataFn(image) : null;
return ( return (
<Link <Link
className={classNames("border-8 border-white overflow-hidden")} className={classNames("border-8 border-white overflow-hidden relative")}
id={image.base} id={image.base}
key={`${image.base}`} key={`${image.base}`}
state={{ state={{
@ -162,7 +162,10 @@ const MasonryGallery = ({
{data && ( {data && (
<div className="text-white z-20 absolute flex flex-col items-start"> <div className="text-white z-20 absolute flex flex-col items-start">
{data.map((dataString, i) => ( {data.map((dataString, i) => (
<span className="bg-black/50" key={i}> <span
className="bg-black/30 backdrop-blur p-[2px] m-[2px] max-w-full"
key={i}
>
{dataString} {dataString}
</span> </span>
))} ))}