From d1d14f1b8f2e3921d7b244dcf5d8594b913382f5 Mon Sep 17 00:00:00 2001
From: Chuck Dries <chuck@chuckdries.com>
Date: Mon, 11 Jul 2022 16:52:16 -0700
Subject: [PATCH 1/3] WIP put arrows on either side of gallery image

---
 src/components/GalleryImage/GalleryImage.js | 257 +++++++++++---------
 1 file changed, 143 insertions(+), 114 deletions(-)

diff --git a/src/components/GalleryImage/GalleryImage.js b/src/components/GalleryImage/GalleryImage.js
index 5784441..02248b5 100644
--- a/src/components/GalleryImage/GalleryImage.js
+++ b/src/components/GalleryImage/GalleryImage.js
@@ -166,7 +166,7 @@ const GalleryImage = ({
           >
             gallery <span className="bg-gray-300 text-black">esc</span>
           </Link>
-          {prevImage && (
+          {/* {prevImage && (
             <Link
               className="hover:underline text-vibrant-light hover:text-muted-light mx-1"
               state={{
@@ -179,8 +179,8 @@ const GalleryImage = ({
             >
               previous <span className="bg-gray-300 text-black">&#11104;</span>
             </Link>
-          )}
-          {nextImage && (
+          )} */}
+          {/* {nextImage && (
             <Link
               className="hover:underline text-vibrant-light hover:text-muted-light mx-1"
               state={{
@@ -193,127 +193,156 @@ const GalleryImage = ({
             >
               next <span className="bg-gray-300 text-black">&#11106;</span>
             </Link>
-          )}
+          )} */}
         </nav>
-        <div className={classnames("flex", orientationClasses)}>
-          <div
-            className={classnames(
-              zoom ? "cursor-zoom-out" : "cursor-zoom-in",
-              "mb-2"
-            )}
-            onClick={() => setZoom((_zoom) => !_zoom)}
-            style={{
-              maxWidth: `calc(max(calc(100vh - ${verticalPad}), 500px) * ${ar})`,
-            }}
-          >
-            {zoom ? (
-              <img
-                alt={name}
-                src={image.publicURL}
-                style={{
-                  width: canonicalSize.width / window.devicePixelRatio,
-                  maxWidth: "unset",
-                }}
-              />
-            ) : (
-              <GatsbyImage
-                alt={name}
-                className="border-4 border-vibrant"
-                image={getImage(image)}
-                key={image.base}
-                loading="eager"
-                objectFit="contain"
-              />
-            )}
-          </div>
-          <div
-            className={classnames(
-              "px-2 flex flex-row portrait:items-end mx-auto",
-              ar <= 1
-                ? "pt-5 flex-col flex-auto text-right"
-                : "landscape:container portrait:pt-5 portrait:flex-col portrait:text-right"
-            )}
-          >
-            <div className="flex-auto mr-2">
-              <p className="text-muted-light font-mono text-sm m-0 mt-1">
-                {image.base}
-              </p>
-              {hasName(image) && (
-                <h1 className="text-4xl mt-0 font-serif">{name}</h1>
+        <div className="flex justify-between flex-auto items-center">
+          {prevImage && (
+            <Link
+              className="hover:underline text-vibrant-light hover:text-muted-light mx-1 self-stretch flex items-center bg-opacity-5 hover:bg-black"
+              state={{
+                currentIndex: currentIndex - 1,
+                sortedImageList,
+                filterKeyword,
+                sortKey,
+              }}
+              to={`/photogallery/${prevImage}/`}
+            >
+              previous <span className="bg-gray-300 text-black">&#11104;</span>
+            </Link>
+          )}
+          <div className={classnames("pb-2 flex", orientationClasses)}>
+            <div
+              className={classnames(
+                zoom ? "cursor-zoom-out" : "cursor-zoom-in",
+                "mb-2 self-center"
               )}
-              <p className="landscape:mr-2">{meta.Caption}</p>
-              <a
-                className="cursor-pointer inline-block bg-muted-light text-vibrant-dark font-serif p-1 my-1 rounded"
-                download
-                href={image.publicURL}
-                onClick={() => {
-                  try {
-                    window.plausible("Download Wallpaper", {
-                      props: { image: image.base },
-                    });
-                  } catch {
-                    // do nothing
-                  }
-                }}
-              >
-                Download wallpaper
-              </a>
-            </div>
-            {
-              <div
-                className="portrait:border-t-2 border-muted-light portrait:mt-2 mr-2 portrait:mb-1"
-                style={{ width: 30 }}
-              ></div>
-            }
-            <div className="flex flex-col items-end">
-              <MetadataItem
-                data={dateTaken.toLocaleDateString()}
-                icon={<Calendar />}
-                title="date taken"
-              />
-              <div className="flex justify-end gap-2 border border-vibrant-light pl-2 rounded">
-                <MetadataItem
-                  data={shutterSpeed}
-                  icon={<Stopwatch />}
-                  title="shutter speed"
+              onClick={() => setZoom((_zoom) => !_zoom)}
+              style={{
+                maxWidth: `calc(max(calc(100vh - ${verticalPad}), 500px) * ${ar})`,
+              }}
+            >
+              {zoom ? (
+                <img
+                  alt={name}
+                  src={image.publicURL}
+                  style={{
+                    width: canonicalSize.width / window.devicePixelRatio,
+                    maxWidth: "unset",
+                  }}
                 />
-                {meta.FNumber && (
+              ) : (
+                <GatsbyImage
+                  alt={name}
+                  className="border-4 border-vibrant"
+                  image={getImage(image)}
+                  key={image.base}
+                  loading="eager"
+                  objectFit="contain"
+                />
+              )}
+            </div>
+            <div
+              className={classnames(
+                "px-2 flex flex-row portrait:items-end mx-auto",
+                ar <= 1
+                  ? "pt-5 flex-col flex-auto text-right"
+                  : "landscape:container portrait:pt-5 portrait:flex-col portrait:text-right"
+              )}
+            >
+              <div className="flex-auto mr-2">
+                <p className="text-muted-light font-mono text-sm m-0 mt-1">
+                  {image.base}
+                </p>
+                {hasName(image) && (
+                  <h1 className="text-4xl mt-0 font-serif">{name}</h1>
+                )}
+                <p className="landscape:mr-2">{meta.Caption}</p>
+                <a
+                  className="cursor-pointer inline-block bg-muted-light text-vibrant-dark font-serif p-1 my-1 rounded"
+                  download
+                  href={image.publicURL}
+                  onClick={() => {
+                    try {
+                      window.plausible("Download Wallpaper", {
+                        props: { image: image.base },
+                      });
+                    } catch {
+                      // do nothing
+                    }
+                  }}
+                >
+                  Download wallpaper
+                </a>
+              </div>
+              {
+                <div
+                  className="portrait:border-t-2 border-muted-light portrait:mt-2 mr-2 portrait:mb-1"
+                  style={{ width: 30 }}
+                ></div>
+              }
+              <div className="flex flex-col items-end">
+                <MetadataItem
+                  data={dateTaken.toLocaleDateString()}
+                  icon={<Calendar />}
+                  title="date taken"
+                />
+                <div className="flex justify-end gap-2 border border-vibrant-light pl-2 rounded">
                   <MetadataItem
-                    data={`f/${meta.FNumber}`}
-                    icon={<Exposure />}
-                    title="aperture"
+                    data={shutterSpeed}
+                    icon={<Stopwatch />}
+                    title="shutter speed"
+                  />
+                  {meta.FNumber && (
+                    <MetadataItem
+                      data={`f/${meta.FNumber}`}
+                      icon={<Exposure />}
+                      title="aperture"
+                    />
+                  )}
+                  <MetadataItem data={meta.ISO} icon={<Filmroll />} title="ISO" />
+                </div>
+                <MetadataItem
+                  data={locationString}
+                  icon={<Location />}
+                  title="location"
+                />
+                {(meta.Make || meta.Model) && (
+                  <MetadataItem
+                    data={[meta.Make, meta.Model].join(" ")}
+                    icon={<Camera />}
+                    title="camera"
+                  />
+                )}
+                {(meta.LensModel || meta.FocalLength) && (
+                  <MetadataItem
+                    data={[
+                      meta.LensModel === "----" ? null : meta.LensModel,
+                      meta.FocalLength && `${meta.FocalLength}mm`,
+                    ]
+                      .filter(Boolean)
+                      .join(" @")}
+                    icon={<Circle />}
+                    title="lens"
                   />
                 )}
-                <MetadataItem data={meta.ISO} icon={<Filmroll />} title="ISO" />
               </div>
-              <MetadataItem
-                data={locationString}
-                icon={<Location />}
-                title="location"
-              />
-              {(meta.Make || meta.Model) && (
-                <MetadataItem
-                  data={[meta.Make, meta.Model].join(" ")}
-                  icon={<Camera />}
-                  title="camera"
-                />
-              )}
-              {(meta.LensModel || meta.FocalLength) && (
-                <MetadataItem
-                  data={[
-                    meta.LensModel === "----" ? null : meta.LensModel,
-                    meta.FocalLength && `${meta.FocalLength}mm`,
-                  ]
-                    .filter(Boolean)
-                    .join(" @")}
-                  icon={<Circle />}
-                  title="lens"
-                />
-              )}
             </div>
           </div>
+          {nextImage && (
+            <Link
+              className="hover:underline text-vibrant-light hover:text-muted-light mx-1 self-stretch flex items-center bg-opacity-5 hover:bg-black"
+              state={{
+                currentIndex: currentIndex + 1,
+                sortedImageList,
+                filterKeyword,
+                sortKey,
+              }}
+              to={`/photogallery/${nextImage}/`}
+            >
+              next <span className="bg-gray-300 text-black">&#11106;</span>
+            </Link>
+          )}
         </div>
-        <div></div>
       </div>
     </>
   );

From b56b9b45004297bf3f1bcbc7aab1348b06d8133a Mon Sep 17 00:00:00 2001
From: Chuck Dries <chuck@chuckdries.com>
Date: Mon, 11 Jul 2022 17:16:46 -0700
Subject: [PATCH 2/3] refine aesthetics of arrows

---
 src/components/GalleryImage/GalleryImage.js | 44 ++++++---------------
 1 file changed, 11 insertions(+), 33 deletions(-)

diff --git a/src/components/GalleryImage/GalleryImage.js b/src/components/GalleryImage/GalleryImage.js
index 02248b5..757c78b 100644
--- a/src/components/GalleryImage/GalleryImage.js
+++ b/src/components/GalleryImage/GalleryImage.js
@@ -4,6 +4,8 @@ import { GatsbyImage, getImage } from "gatsby-plugin-image";
 import { Helmet } from "react-helmet";
 import classnames from "classnames";
 
+import ChevronLeft from '@spectrum-icons/workflow/ChevronLeft';
+import ChevronRight from '@spectrum-icons/workflow/ChevronRight';
 import Calendar from "@spectrum-icons/workflow/Calendar";
 import Stopwatch from "@spectrum-icons/workflow/Stopwatch";
 import Exposure from "@spectrum-icons/workflow/Exposure";
@@ -36,6 +38,10 @@ const logKeyShortcut = (keyCode) => {
   }
 };
 
+const ArrowLinkClasses = `hover:underline text-vibrant-light hover:text-muted-light 
+lg:px-4 self-stretch flex items-center hover:bg-black/50 max-h-screen sticky top-0
+`;
+
 const GalleryImage = ({
   data,
   location: {
@@ -166,39 +172,11 @@ const GalleryImage = ({
           >
             gallery <span className="bg-gray-300 text-black">esc</span>
           </Link>
-          {/* {prevImage && (
-            <Link
-              className="hover:underline text-vibrant-light hover:text-muted-light mx-1"
-              state={{
-                currentIndex: currentIndex - 1,
-                sortedImageList,
-                filterKeyword,
-                sortKey,
-              }}
-              to={`/photogallery/${prevImage}/`}
-            >
-              previous <span className="bg-gray-300 text-black">&#11104;</span>
-            </Link>
-          )} */}
-          {/* {nextImage && (
-            <Link
-              className="hover:underline text-vibrant-light hover:text-muted-light mx-1"
-              state={{
-                currentIndex: currentIndex + 1,
-                sortedImageList,
-                filterKeyword,
-                sortKey,
-              }}
-              to={`/photogallery/${nextImage}/`}
-            >
-              next <span className="bg-gray-300 text-black">&#11106;</span>
-            </Link>
-          )} */}
         </nav>
-        <div className="flex justify-between flex-auto items-center">
+        <div className="flex justify-between flex-auto items-center lg:gap-2">
           {prevImage && (
             <Link
-              className="hover:underline text-vibrant-light hover:text-muted-light mx-1 self-stretch flex items-center bg-opacity-5 hover:bg-black"
+              className={ArrowLinkClasses}
               state={{
                 currentIndex: currentIndex - 1,
                 sortedImageList,
@@ -207,7 +185,7 @@ const GalleryImage = ({
               }}
               to={`/photogallery/${prevImage}/`}
             >
-              previous <span className="bg-gray-300 text-black">&#11104;</span>
+              <span className="p-2 lg:p-4 bg-muted-light/25 rounded-full"><ChevronLeft /></span>
             </Link>
           )}
           <div className={classnames("pb-2 flex", orientationClasses)}>
@@ -330,7 +308,7 @@ const GalleryImage = ({
           </div>
           {nextImage && (
             <Link
-              className="hover:underline text-vibrant-light hover:text-muted-light mx-1 self-stretch flex items-center bg-opacity-5 hover:bg-black"
+              className={ArrowLinkClasses}
               state={{
                 currentIndex: currentIndex + 1,
                 sortedImageList,
@@ -339,7 +317,7 @@ const GalleryImage = ({
               }}
               to={`/photogallery/${nextImage}/`}
             >
-              next <span className="bg-gray-300 text-black">&#11106;</span>
+              <span className="p-2 lg:p-4 bg-muted-light/25 rounded-full"><ChevronRight /></span>
             </Link>
           )}
         </div>

From f89f01ff986f075fe431bc8ac377d7f2d17450d8 Mon Sep 17 00:00:00 2001
From: Chuck Dries <chuck@chuckdries.com>
Date: Mon, 11 Jul 2022 17:29:36 -0700
Subject: [PATCH 3/3] fix horizontal scrolling on mobile

---
 src/components/GalleryImage/GalleryImage.js | 6 +++---
 src/components/GalleryImage/MetadataItem.js | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/GalleryImage/GalleryImage.js b/src/components/GalleryImage/GalleryImage.js
index 757c78b..57fae77 100644
--- a/src/components/GalleryImage/GalleryImage.js
+++ b/src/components/GalleryImage/GalleryImage.js
@@ -185,7 +185,7 @@ const GalleryImage = ({
               }}
               to={`/photogallery/${prevImage}/`}
             >
-              <span className="p-2 lg:p-4 bg-muted-light/25 rounded-full"><ChevronLeft /></span>
+              <span className="p-1 lg:p-4 bg-muted-light/25 rounded-full"><ChevronLeft /></span>
             </Link>
           )}
           <div className={classnames("pb-2 flex", orientationClasses)}>
@@ -264,7 +264,7 @@ const GalleryImage = ({
                   icon={<Calendar />}
                   title="date taken"
                 />
-                <div className="flex justify-end gap-2 border border-vibrant-light pl-2 rounded">
+                <div className="sm:flex justify-end gap-2 border border-vibrant-light pl-2 rounded">
                   <MetadataItem
                     data={shutterSpeed}
                     icon={<Stopwatch />}
@@ -317,7 +317,7 @@ const GalleryImage = ({
               }}
               to={`/photogallery/${nextImage}/`}
             >
-              <span className="p-2 lg:p-4 bg-muted-light/25 rounded-full"><ChevronRight /></span>
+              <span className="p-1 lg:p-4 bg-muted-light/25 rounded-full"><ChevronRight /></span>
             </Link>
           )}
         </div>
diff --git a/src/components/GalleryImage/MetadataItem.js b/src/components/GalleryImage/MetadataItem.js
index 89fe065..3ae3559 100644
--- a/src/components/GalleryImage/MetadataItem.js
+++ b/src/components/GalleryImage/MetadataItem.js
@@ -5,7 +5,7 @@ const MetadataItem = ({ icon, data, title }) =>
     <div className="flex justify-end items-end mr-2 font-mono">
       <div className="flex flex-col items-end my-2">
         <span className="text-sm opacity-60 m-0 ">{title}</span>
-        <span className="text-lg leading-4">{data}</span>
+        <span className="md:text-lg leading-4">{data}</span>
       </div>
       <span className="ml-2 pb-2 text-2xl">
         {icon}