From a1ac7b2e742bffa3459c0cb82a89f0971b4dcafb Mon Sep 17 00:00:00 2001
From: Chuck Dries <chuck@chuckdries.com>
Date: Tue, 21 Sep 2021 13:37:44 -0700
Subject: [PATCH] visual restyle of metadata components

---
 src/components/GalleryImage/GalleryImage.js | 97 +++++++++++----------
 src/components/GalleryImage/MetadataItem.js | 18 ++--
 2 files changed, 57 insertions(+), 58 deletions(-)

diff --git a/src/components/GalleryImage/GalleryImage.js b/src/components/GalleryImage/GalleryImage.js
index 36962a1..de60271 100644
--- a/src/components/GalleryImage/GalleryImage.js
+++ b/src/components/GalleryImage/GalleryImage.js
@@ -19,7 +19,7 @@ const logKeyShortcut = (keyCode) => {
     // eslint-disable-next-line
     window.plausible("KeyShortcut", { props: { keyCode } });
     // eslint-disable-next-line
-    _paq.push(['trackEvent', 'GalleryImage', 'KeyShortcut', keyCode]);
+    _paq.push(["trackEvent", "GalleryImage", "KeyShortcut", keyCode]);
   } catch (e) {
     /* do nothing */
   }
@@ -144,7 +144,7 @@ const GalleryImage = ({ data, pageContext }) => {
           </div>
           <div
             className={classnames(
-              "flex-shrink-0 mx-2 flex flex-row portrait:items-end",
+              "mx-2 flex flex-row portrait:items-end",
               ar <= 1
                 ? "pt-5 flex-col flex-auto text-right"
                 : "portrait:pt-5 portrait:flex-col portrait:text-right"
@@ -165,51 +165,54 @@ const GalleryImage = ({ data, pageContext }) => {
                 style={{ width: 30 }}
               ></div>
             }
-            <MetadataItem
-              aspectRatio={ar}
-              data={dateTaken.toLocaleDateString()}
-              icon="calendar-sharp"
-              title="date taken"
-            />
-            <MetadataItem
-              aspectRatio={ar}
-              data={locationString}
-              icon="location"
-              title="location"
-            />
-            {(meta.exif.Make || meta.exif.Model) && <MetadataItem
-              aspectRatio={ar}
-              data={[meta.exif.Make, meta.exif.Model].join(' ')}
-              icon="camera"
-              title="camera"
-            />}
-            {(meta.exif.LensModel || meta.exif.FocalLength) && <MetadataItem
-              aspectRatio={ar}
-              data={[
-                meta.exif.LensModel === '----' ? null : meta.exif.LensModel,
-                meta.exif.FocalLength && `${meta.exif.FocalLength}mm`
-              ].filter(Boolean).join(' @')}
-              icon="ellipse"
-              title="lens"
-            />}
-            <MetadataItem
-              aspectRatio={ar}
-              data={shutterSpeed}
-              icon="stopwatch"
-              title="shutter speed"
-            />
-            {meta.exif.FNumber && <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 className='flex flex-col'>
+              <MetadataItem
+                data={dateTaken.toLocaleDateString()}
+                icon="calendar-outline"
+                title="date taken"
+              />
+              <MetadataItem
+                data={locationString}
+                icon="location"
+                title="location"
+              />
+              {(meta.exif.Make || meta.exif.Model) && (
+                <MetadataItem
+                  data={[meta.exif.Make, meta.exif.Model].join(" ")}
+                  icon="camera-outline"
+                  title="camera"
+                />
+              )}
+              {(meta.exif.LensModel || meta.exif.FocalLength) && (
+                <MetadataItem
+                  data={[
+                    meta.exif.LensModel === "----" ? null : meta.exif.LensModel,
+                    meta.exif.FocalLength && `${meta.exif.FocalLength}mm`,
+                  ]
+                    .filter(Boolean)
+                    .join(" @")}
+                  icon="ellipse"
+                  title="lens"
+                />
+              )}
+              <MetadataItem
+                data={shutterSpeed}
+                icon="stopwatch-outline"
+                title="shutter speed"
+              />
+              {meta.exif.FNumber && (
+                <MetadataItem
+                  data={`f/${meta.exif.FNumber}`}
+                  icon="aperture-outline"
+                  title="aperture"
+                />
+              )}
+              <MetadataItem
+                data={meta.exif.ISO}
+                icon="film-outline"
+                title="ISO"
+              />
+            </div>
           </div>
         </div>
         <div></div>
diff --git a/src/components/GalleryImage/MetadataItem.js b/src/components/GalleryImage/MetadataItem.js
index e24e4f5..0e94c72 100644
--- a/src/components/GalleryImage/MetadataItem.js
+++ b/src/components/GalleryImage/MetadataItem.js
@@ -1,19 +1,15 @@
-import classNames from "classnames";
 import React from "react";
 
-const MetadataItem = ({ aspectRatio, icon, data, title }) =>
+const MetadataItem = ({ icon, data, title }) =>
   data ? (
-    <div
-      className={classNames(
-        "flex items-baseline ml-2 text-lg",
-        aspectRatio <= 1 ? "flex-row-reverse" : "portrait:flex-row-reverse"
-      )}
-      title={title}
-    >
-      <span className="icon-offset mr-1">
+    <div className="flex justify-end items-end mr-2">
+      <div className="flex flex-col items-end">
+        <span className="font-mono text-sm m-0 mt-2 ">{title}</span>
+        <span className="text-lg whitespace-nowrap">{data}</span>
+      </div>
+      <span className="icon-offset ml-2 mt-1 text-2xl">
         <ion-icon name={icon} title={title}></ion-icon>
       </span>
-      <span className="mr-1">{data}</span>
     </div>
   ) : null;