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>
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}

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

@@ -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;
}
}
}