From c4e91d14d8d9745a5572d85fcb6e81040fe3e5fe Mon Sep 17 00:00:00 2001
From: Chuck Dries <chuck@chuckdries.com>
Date: Sat, 10 Jul 2021 09:51:55 -0700
Subject: [PATCH] fix metaitem and improve gallery dangling rows

---
 src/components/GalleryImage/GalleryImage.js |  4 ++--
 src/components/GalleryImage/MetadataItem.js |  2 +-
 src/components/MasonryGallery.js            | 13 ++++++-------
 3 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/src/components/GalleryImage/GalleryImage.js b/src/components/GalleryImage/GalleryImage.js
index 32d6a55..afe7c4c 100644
--- a/src/components/GalleryImage/GalleryImage.js
+++ b/src/components/GalleryImage/GalleryImage.js
@@ -129,10 +129,10 @@ const GalleryImage = ({ data, pageContext }) => {
             <p className="landscape:mr-2">{meta.iptc.caption}</p>
           </div>
           {<div className="portrait:border-t-2 border-muted-light portrait:mt-2 mr-2 portrait:mb-1" style={{width: 30}}></div>}
-          <MetadataItem aspectRatio={ar} data={dateTaken} icon="calendar-sharp" title="date taken"/>
+          <MetadataItem aspectRatio={ar} data={dateTaken.toLocaleDateString()} icon="calendar-sharp" title="date taken"/>
           <MetadataItem aspectRatio={ar} data={locationString} icon="location-sharp" title="location"/>
           <MetadataItem aspectRatio={ar} data={shutterSpeed} icon="stopwatch-sharp" title="shutter speed" />
-          <MetadataItem aspectRatio={ar} data={meta.exif.FNumber} icon="aperture-sharp" title="aperture" />
+          <MetadataItem aspectRatio={ar} data={`f/${meta.exif.FNumber}`} icon="aperture-sharp" title="aperture" />
           <MetadataItem aspectRatio={ar} data={meta.exif.ISO} icon="film-outline" title="ISO" />
         </div>
       </div>
diff --git a/src/components/GalleryImage/MetadataItem.js b/src/components/GalleryImage/MetadataItem.js
index e3a2c08..cb077e8 100644
--- a/src/components/GalleryImage/MetadataItem.js
+++ b/src/components/GalleryImage/MetadataItem.js
@@ -14,7 +14,7 @@ const MetadataItem = ({
     <span className="icon-offset mr-1">
       <ion-icon name={icon}></ion-icon>
     </span>
-    <span className="mr-1">f/{data}</span>
+    <span className="mr-1">{data}</span>
   </div>
 ) : null;
 
diff --git a/src/components/MasonryGallery.js b/src/components/MasonryGallery.js
index 11d49eb..86601bb 100644
--- a/src/components/MasonryGallery.js
+++ b/src/components/MasonryGallery.js
@@ -37,14 +37,13 @@ const MasonryGallery = ({ images, itemsPerRow: itemsPerRowByBreakpoint }) => {
         const rowAspectRatioSum = rowAspectRatioSumsForCurrentBP[rowIndex];
         // const width = ((getAspectRatio(image) / rowAspectRatioSum) * 100).toFixed(10);
         const ar = getAspectRatio(image);
-        const widthNumber = ((ar / rowAspectRatioSum) * 100).toFixed(5);
+        const widthNumber = rowAspectRatioSum === ar
+          // image is only one in row
+          ? 100 / itemsPerRow
+          // image is one of several in row
+          : ((ar / rowAspectRatioSum) * 100).toFixed(5);
+
         const width = `${widthNumber}%`;
-        // const width = `${widthNumber}%`;
-        // console.log('ars', rowAspectRatioSum);
-        if (i === 0) {
-          // console.log(rowIndex, rowAspectRatioSum);
-          // console.log(getName(image), width);
-        }
         return (
           <Link 
             className="inline-block"