mobile improvements

inovex · Oct 19, 2023 · cc7e629 · cc7e629
1 parent 45660ff
commit cc7e629
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 24 deletions.
diff --git a/src/components/Feedback/Feedback.astro b/src/components/Feedback/Feedback.astro
@@ -88,13 +88,6 @@ const feedback: FeedbackItem[] = [
     image: "favicon.svg",
     feedback: "Also ich finde scrumlr nicht so cool...",
   },
-  {
-    name: "Selina Lusting",
-    role: "PO",
-    company: "scrumlr Inc.",
-    image: "favicon.svg",
-    feedback: "Also ich finde scrumlr nicht so cool...",
-  },
 ];
 ---
 
@@ -111,7 +104,14 @@ const feedback: FeedbackItem[] = [
     display: flex;
     flex-direction: column;
     align-items: center;
-    margin-bottom: 128px;
+    margin-bottom: 4vh;
+
+    h2,
+    p {
+      max-width: 80%;
+      text-align: center;
+      text-wrap: balance;
+    }
   }
 
   .feedback_carousel-container {

diff --git a/src/components/Feedback/FeedbackCarousel.scss b/src/components/Feedback/FeedbackCarousel.scss
@@ -16,9 +16,9 @@
 
 .feedback-carousel_controls {
   justify-content: center;
+  align-items: center;
   display: flex;
   flex-direction: row;
-  gap: 16px;
   margin-top: 32px;
 }
 
@@ -30,6 +30,7 @@
   background-color: var(--lightmode-pink);
   cursor: pointer;
   opacity: 0.5;
+  margin: 0 8px;
 
   transition: all 0.1s ease-in-out;
 
@@ -42,8 +43,20 @@
   }
 
   &.active {
+    transform: scale(1.2);
     opacity: 1;
   }
+
+  &.small {
+    width: 4px;
+    height: 4px;
+  }
+
+  &.hidden {
+    width: 0px;
+    height: 0px;
+    margin: 0;
+  }
 }
 
 .use-spring-carousel-item {
@@ -91,9 +104,31 @@
     }
 
     .feedback_card-author-info {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-evenly;
+
       .feedback_card-author-name {
         margin: 0;
       }
     }
   }
 }
+
+@media screen and (max-width: 375px) {
+  .feedback_card {
+    width: 286px;
+    height: 286px;
+    margin: 0;
+
+    .feedback_card-text {
+      font-size: 14px;
+      line-height: 22px;
+      overflow: scroll;
+    }
+
+    .feedback_card-author-info {
+      font-size: 14px;
+    }
+  }
+}
diff --git a/src/components/Feedback/FeedbackCarousel.tsx b/src/components/Feedback/FeedbackCarousel.tsx
@@ -74,11 +74,12 @@ const FeedbackCarousel = ({ items }: FeedbackCarouselProps) => {
   );
   const [activeSlide, setActiveSlide] = useState(0);
   const size = useElementSize("feedback-carousel");
-  const availableSpace = size ? Math.floor(size.width / 365) : 1;
+  const availableSpace = size ? Math.floor(size.width / 400) : 1;
   const itemsPerSlide = availableSpace > 4 ? 4 : availableSpace;
 
   useEffect(() => {
-    setGroupedFeedback(groupArrayIntoChunks(items, 4));
+    setGroupedFeedback(groupArrayIntoChunks(items, itemsPerSlide || 1));
+    console.log(items, itemsPerSlide || 1, groupedFeedback);
   }, [items, itemsPerSlide]);
 
   const {
@@ -110,18 +111,30 @@ const FeedbackCarousel = ({ items }: FeedbackCarouselProps) => {
     <div id="feedback-carousel">
       {groupedFeedback?.length && carouselFragment}
       <div className="feedback-carousel_controls">
-        {groupedFeedback.map((_, index) => (
-          <button
-            key={index}
-            className={`feedback-carousel_dot ${
-              activeSlide === index ? "active" : ""
-            }`}
-            onClick={() => {
-              slideToItem(index);
-              setActiveSlide(index);
-            }}
-          />
-        ))}
+        {groupedFeedback.map((_, index) => {
+          const distance = Math.abs(activeSlide - index);
+          let dotState = "";
+          if (activeSlide === index) dotState = "active";
+          else if (
+            distance === 3 &&
+            index !== 0 &&
+            index !== groupedFeedback.length - 1
+          )
+            dotState = "small";
+          else if (distance > 3) dotState = "hidden";
+
+          return (
+            <button
+              key={index}
+              className={`feedback-carousel_dot ${dotState}
+                `}
+              onClick={() => {
+                slideToItem(index);
+                setActiveSlide(index);
+              }}
+            />
+          );
+        })}
       </div>
     </div>
   );

diff --git a/src/views/AboutUs/AboutUs.scss b/src/views/AboutUs/AboutUs.scss
@@ -4,7 +4,7 @@
   justify-content: center;
   align-items: center;
   gap: 64px;
-  padding-top: 128px;
+  padding-top: min(148px, 10vh);
   overflow: hidden;
 }
 
@@ -112,6 +112,7 @@
 @media screen and (max-width: 992px) {
   .about-us {
     gap: 0;
+    padding-top: 0;
   }
 
   .about-us__scrumlr {