From acbcdc82ca1067932a74d23cae02234c6d0ab98e Mon Sep 17 00:00:00 2001 From: Sol25 Date: Sat, 14 Oct 2023 15:23:56 +0200 Subject: [PATCH] fixed bugs --- .../Components/RoadDetails/ImageGallery.tsx | 113 +++++++++--------- frontend/src/css/road_details.css | 57 +++++---- 2 files changed, 89 insertions(+), 81 deletions(-) diff --git a/frontend/src/Components/RoadDetails/ImageGallery.tsx b/frontend/src/Components/RoadDetails/ImageGallery.tsx index 394f93ba..0d4ca5b1 100644 --- 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(null); - const [showArrows, setShowArrows] = useState(true); + const [centerImages, setCenterImages] = useState(false); + const galleryRef = useRef(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 ( -
-
+
+
{ ))}
- {showArrows && ( - <> - - - - )} + +
); }; diff --git a/frontend/src/css/road_details.css b/frontend/src/css/road_details.css index 5eaffc7d..807ff0d1 100644 --- a/frontend/src/css/road_details.css +++ b/frontend/src/css/road_details.css @@ -164,6 +164,9 @@ input[type='checkbox'] { overflow: auto; white-space: nowrap; overflow: hidden; + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; } .image-gallery-container { @@ -171,28 +174,24 @@ input[type='checkbox'] { 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; } + +