From 05983d0834dd3f9ed786071f83624327e353aa0d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ail=C3=A9n=20Grimaldi?=
 <63558201+ail3ngrimaldi@users.noreply.github.com>
Date: Fri, 19 Jul 2024 12:56:21 -0300
Subject: [PATCH] Testimonial fixes (arrows and transition) (#164)

* fix arrow position and add animation

* add console log in order to check env vars

* add possibility to scroll testimonials on mobile - needs to be checked

* delete consolelog
---
 css/index.css | 43 ++++++++++++++++++++++----
 index.liquid  | 84 +++++++++++++++++++++++++++++----------------------
 2 files changed, 85 insertions(+), 42 deletions(-)

diff --git a/css/index.css b/css/index.css
index 684b9bb..03b2061 100644
--- a/css/index.css
+++ b/css/index.css
@@ -168,19 +168,49 @@ figure.logo svg {
 }
 
 /*Testimonial*/
+#testimonials, #testimonials>article {
+    flex-direction: column;
+    justify-content: center;
+    overflow: hidden;
+}
+
 .testimonials-container {
+    position: relative;
+    min-height: 600px;
+    width: 70%;
     display: flex;
     align-items: center;
-    position: relative;
+    overflow-x: auto;
+    scroll-snap-type: x mandatory;
+    -webkit-overflow-scrolling: touch;
 }
 
 .testimonial {
-    max-width: 60%;
-    margin: 0 auto;
+    position: absolute;
+    left: 100%;
+    transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out, left 0.5s ease-in-out;
+    opacity: 0;
+    background-color: var(--clr-white);
+    border-radius: 35px;
+    padding: 2em;
+    box-shadow: 4px 4px 5px -3px rgba(158,158,158,0.47);
+	-webkit-box-shadow: 4px 4px 5px -3px rgba(158,158,158,0.47);
+	-moz-box-shadow: 4px 4px 5px -3px rgba(158,158,158,0.47);
+    min-width: 100%;
+    flex: 0 0 auto;
+    scroll-snap-align: start;
+}
+
+.testimonial.active {
+    opacity: 1;
+    left: 0;
+    transform: translateX(0);
 }
 
 .testimonial.hidden {
-    display: none;
+    left: -100%;
+    opacity: 0;
+    transform: translateX(-100%);
 }
 
 .avatar {
@@ -192,13 +222,14 @@ figure.logo svg {
 
 .testimonial-message {
     font-style: italic;
-    padding: 1rem; 
+    padding: 1rem;
 }
 
 .arrow {
-    position: absolute;
+    position: fixed;
     top: 50%;
     transform: translateY(-50%);
+    z-index: 1;
 }
 
 .left {
diff --git a/index.liquid b/index.liquid
index b85a47b..f63d1f1 100644
--- a/index.liquid
+++ b/index.liquid
@@ -86,26 +86,26 @@ data:
 {% endif %}
 
 {% if home_section.id == "testimonials" %}
-	<section id="testimonials" class="light-lavender-bg center">
-		<article class="max animated column">
-			<h2 class="dark-lavender-text">{{ home_section.title }}</h2>
-			<div class="testimonials-container">
-				{% for testimonial in home_section.testimonials %}
-					<div class="testimonial {% unless forloop.first %}hidden{% endunless %}">
-						<img src="{{ testimonial.avatar }}" alt="Avatar de {{ testimonial.person }}" class="avatar">
-						<p class="testimonial-message">{{ testimonial.message }}</p>
-						<p class="testimonial-person bolder">{{ testimonial.person }}</p>
-					</div>
-				{% endfor %}
-				<a class="arrow left" id="prevTestimonial">
-					{% include "left.svg" %}
-				</a>
-				<a class="arrow right" id="nextTestimonial">
-					{% include "right.svg" %}
-				</a>
-			</div>
-		</article>
-	</section>
+    <section id="testimonials" class="light-lavender-bg center">
+        <article class="max animated column">
+		<h2 class="dark-lavender-text">{{ home_section.title }}</h2>
+            <div class="testimonials-container">
+                {% for testimonial in home_section.testimonials %}
+                    <div class="testimonial {% if forloop.first %}active{% endif %}">
+                        <img src="{{ testimonial.avatar }}" alt="Avatar de {{ testimonial.person }}" class="avatar">
+                        <p class="testimonial-message">{{ testimonial.message }}</p>
+                        <p class="testimonial-person bolder">{{ testimonial.person }}</p>
+                    </div>
+                {% endfor %}
+                <a class="arrow left" id="prevTestimonial">
+                    {% include "left.svg" %}
+                </a>
+                <a class="arrow right" id="nextTestimonial">
+                    {% include "right.svg" %}
+                </a>
+            </div>
+        </article>
+    </section>
 {% endif %}
 
 {% if home_section.id == "qa" %}
@@ -175,25 +175,37 @@ const whenVisible = (elements, fn, opts) => {
 	const ob = new IntersectionObserver(fn, opts);
 	$$(elements).forEach(e => ob.observe(e));
 };
-const makeSticky = ([br]) =>
-	br.target.nextElementSibling.classList.toggle('fixed', br.intersectionRatio === 1);
 
-whenVisible('main>section', addViewedClass, { threshold: 0.2 });
-whenVisible('.sticky-hack', makeSticky, { threshold: [0, 1] });
-
-const testimonials = document.querySelectorAll('.testimonial');
-const prevButton = document.getElementById('prevTestimonial');
-const nextButton = document.getElementById('nextTestimonial');
-let currentTestimonial = 0;
+document.addEventListener('DOMContentLoaded', () => {
+    const testimonials = document.querySelectorAll('.testimonial');
+    let currentIndex = 0;
+
+    function showTestimonial(index) {
+        testimonials.forEach((testimonial, i) => {
+            if (i === index) {
+                testimonial.classList.add('active');
+                testimonial.classList.remove('hidden');
+            } else {
+                if (testimonial.classList.contains('active')) {
+                    testimonial.classList.remove('active');
+                    testimonial.classList.add('hidden');
+                }
+            }
+        });
+    }
+
+    document.getElementById('prevTestimonial').addEventListener('click', () => {
+        currentIndex = (currentIndex === 0) ? testimonials.length - 1 : currentIndex - 1;
+        showTestimonial(currentIndex);
+    });
 
-function showTestimonial(index) {
-    testimonials[currentTestimonial].classList.add('hidden');
-    currentTestimonial = (index + testimonials.length) % testimonials.length;
-    testimonials[currentTestimonial].classList.remove('hidden');
-}
+    document.getElementById('nextTestimonial').addEventListener('click', () => {
+        currentIndex = (currentIndex === testimonials.length - 1) ? 0 : currentIndex + 1;
+        showTestimonial(currentIndex);
+    });
 
-prevButton.addEventListener('click', () => showTestimonial(currentTestimonial - 1));
-nextButton.addEventListener('click', () => showTestimonial(currentTestimonial + 1));
+    showTestimonial(currentIndex);
+});
 
 const questionButtons = document.querySelectorAll('.question-button');