fixed bugs

DTU-SE-Group-D · Oct 14, 2023 · acbcdc8 · acbcdc8
1 parent b43e5ef
commit acbcdc8
Show file tree

Hide file tree

Showing 2 changed files with 89 additions and 81 deletions.
diff --git a/frontend/src/Components/RoadDetails/ImageGallery.tsx b/frontend/src/Components/RoadDetails/ImageGallery.tsx
@@ -1,4 +1,4 @@
-import React, { useRef, useEffect, useState } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 
 interface Image {
   id: number;
@@ -70,53 +70,60 @@ const images: Image[] = [
 
 const ImageGallery: React.FC = () => {
   const [scrollPosition, setScrollPosition] = useState(0);
-  const containerRef = useRef<HTMLDivElement>(null);
-  const [showArrows, setShowArrows] = useState(true);
+  const [centerImages, setCenterImages] = useState(false);
+  const galleryRef = useRef<HTMLDivElement>(null);
 
   const openImageInNewTab = (imageUrl: string) => {
     window.open(imageUrl, '_blank');
   };
 
   const handleScroll = (scrollOffset: number) => {
-    if (!containerRef.current) return;
+    const newScrollPosition = scrollPosition + scrollOffset;
+    const maxScrollLimit = (images.length - 11.4) * 120;
 
-    const containerWidth = containerRef.current.clientWidth;
-    const totalImageWidth = images.length * 124; // 120 for the image width and 4 for margin
+    const boundedScrollPosition = Math.max(
+      0,
+      Math.min(newScrollPosition, maxScrollLimit),
+    );
 
-    const centerOffset = (containerWidth - totalImageWidth) / 2;
-
-    let newScrollPosition = scrollPosition + scrollOffset;
-
-    // If scrolling to the left, don't go past half the container's width
-    if (scrollOffset < 0) {
-      newScrollPosition = Math.max(newScrollPosition, centerOffset);
-    }
-    // If scrolling to the right, don't go past the width of the images minus half the container's width
-    else {
-      newScrollPosition = Math.min(
-        newScrollPosition,
-        totalImageWidth - containerWidth + centerOffset,
-      );
-    }
-
-    setScrollPosition(newScrollPosition);
+    setScrollPosition(boundedScrollPosition);
   };
 
   useEffect(() => {
-    if (containerRef.current) {
-      const containerWidth = containerRef.current.clientWidth;
-      const totalImageWidth = images.length * 124;
-      if (totalImageWidth <= containerWidth) {
-        setShowArrows(false);
+    const checkImagesWidth = () => {
+      const galleryWidth = galleryRef.current?.offsetWidth || 0;
+      let totalWidth = 0;
+
+      const imageElements =
+        galleryRef.current?.querySelectorAll('.image-thumbnail');
+      imageElements?.forEach((imgElement) => {
+        // Telling TypeScript that imgElement is an HTMLElement
+        const img = imgElement as HTMLElement;
+        totalWidth += img.offsetWidth;
+      });
+
+      if (totalWidth <= galleryWidth) {
+        setCenterImages(true);
       } else {
-        setShowArrows(true);
+        setCenterImages(false);
       }
-    }
-  }, []);
+    };
+
+    checkImagesWidth();
+
+    window.addEventListener('resize', checkImagesWidth);
+
+    return () => {
+      window.removeEventListener('resize', checkImagesWidth);
+    };
+  }, [images]);
 
   return (
-    <div className="image-gallery-container" ref={containerRef}>
-      <div className="image-gallery-page">
+    <div className="image-gallery-container">
+      <div
+        className={`image-gallery-page ${centerImages ? 'center-images' : ''}`}
+        ref={galleryRef}
+      >
         <div
           className="image-container"
           style={{ transform: `translateX(-${scrollPosition}px)` }}
@@ -132,28 +139,24 @@ const ImageGallery: React.FC = () => {
           ))}
         </div>
       </div>
-      {showArrows && (
-        <>
-          <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>
-        </>
-      )}
+      <button
+        className={`arrow-button left-arrow ${
+          scrollPosition === 0 ? 'disabled' : ''
+        }`}
+        onClick={() => handleScroll(-120)}
+        disabled={scrollPosition === 0}
+      >
+        &#9668;
+      </button>
+      <button
+        className={`arrow-button right-arrow ${
+          scrollPosition === (images.length - 11.4) * 120 ? 'disabled' : ''
+        }`}
+        onClick={() => handleScroll(120)}
+        disabled={scrollPosition === (images.length - 11.4) * 120}
+      >
+        &#9658;
+      </button>
     </div>
   );
 };

diff --git a/frontend/src/css/road_details.css b/frontend/src/css/road_details.css
@@ -164,35 +164,34 @@ input[type='checkbox'] {
   overflow: auto;
   white-space: nowrap;
   overflow: hidden;
+  overflow-x: auto; 
+  overflow-y: hidden;
+  scroll-behavior: smooth;
 }
 
 .image-gallery-container {
   display: flex;
   justify-content: center; 
   align-items: center;
   position: relative;
-  overflow: hidden;
-  width: 100%;
-  padding-left: 15px;
-  padding-left: 15px;
-  padding-right: 15px;
+  scroll-behavior: smooth;
 }
 
 .image-gallery-page {
   display: flex;
-  justify-content: center;
-  align-items: center;
-  overflow-x: scroll;
-  padding-left: 15px;
-  padding-right: 15px;
+  transition: scroll .5s;
+  overflow-x: auto; /* Enable horizontal scrolling */
+  max-width: 100%; /* Set a maximum width */
+  white-space: nowrap;
+  scroll-behavior: smooth;
+  overflow-y: hidden; /*This gets rid of that annoying scroll rect on the right side of the gallery*/
 }
 
 .image-container {
   display: flex;
-  justify-content: center; /* This will center the images */
-  flex-wrap: nowrap; /* This will prevent images from wrapping to the next line */
-  transition: transform 0.3s ease;
-  overflow-y: hidden; /*Added this to stop vertical scroll rect to appear when hovering over images - SL*/
+  align-items: center;
+  margin-left: 0.5vh;
+  transition: transform 0.3s ease-out;
 }
 
 .image-thumbnail {
@@ -201,8 +200,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: 2px;
-  margin-top: 0.5vh;
+  margin-right: 4px;
+  margin-top: -30px;
   text-align: center;
   margin-left: 2px;
   flex-shrink: 0;
@@ -224,25 +223,31 @@ 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: 50px;
-  transform: rotate(180deg);
-  transform: translateY(-50%) rotate(180deg);
+  left: 10px;
 }
 
 .right-arrow {
-  right: 50px;
-  transform: translateY(-50%);
+  right: 10px;
 }
 
-.arrow-button.disabled {
-  opacity: 0;
-  pointer-events: none;
+.image-gallery-container:hover .arrow-button {
+  opacity: 1;
+}
+
+.arrow-button:hover {
+  background-color: #f7f7f7;  /* Slightly darker background on hover */
 }
 
-.image-thumbnail:first-child {
-  margin-left: 0;
+.image-gallery-page.center-images {
+  justify-content: center;
 }
+
+