From 3857223a544b396b999ca03d8cab896ad2d82b41 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Thu, 27 Feb 2020 23:06:52 +0100
Subject: [PATCH] Carousel: Working dots

---
 src/organisms/Carousel.svelte      | 21 +++++++--------------
 src/style/organisms/_carousel.scss | 10 +++++++---
 2 files changed, 14 insertions(+), 17 deletions(-)

diff --git a/src/organisms/Carousel.svelte b/src/organisms/Carousel.svelte
index f173a3e..34b56a7 100644
--- a/src/organisms/Carousel.svelte
+++ b/src/organisms/Carousel.svelte
@@ -1,6 +1,5 @@
 <script>
     import { onMount } from 'svelte'
-    import { fly } from 'svelte/transition'
     import { currentLocation } from '../store'
     import * as fn from '../functions'
 
@@ -163,17 +162,11 @@
         <div class="carousel__information">
             <div class="carousel__information--location style-location">
                 <p class="street">
-                    {#each photos as photo, index}
-                    <span aria-hidden={photo !== currentPhoto}
-                        class:prev={photo === prevPhoto}
-                        class:active={photo === currentPhoto}
-                        class:next={photo === nextPhoto}>
-                        {photo.name}
-                    </span>
-                    {/each}
+                    {currentPhoto.name}
+                </p>
+                <p class="state style-caps style-caps--transparent">
+                    {currentPhoto.location.region}, {currentPhoto.location.country.name}
                 </p>
-                <p class="state style-caps style-caps--transparent">Add the state!!!</p>
-                <!-- <p class="state style-caps style-caps--transparent">{photo.location.region}, {photo.location.country.name}</p> -->
             </div>
             {#if viewer}
             <p class="carousel__information--date">{dayjs(currentPhoto.created_on).format('MMM Do, YYYY')}</p>
@@ -183,8 +176,8 @@
         {#if !viewer}
         <ol class="carousel__dots">
             {#each photos as page, index}
-            <li class:active={index === 0}>
-                <button aria-label="Go to image #{index + 1}"></button>
+            <li class:active={page === currentPhoto} on:click={() => currentIndex = index}>
+                <button aria-label="Go to photo #{index + 1}"></button>
             </li>
             {/each}
         </ol>
@@ -194,7 +187,7 @@
     {#if viewer}
     <ol class="carousel__dots">
         {#each photos as page}
-        <li class:active={false}>
+        <li class:active={page === currentPhoto}>
             <button></button>
         </li>
         {/each}
diff --git a/src/style/organisms/_carousel.scss b/src/style/organisms/_carousel.scss
index 5f6b041..e1d9e2a 100644
--- a/src/style/organisms/_carousel.scss
+++ b/src/style/organisms/_carousel.scss
@@ -248,23 +248,26 @@
         @include breakpoint (xs) {
             display: flex;
             justify-content: center;
-            margin-top: 40px;
+            margin-top: 32px;
 
             li {
                 display: block;
-                padding: 0 4px;
+                padding: 4px;
                 cursor: pointer;
 
                 &.active button {
                     background-color: $color-secondary;
+                    transform: scale(1.25);
+                    will-change: scale, background-color;
                 }
 
-                &:hover {
+                &:hover:not(.active) {
                     button {
                         background-color: lighten($color-lightpurple, 10);
                     }
                 }
             }
+
             button {
                 display: block;
                 width: 8px;
@@ -273,6 +276,7 @@
                 background-color: $color-lightpurple;
                 border-radius: 50vh;
                 text-decoration: none;
+                transition: all 600ms $ease-quart;
             }
         }
     }