Merge pull request #35 from elijames-codecov/dylan/carousel-fixes

Fix Disabled check on Next button for Carousel
elijames-codecov · Aug 5, 2024 · 6f44045 · 6f44045
2 parents 4ef2720 + 43ae294
commit 6f44045
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 25 deletions.
diff --git a/src/components/Carousel.jsx b/src/components/Carousel.jsx
@@ -30,45 +30,31 @@ const Carousel = ({companies}) => {
 
     if (direction === 'next' && carousel.current !== null) {
       return (
-        movement * currentIndex >= maxScrollWidth.current
+        (movement * (currentIndex + 3)) >= maxScrollWidth.current
       );
     }
 
     return false;
   };
 
-  const calcMovement = () => {
-    const container = carousel.current;
-    const totalWidth = Array.from(container.querySelectorAll('.carousel-item'))
-        .reduce((sum, div) => sum + div.getBoundingClientRect().width, 0);
-    const numCards = companies?.length || 0;
-
-    console.log('Total width of child divs:', totalWidth, 'pixels');
-    console.log('Should move', totalWidth / numCards)
-    return totalWidth/numCards;
-  };
-
   useEffect(() => {
     if (carousel !== null && carousel.current !== null) {
       carousel.current.scrollLeft = movement * currentIndex;
     }
-    // const carouselWrapper = document.querySelectorAll('.carousel-wrapper')[0];
-    // if (currentIndex > 0) {
-    //   carouselWrapper.classList.add('carousel-wrapper-left');
-    // } else {
-    //   carouselWrapper.classList.remove('carousel-wrapper-left');
-    // }
+    const carouselWrapper = document.querySelectorAll('.carousel-wrapper')[0];
+    if (currentIndex > 0) {
+      carouselWrapper.classList.add('carousel-wrapper-left');
+    } else {
+      carouselWrapper.classList.remove('carousel-wrapper-left');
+    }
   }, [currentIndex]);
 
   useEffect(() => {
-    setMovement(calcMovement())
     maxScrollWidth.current = carousel.current
       ? carousel.current.scrollWidth - movement
       : 0;
   }, []);
 
-  console.log(currentIndex, movement, maxScrollWidth)
-
   return (
     <div className="carousel my-12">
       <div className="flex flex-wrap xl:justify-around container mx-auto mb-[3.5rem] px-[1.5rem] xl:px-[3rem]">
@@ -108,7 +94,7 @@ const Carousel = ({companies}) => {
       <div className="relative container-spill xl:pl-[3rem] carousel-wrapper carousel-wrapper-right">
         <div
           ref={carousel}
-          className="carousel-container no-scrollbar overflow-auto touch-pan-x relative flex gap-[1rem] scroll-smooth snap-x snap-mandatory z-0"
+          className="carousel-container no-scrollbar overflow-auto touch-pan-x relative flex gap-[1rem] scroll-smooth snap-x snap-mandatory z-0 lg:pr-[2rem]"
         >
           {companies && companies.map((companyData, index) => {
             return (

diff --git a/src/components/CarouselCard.jsx b/src/components/CarouselCard.jsx
@@ -3,22 +3,22 @@ import React from "react";
 const CarouselCard = ({company, border = false}) => {
 
   let background = company?.background ? `${company?.background}` : `#FFFFFF`;
-  let tileStyling = `h-[15rem] w-[21rem] lg:w-[24rem] px-[6.3125rem] py-[6rem] rounded-small mb-[1.5rem] ${border && !company?.background ? 'border-2 border-borderGray' : ''}`
+  let tileStyling = `lg:h-[15rem] h-[7.5rem] w-[12rem] lg:w-[24rem] lg:px-[6.3125rem] lg:py-[6rem] px-[2rem] py-[3rem] rounded-small mb-[1.5rem] ${border && !company?.background ? 'border-2 border-borderGray' : ''}`
 
   return (
     <a href={company.url} target="_BLANK" className='no-underline carousel-item text-center relative snap-start'>
       <div className={tileStyling} style={{backgroundColor: background}}>
         <img src={company.logo} alt={company.name} />
       </div>
       <div className="text-left">
-        <p className="text-[1.375rem] text-black font-[700] leading-[120%] tracking-[-0.03438rem] flex items-center">{company.name} 
+        <p className="mb-2 text-[1rem] lg:mb-0 lg:text-[1.375rem] text-black font-[700] leading-[120%] tracking-[-0.03438rem] flex items-center">{company.name}
           <span className="ml-[0.69rem]">
           <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15" fill="none">
             <path d="M1 2H13M13 2V14M13 2L1 14" stroke="#191919" stroke-width="2.3"/>
           </svg>
           </span>
         </p>
-        <p className="text-[1.375rem] text-black font-[500] leading-[120%] tracking-[-0.03438rem]">Since {company.adoption}</p>
+        <p className="text-[1rem] lg:text-[1.375rem] text-black font-[500] leading-[120%] tracking-[-0.03438rem]">Since {company.adoption}</p>
       </div>
     </a>
   )