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

Carousel: Add a transition on title when changing photo

Browse Source
This commit is contained in:
Félix Péault
2020-02-26 15:58:22 +01:00
parent 17c1e3e930
commit fab89736ed
3 changed files with 62 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/organisms/Carousel.svelte
View File

@@ -1,5 +1,7 @@
<script>
import { onMount } from 'svelte'
import { fly } from 'svelte/transition'
import { currentLocation } from '../store'
import * as fn from '../functions'
// Dependencies
@@ -152,16 +154,27 @@
</div>
{#if viewer}
<div class="carousel__number">{currentIndex < 10 ? 0 : ''}{currentIndex + 1}</div>
<div class="carousel__number">
{currentIndex < 10 ? 0 : ''}{photos.length - currentIndex}
</div>
{/if}
</div>
<div class="carousel__information">
<div class="carousel__information--location style-location">
<p class="street">{currentPhoto.name}</p>
<p class="style-caps state">{currentPhoto.location.region}, {currentPhoto.location.country.name}</p>
<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}
</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>
<!-- Duplicate for animation? -->
{#if viewer}
<p class="carousel__information--date">{dayjs(currentPhoto.created_on).format('MMM Do, YYYY')}</p>
{/if}