From a44b013bb0152f1ceb9847348b6963dcac5371a1 Mon Sep 17 00:00:00 2001 From: Bhaskar Metiya Date: Mon, 22 Jul 2024 05:37:59 +0530 Subject: [PATCH] update logo + schedule infinite scroll --- src/assets/images/Navbar/logo.svg | 26 +++++++++++++------------- src/components/Schedule/Schedule.jsx | 9 ++++++++- 2 files changed, 21 insertions(+), 14 deletions(-) diff --git a/src/assets/images/Navbar/logo.svg b/src/assets/images/Navbar/logo.svg index 5237ffe..4d7d90f 100644 --- a/src/assets/images/Navbar/logo.svg +++ b/src/assets/images/Navbar/logo.svg @@ -1,16 +1,16 @@ - - - - + + + + - - - - - + + + + + - - - - + + + + diff --git a/src/components/Schedule/Schedule.jsx b/src/components/Schedule/Schedule.jsx index 07d9f85..2a66151 100644 --- a/src/components/Schedule/Schedule.jsx +++ b/src/components/Schedule/Schedule.jsx @@ -9,7 +9,9 @@ function Schedule() { useEffect(() => { if (timelineWrapperRef.current) { + let leftPosition = 0; if (window.innerWidth < 768) { + leftPosition = 20; document.querySelector('.timeline-wrapper').scrollTo({ left: 20, behavior: 'smooth' }); } const timelineElementWidth = 338; @@ -44,10 +46,15 @@ function Schedule() { .scrollTo({ left: leftPosition, behavior: 'smooth' }); }); + let maxScrollLeft = timelineElementWidth * 5; + if(timelineWrapperWidth >= timelineElementWidth * 2) maxScrollLeft = timelineElementWidth * 4; + if(timelineWrapperWidth >= timelineElementWidth * 3) maxScrollLeft = timelineElementWidth * 3; + document.querySelector('.next').addEventListener('click', () => { const timelineWrapperWidth = document.querySelector('.timeline-wrapper').clientWidth; - const leftPosition = document.querySelector('.timeline-wrapper').scrollLeft + timelineElementWidth; + leftPosition = leftPosition + timelineElementWidth; + if(leftPosition >= maxScrollLeft) leftPosition = (window.innerWidth < 768) ? 20 : 0; document .querySelector('.timeline-wrapper') .scrollTo({ left: leftPosition, behavior: 'smooth' });