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

WIP attempt to fix page transitions, Several edits
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
Félix Péault
2020-04-02 16:07:16 +02:00
parent 6f409c5331
commit 730eb75457
34 changed files with 386 additions and 401 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/organisms/Carousel.svelte
View File

@@ -56,7 +56,7 @@
// Hover on controls
const hoverPhoto = event => {
const button = event.currentTarget.querySelector('button')
const photoActive = scope.querySelector('.gallery__photo--active')
const photoActive = scope.querySelector('.is-active')
let photoToHover
if (event.currentTarget.dataset.to === 'prev') {
@@ -114,7 +114,7 @@
*/
onMount(() => {
// Entering transition
if (photos.length) {
if (photos) {
animateIn(scope)
}
@@ -134,7 +134,7 @@
<svelte:window on:keydown={keyboardNav} />
{#if photos.length}
{#if photos}
<div class="carousel"
bind:this={scope}
on:swipe={event => swipe(event.detail.directions)}
@@ -143,18 +143,20 @@
<div class="gallery">
<div class="gallery__images">
{#each photos as { id, name, location, image }, index}
<picture class="gallery__photo"
class:gallery__photo--prev={id === prevPhoto.id}
class:gallery__photo--active={id === currentPhoto.id}
class:gallery__photo--next={id === nextPhoto.id}
<div class="gallery__photo"
class:is-prev={id === prevPhoto.id}
class:is-active={id === currentPhoto.id}
class:is-next={id === nextPhoto.id}
on:click={openFullscreen}
>
<source media="(min-width: 968px)" srcset={getThumbnail(image.private_hash, 1400)}>
<source media="(min-width: 800px)" srcset={getThumbnail(image.private_hash, 900)}>
<source media="(min-width: 500px)" srcset={getThumbnail(image.private_hash, 600)}>
<source media="(min-width: 300px)" srcset={getThumbnail(image.private_hash, 400)}>
<img src="{getThumbnail(image.private_hash, 900)}" alt="{name}, {location.name}, {location.country.name}">
</picture>
<picture class="gallery__picture">
<source media="(min-width: 968px)" srcset={getThumbnail(image.private_hash, 1400)}>
<source media="(min-width: 800px)" srcset={getThumbnail(image.private_hash, 900)}>
<source media="(min-width: 500px)" srcset={getThumbnail(image.private_hash, 600)}>
<source media="(min-width: 300px)" srcset={getThumbnail(image.private_hash, 400)}>
<img src="{getThumbnail(image.private_hash, 900)}" alt="{name}, {location.name}, {location.country.name}">
</picture>
</div>
{/each}
</div>
@@ -189,9 +191,9 @@
<div class="carousel__locations">
{#each photos as { id, name, location }, index}
<div class="carousel__location style-location"
class:carousel__location--prev={id === prevPhoto.id}
class:carousel__location--active={id === currentPhoto.id}
class:carousel__location--next={id === nextPhoto.id}
class:is-prev={id === prevPhoto.id}
class:is-active={id === currentPhoto.id}
class:is-next={id === nextPhoto.id}
>
<p class="street">{name}</p>
<p class="state style-caps style-caps--transparent">