Merge branch 'gallery-nav-arrows' into main

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,9 +172,11 @@ const GalleryImage = ({
           >
             gallery <span className="bg-gray-300 text-black">esc</span>
           </Link>
+        </nav>
+        <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"
+              className={ArrowLinkClasses}
               state={{
                 currentIndex: currentIndex - 1,
                 sortedImageList,
@@ -177,29 +185,14 @@ const GalleryImage = ({
               }}
               to={`/photogallery/${prevImage}/`}
             >
-              previous <span className="bg-gray-300 text-black">&#11104;</span>
+              <span className="p-1 lg:p-4 bg-muted-light/25 rounded-full"><ChevronLeft /></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={classnames("flex", orientationClasses)}>
+          <div className={classnames("pb-2 flex", orientationClasses)}>
             <div
               className={classnames(
                 zoom ? "cursor-zoom-out" : "cursor-zoom-in",
-              "mb-2"
+                "mb-2 self-center"
               )}
               onClick={() => setZoom((_zoom) => !_zoom)}
               style={{
@@ -271,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 />}
@@ -313,7 +306,21 @@ const GalleryImage = ({
               </div>
             </div>
           </div>
-        <div></div>
+          {nextImage && (
+            <Link
+              className={ArrowLinkClasses}
+              state={{
+                currentIndex: currentIndex + 1,
+                sortedImageList,
+                filterKeyword,
+                sortKey,
+              }}
+              to={`/photogallery/${nextImage}/`}
+            >
+              <span className="p-1 lg:p-4 bg-muted-light/25 rounded-full"><ChevronRight /></span>
+            </Link>
+          )}
+        </div>
       </div>
     </>
   );

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}