flayks/housesof
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Carousel: Working dots

Browse Source
This commit is contained in:
Félix Péault
2020-02-27 23:06:52 +01:00
parent 716e38d7cc
commit 3857223a54
2 changed files with 14 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/organisms/Carousel.svelte
View File

@@ -1,6 +1,5 @@
<script> <script>
import { onMount } from 'svelte' import { onMount } from 'svelte'
import { fly } from 'svelte/transition'
import { currentLocation } from '../store' import { currentLocation } from '../store'
import * as fn from '../functions' import * as fn from '../functions'
@@ -163,17 +162,11 @@
<div class="carousel__information"> <div class="carousel__information">
<div class="carousel__information--location style-location"> <div class="carousel__information--location style-location">
<p class="street"> <p class="street">
{#each photos as photo, index} {currentPhoto.name}
<span aria-hidden={photo !== currentPhoto} </p>
class:prev={photo === prevPhoto} <p class="state style-caps style-caps--transparent">
class:active={photo === currentPhoto} {currentPhoto.location.region}, {currentPhoto.location.country.name}
class:next={photo === nextPhoto}>
{photo.name}
</span>
{/each}
</p> </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> </div>
{#if viewer} {#if viewer}
<p class="carousel__information--date">{dayjs(currentPhoto.created_on).format('MMM Do, YYYY')}</p> <p class="carousel__information--date">{dayjs(currentPhoto.created_on).format('MMM Do, YYYY')}</p>
@@ -183,8 +176,8 @@
{#if !viewer} {#if !viewer}
<ol class="carousel__dots"> <ol class="carousel__dots">
{#each photos as page, index} {#each photos as page, index}
<li class:active={index === 0}> <li class:active={page === currentPhoto} on:click={() => currentIndex = index}>
<button aria-label="Go to image #{index + 1}"></button> <button aria-label="Go to photo #{index + 1}"></button>
</li> </li>
{/each} {/each}
</ol> </ol>
@@ -194,7 +187,7 @@
{#if viewer} {#if viewer}
<ol class="carousel__dots"> <ol class="carousel__dots">
{#each photos as page} {#each photos as page}
<li class:active={false}> <li class:active={page === currentPhoto}>
<button></button> <button></button>
</li> </li>
{/each} {/each}

10
src/style/organisms/_carousel.scss
View File

@@ -248,23 +248,26 @@
@include breakpoint (xs) { @include breakpoint (xs) {
display: flex; display: flex;
justify-content: center; justify-content: center;
margin-top: 40px; margin-top: 32px;
li { li {
display: block; display: block;
padding: 0 4px; padding: 4px;
cursor: pointer; cursor: pointer;
&.active button { &.active button {
background-color: $color-secondary; background-color: $color-secondary;
transform: scale(1.25);
will-change: scale, background-color;
} }
&:hover { &:hover:not(.active) {
button { button {
background-color: lighten($color-lightpurple, 10); background-color: lighten($color-lightpurple, 10);
} }
} }
} }
button { button {
display: block; display: block;
width: 8px; width: 8px;
@@ -273,6 +276,7 @@
background-color: $color-lightpurple; background-color: $color-lightpurple;
border-radius: 50vh; border-radius: 50vh;
text-decoration: none; text-decoration: none;
transition: all 600ms $ease-quart;
} }
} }
} }