More gallery changes

nemeseri · Oct 28, 2024 · 4d7501b · 4d7501b
1 parent cb7cced
commit 4d7501b
Show file tree

Hide file tree

Showing 3 changed files with 109 additions and 56 deletions.
diff --git a/src/assets/street-photography.css b/src/assets/street-photography.css
@@ -29,73 +29,72 @@
   height: 100vh;
   z-index: 2;
   background-color: rgba(0, 0, 0, .8);
-  padding: 3rem;
+  padding: 3rem 5.5rem;
   max-width: none;
   max-height: none;
 }
 
-.street-photography .loader {
-  width: 20px;
-  margin: 0 auto;
-  aspect-ratio: 1;
-  border-radius: 50%;
-  animation: l5 1s infinite linear alternate;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  margin: -10px 0 0 -10px;
-  opacity: 0;
-  transition: opacity 0s 200ms;
-}
-@keyframes l5 {
-    0%  {box-shadow: 25px 0 #fff, -25px 0 #fff2;background: #fff }
-    33% {box-shadow: 25px 0 #fff, -25px 0 #fff2;background: #fff2}
-    66% {box-shadow: 25px 0 #fff2,-25px 0 #fff; background: #fff2}
-    100%{box-shadow: 25px 0 #fff2,-25px 0 #fff; background: #fff }
-}
-
-.street-photography .loading .loader {
-  opacity: 1;
-}
-
 .street-photography dialog[open] {
   display: flex;
   align-items: center;
 }
 
-.street-photography dialog button {
+.street-photography dialog .close {
   position: absolute;
-  top: 1rem;
-  right: 1rem;
-  width: 2.5rem;
-  height: 2.5rem;
+  top: 1.5rem;
+  right: 1.5rem;
+  width: 50px;
+  height: 50px;
   padding: 0;
   background: none;
   border: 0;
   cursor: pointer;
   text-indent: -9999px;
   overflow: hidden;
   display: block;
-  border-radius: 0.6rem;
-  border: 2px solid #fff;
+  border-radius: 25px;
+  border: 4px solid #fff;
   color: #fff;
 }
 
-.street-photography dialog button::before {
+.street-photography dialog .close::before {
   content: 'X';
   display: block;
   text-align: center;
   text-indent: 0;
-  line-height: 2.4rem;
+  line-height: 42px;
   color: #fff;
-  font-size: 1.2rem;
+  font-size: 1.4rem;
+  font-weight: 600;
 }
 
-.street-photography dialog button:hover::before {
+.street-photography dialog .close:hover::before {
   background-color: #fff;
   color: #000;
 }
 
+.street-photography dialog .left-arrow,
+.street-photography dialog .right-arrow {
+  position: absolute;
+  top: 50%;
+  left: 1.5rem;
+  margin: -125px 0 0 0;
+  height: 250px;
+  width: 50px;
+  text-indent: -999px;
+  overflow: hidden;
+  border: 0;
+  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg data-name='21.Arrow Left'%3E%3Cpath fill='%23fff' d='M12 24a12 12 0 1 1 12-12 12.013 12.013 0 0 1-12 12zm0-22a10 10 0 1 0 10 10A10.011 10.011 0 0 0 12 2z'/%3E%3Cpath fill='%23fff' d='M10.293 16.707 5.586 12l4.707-4.707 1.414 1.414L8.414 12l3.293 3.293-1.414 1.414z'/%3E%3Cpath fill='%23fff' d='M7 11h11v2H7z'/%3E%3C/g%3E%3C/svg%3E") no-repeat 0 50%;
+  cursor: pointer;
+  z-index: 3;
+}
+
+.street-photography dialog .right-arrow {
+  left: auto;
+  right: 1.5rem;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg data-name='20.Arrow Right'%3E%3Cpath fill='%23fff' d='M12 24a12 12 0 1 1 12-12 12.013 12.013 0 0 1-12 12zm0-22a10 10 0 1 0 10 10A10.011 10.011 0 0 0 12 2z'/%3E%3Cpath fill='%23fff' d='m13.707 16.707-1.414-1.414L15.586 12l-3.293-3.293 1.414-1.414L18.414 12l-4.707 4.707z'/%3E%3Cpath fill='%23fff' d='M6 11h11v2H6z'/%3E%3C/g%3E%3C/svg%3E");
+}
+
 .street-photography dialog img {
   display: block;
   margin: 0 auto;
@@ -109,6 +108,42 @@
   display: none;
 }
 
+.street-photography .loader {
+  width: 20px;
+  aspect-ratio: 1;
+  border-radius: 50%;
+  animation: l5 1s infinite linear alternate;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin: -10px 0 0 -10px;
+  opacity: 0;
+  transition: opacity 0s 200ms;
+}
+@keyframes l5 {
+    0%  {box-shadow: 25px 0 #fff, -25px 0 #fff2;background: #fff }
+    33% {box-shadow: 25px 0 #fff, -25px 0 #fff2;background: #fff2}
+    66% {box-shadow: 25px 0 #fff2,-25px 0 #fff; background: #fff2}
+    100%{box-shadow: 25px 0 #fff2,-25px 0 #fff; background: #fff }
+}
+
+.street-photography .loading .loader {
+  opacity: 1;
+}
+
+@media only screen and (max-width: 1023px) {
+  .street-photography dialog .left-arrow {
+    left: 1rem;
+  }
+  .street-photography dialog .right-arrow {
+    right: 1rem;
+  }
+  .street-photography dialog .close {
+    top: 1rem;
+    right: 1rem;
+  }
+}
+
 @media only screen and (max-width: 767px) {
   .gallery {
     flex-wrap: wrap;
@@ -117,4 +152,9 @@
   .gallery .col {
     width: 48%;
   }
+
+  .street-photography dialog .left-arrow,
+  .street-photography dialog .right-arrow {
+    display: none;
+  }
 }
diff --git a/src/components/GalleryDialog.tsx b/src/components/GalleryDialog.tsx
@@ -2,11 +2,12 @@ import { useEffect, useState, useRef } from "react";
 
 type GalleryDialogProps = {
   photo: FlickrImgInSet | null;
-  handleClose: React.MouseEventHandler<HTMLDialogElement>;
-  handleKeys: React.KeyboardEventHandler<HTMLDialogElement>;
+  handleClose: () => void;
+  handleNext: () => void;
+  handlePrevious: () => void;
 }
 
-export default function GalleryDialog({ photo, handleClose, handleKeys }: GalleryDialogProps) {
+export default function GalleryDialog({ photo, handleClose, handleNext, handlePrevious }: GalleryDialogProps) {
   const [isLoading, setIsLoading] = useState<boolean>(false);
   const dialogRef = useRef<HTMLDialogElement>(null);
   const isOpen = !!photo;
@@ -23,10 +24,31 @@ export default function GalleryDialog({ photo, handleClose, handleKeys }: Galler
     setIsLoading(true);
   }, [photo]);
 
+  function handleKeys(e: React.KeyboardEvent<HTMLDialogElement>) {
+    if (e.key === 'Escape') {
+      e.preventDefault();
+      handleClose();
+    } else if (e.key === 'ArrowRight') {
+      handleNext();
+    } else if (e.key === 'ArrowLeft') {
+      handlePrevious();
+    }
+  }
+
   return (
     <dialog onClick={handleClose} onKeyDown={handleKeys} ref={dialogRef} className={isLoading ? 'loading' : ''}>
-      <button>Close</button>
-      <div className='loader'></div>
+      <button className='close'>Close</button>
+
+      <button className='left-arrow' onClick={e => {
+        e.stopPropagation();
+        handlePrevious();
+      }}>Go Left</button>
+
+      <button className='right-arrow' onClick={e => {
+        e.stopPropagation();
+        handleNext();
+      }}>Go Right</button>
+
       {photo && 
         <img src={photo.largeUrl} 
           key={photo.id} 
@@ -35,6 +57,7 @@ export default function GalleryDialog({ photo, handleClose, handleKeys }: Galler
           onClick={(e) => e.stopPropagation()}
           onLoad={() => setIsLoading(false)}
       />}
+      <div className='loader'></div>
     </dialog>
   );
 }
diff --git a/src/routes/street-photography.tsx b/src/routes/street-photography.tsx
@@ -38,29 +38,18 @@ function StreetPhotography() {
       });
   }, []);
 
-  function handleKeys(e: React.KeyboardEvent<HTMLDialogElement>) {
-    if (e.key === 'Escape') {
-      e.preventDefault();
-      setActivePhoto(null);
-    } else if (e.key === 'ArrowRight') {
-      showNextPhoto();
-    } else if (e.key === 'ArrowLeft') {
-      showPrevPhoto();
-    }
-  }
-
-  function showNextPhoto() {
+  function nextPhoto() {
     const currentIdx = activePhoto ? photos.indexOf(activePhoto) : null;
     if (currentIdx !== null) {
       const targetIdx = currentIdx === photos.length - 1 ? 0 : currentIdx+1;
       setActivePhoto(photos[targetIdx]);
     }
   }
 
-  function showPrevPhoto() {
+  function previousPhoto() {
     const currentIdx = activePhoto ? photos.indexOf(activePhoto) : null;
     if (currentIdx !== null) {
-      const targetIdx = currentIdx === photos.length - 1 ? 0 : currentIdx+1;
+      const targetIdx = currentIdx === photos.length - 1 ? 0 : currentIdx-1;
       setActivePhoto(photos[targetIdx]);
     }
   }
@@ -83,7 +72,8 @@ function StreetPhotography() {
       <GalleryDialog 
         photo={activePhoto} 
         handleClose={() => setActivePhoto(null)}
-        handleKeys={handleKeys}  />
+        handleNext={nextPhoto}
+        handlePrevious={previousPhoto}  />
     </>
   );
 }