From 67d9388ce2f2fa561c1a1f4113097f6422ec1eb3 Mon Sep 17 00:00:00 2001
From: Sol25 <SolomonLyons@protonmail.com>
Date: Thu, 12 Oct 2023 19:32:34 +0200
Subject: [PATCH] Gallery changes. Smooth scroll, small button changes, etc.

---
 .../Components/RoadDetails/ImageGallery.tsx   | 70 ++++++++++---------
 .../src/Components/RoadDetails/MapArea.tsx    | 12 +++-
 frontend/src/css/road_details.css             | 50 +++++++++++--
 3 files changed, 92 insertions(+), 40 deletions(-)

diff --git a/frontend/src/Components/RoadDetails/ImageGallery.tsx b/frontend/src/Components/RoadDetails/ImageGallery.tsx
index 53732eba..556eb572 100644
--- a/frontend/src/Components/RoadDetails/ImageGallery.tsx
+++ b/frontend/src/Components/RoadDetails/ImageGallery.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 
 interface Image {
   id: number;
@@ -70,18 +70,20 @@ const images: Image[] = [
 
 const ImageGallery: React.FC = () => {
   const [scrollPosition, setScrollPosition] = useState(0);
+  const galleryRef = useRef<HTMLDivElement>(null);
 
   const openImageInNewTab = (imageUrl: string) => {
     window.open(imageUrl, '_blank');
   };
 
   const handleScroll = (scrollOffset: number) => {
-    const newScrollPosition = scrollPosition + scrollOffset;
+    if (!galleryRef.current) return;
 
-    // Calculate the maximum scroll limit based on the total image width
-    const maxScrollLimit = (images.length - 11.4) * 124; // 120 is the width of each image
+    const currentScroll = galleryRef.current.scrollLeft;
+    const maxScrollLimit =
+      galleryRef.current.scrollWidth - galleryRef.current.clientWidth;
 
-    // Ensure the scroll stays within bounds
+    const newScrollPosition = currentScroll + scrollOffset;
     const boundedScrollPosition = Math.max(
       0,
       Math.min(newScrollPosition, maxScrollLimit),
@@ -90,41 +92,43 @@ const ImageGallery: React.FC = () => {
     setScrollPosition(boundedScrollPosition);
   };
 
+  const scrollLeft = () => {
+    handleScroll(-600);
+  };
+
+  const scrollRight = () => {
+    handleScroll(600);
+  };
+
+  useEffect(() => {
+    if (galleryRef.current) {
+      galleryRef.current.scrollLeft = scrollPosition;
+    }
+  }, [scrollPosition]);
+
   return (
     <div className="image-gallery-container">
-      <div className="image-gallery-page">
-        <div
-          className="image-container"
-          style={{ transform: `translateX(-${scrollPosition}px)` }}
-        >
-          {images.map((image) => (
+      <button className="arrow-button left-arrow" onClick={scrollLeft}>
+        &lt;
+      </button>
+      <div
+        className="image-gallery-page"
+        ref={galleryRef}
+        style={{ justifyContent: images.length <= 9 ? 'center' : 'flex-start' }}
+      >
+        {images.map((image) => (
+          <div className="image-container" key={image.id}>
             <img
-              key={image.id}
+              className="image-thumbnail"
               src={image.url}
-              alt={`Image ${image.id}`}
+              alt="Gallery Thumbnail"
               onClick={() => openImageInNewTab(image.url)}
-              className="image-thumbnail"
             />
-          ))}
-        </div>
+          </div>
+        ))}
       </div>
-      <button
-        className={`arrow-button left-arrow ${
-          scrollPosition === 0 ? 'disabled' : ''
-        }`}
-        onClick={() => handleScroll(-120)}
-        disabled={scrollPosition === 0}
-      >
-        &#9658;
-      </button>
-      <button
-        className={`arrow-button right-arrow ${
-          scrollPosition === (images.length - 1) * 124 ? 'disabled' : ''
-        }`}
-        onClick={() => handleScroll(120)}
-        disabled={scrollPosition === (images.length - 1) * 124}
-      >
-        &#9658;
+      <button className="arrow-button right-arrow" onClick={scrollRight}>
+        &gt;
       </button>
     </div>
   );
diff --git a/frontend/src/Components/RoadDetails/MapArea.tsx b/frontend/src/Components/RoadDetails/MapArea.tsx
index 1518b296..f94f61e8 100644
--- a/frontend/src/Components/RoadDetails/MapArea.tsx
+++ b/frontend/src/Components/RoadDetails/MapArea.tsx
@@ -21,14 +21,20 @@ const MapArea: React.FC<Props> = ({ triggerUpdate }) => {
   }, []);
 
   return (
-    <div className="map-area">
-      <div className="map_area" style={{ height: '100%' }}>
+    <div
+      className="map-area"
+      style={{ display: 'flex', flexDirection: 'column' }}
+    >
+      <div className="map_area" style={{ flex: 1, overflow: 'hidden' }}>
         <MapWrapper>
           <Roads roads={roads} />
           <ForceMapUpdate triggerUpdate={triggerUpdate} />
         </MapWrapper>
       </div>
-      <div className="imageGallery_container">
+      <div
+        className="imageGallery_container"
+        style={{ height: '95px', overflow: 'hidden' }}
+      >
         <ImageGallery /> {/* Use the imageGallery component */}
       </div>
     </div>
diff --git a/frontend/src/css/road_details.css b/frontend/src/css/road_details.css
index cd96b9f9..9be89618 100644
--- a/frontend/src/css/road_details.css
+++ b/frontend/src/css/road_details.css
@@ -1,3 +1,4 @@
+/* prettier-ignore-file */
 /* src/styles.css */
 
 /* Define styles for the top bar */
@@ -17,6 +18,7 @@
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
+  overflow-x: hidden;
 }
 
 /* Define styles for the plot area */
@@ -162,11 +164,16 @@ input[type='checkbox'] {
 
 .imageGallery_container {
   background-color: #999;
-  height: 14vh;
   margin-top: auto;
   overflow: auto;
   white-space: nowrap;
   overflow: hidden;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scroll-behavior: smooth;
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
 }
 
 .image-gallery-container {
@@ -174,18 +181,38 @@ input[type='checkbox'] {
   flex-direction: column; /* Stack children vertically */
   justify-content: center; /* Center children vertically */
   position: relative;
+  scroll-behavior: smooth;
 }
 
 .image-gallery-page {
   display: flex;
+  transition: scroll 0.5s;
   overflow-x: auto; /* Enable horizontal scrolling */
   max-width: 100%; /* Set a maximum width */
+  white-space: nowrap;
+  scroll-behavior: smooth;
+  scrollbar-width: none;
+  /* For Firefox */
+  -ms-overflow-style: none;
+  /* For Internet Explorer and Edge */
+  overflow-y: hidden; /*This gets rid of that annoying scroll rect on the right side of the gallery*/
+}
+
+.image-gallery-page::-webkit-scrollbar {
+  display: none;
+}
+
+.image-gallery-page.center-images .image-container {
+  justify-content: center;
+  display: flex;
+  width: 100%;
 }
 
 .image-container {
   display: flex;
   align-items: center;
   margin-left: 0.5vh;
+  transition: transform 0.3s ease-out;
 }
 
 .image-thumbnail {
@@ -194,8 +221,8 @@ input[type='checkbox'] {
   object-fit: cover; /* Preserve aspect ratio and cover the container */
   cursor: pointer;
   transition: transform 0.3s ease-in-out;
-  margin-right: 4px;
-  margin-top: 0.5vh;
+  margin-right: 2px;
+  margin-top: -11px;
   text-align: center;
 }
 
@@ -212,14 +239,29 @@ input[type='checkbox'] {
   align-items: center;
   justify-content: center;
   font-size: 13px;
+  opacity: 0;
+  transition: opacity 0.3s;
+  z-index: 1000;
+  top: 15px;
   /* color: #222; */
 }
 
 .left-arrow {
   left: 10px;
-  transform: rotate(180deg);
 }
 
 .right-arrow {
   right: 10px;
 }
+
+.image-gallery-container:hover .arrow-button {
+  opacity: 1;
+}
+
+.arrow-button:hover {
+  background-color: #f7f7f7; /* Slightly darker background on hover */
+}
+
+.image-gallery-page.center-images {
+  justify-content: center;
+}