From fd45ce1731790f834ffc5c40b7aaa056fa1cc3c1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Sat, 29 Feb 2020 10:47:46 +0100
Subject: [PATCH] Carousel: Rewrite some classes

---
 src/organisms/Carousel.svelte      | 24 ++++++----
 src/style/organisms/_carousel.scss | 74 ++++++++++++++----------------
 2 files changed, 50 insertions(+), 48 deletions(-)

diff --git a/src/organisms/Carousel.svelte b/src/organisms/Carousel.svelte
index 34b56a7..428e708 100644
--- a/src/organisms/Carousel.svelte
+++ b/src/organisms/Carousel.svelte
@@ -159,17 +159,23 @@
             {/if}
         </div>
 
-        <div class="carousel__information">
-            <div class="carousel__information--location style-location">
-                <p class="street">
-                    {currentPhoto.name}
-                </p>
-                <p class="state style-caps style-caps--transparent">
-                    {currentPhoto.location.region}, {currentPhoto.location.country.name}
-                </p>
+        <div class="carousel__infos">
+            <div class="carousel__infos--locations">
+                {#each photos as photo, index}
+                <div class="carousel__infos--location style-location"
+                    class:prev={photo === prevPhoto}
+                    class:active={photo === currentPhoto}
+                    class:next={photo === nextPhoto}
+                >
+                    <p class="street">{photo.name}</p>
+                    <p class="state style-caps style-caps--transparent">
+                        {photo.location.name}, {photo.location.country.name}
+                    </p>
+                </div>
+                {/each}
             </div>
             {#if viewer}
-            <p class="carousel__information--date">{dayjs(currentPhoto.created_on).format('MMM Do, YYYY')}</p>
+            <p class="carousel__infos--date">{dayjs(currentPhoto.created_on).format('MMM Do, YYYY')}</p>
             {/if}
         </div>
 
diff --git a/src/style/organisms/_carousel.scss b/src/style/organisms/_carousel.scss
index e1d9e2a..b01fbea 100644
--- a/src/style/organisms/_carousel.scss
+++ b/src/style/organisms/_carousel.scss
@@ -185,53 +185,49 @@
     /*
     ** Information
     */
-    &__information {
+    &__infos {
         position: relative;
         z-index: 3;
 
+        // Locations
+        &--locations {
+            position: relative;
+            overflow: hidden;
+            min-height: 128px;
+        }
+
         // Location
         &--location {
+            $distance: 40%;
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            opacity: 0;
             text-align: center;
+            transition: transform 0.9s $ease-quart, opacity 0.9s $ease-quart;
+            will-change: transform, opacity;
+            margin-top: 32px;
 
-            .street {
-                width: 100%;
-                position: relative;
-                margin-top: 32px;
-                height: 30px;
-
-                @include breakpoint (sm) {
-                    margin-top: pxVW(80);
-                }
-                @include breakpoint (xl) {
-                    margin-top: 72px;
-                }
-
-                span {
-                    $distance: 40%;
-
-                    position: absolute;
-                    display: block;
-                    top: 0;
-                    left: 0;
-                    width: 100%;
-                    white-space: nowrap;
-                    transform: translateY(-$distance);
-                    opacity: 0;
-                    transition: transform 0.9s $ease-quart, opacity 0.9s $ease-quart;
-                    will-change: transform, opacity;
-
-                    &.prev {
-                        transform: translateY(-$distance);
-                    }
-                    &.active {
-                        transform: translateY(0);
-                        opacity: 1;
-                    }
-                    &.next {
-                        transform: translateY($distance);
-                    }
-                }
+            @include breakpoint (sm) {
+                margin-top: pxVW(80);
             }
+            @include breakpoint (xl) {
+                margin-top: 72px;
+            }
+
+            &.prev {
+                transform: translateY(-$distance);
+            }
+            &.active {
+                transform: translateY(0);
+                opacity: 1;
+            }
+            &.next {
+                transform: translateY($distance);
+            }
+
+            // State
             .state {
                 margin-top: 6px;
             }