⚠️ Rework completely how transitions works
- Use Svelte/Sapper native if and transitions to show either the page content or the loader, then load each page animationIn - Code is safe on SSR side, using process.browser on this if - The <main> element is on position absolute to fade nicely the different pages - Code cleaning
This commit is contained in:
@@ -29,8 +29,7 @@
|
||||
locations,
|
||||
currentLocation,
|
||||
currentPhotos,
|
||||
pageReady,
|
||||
pageTransition
|
||||
pageReady
|
||||
} from 'utils/store'
|
||||
import { formatDate, relativeTime, getThumbnail } from 'utils/functions'
|
||||
|
||||
@@ -47,10 +46,10 @@
|
||||
import Pagination from 'organisms/Pagination'
|
||||
import Footer from 'organisms/Footer'
|
||||
import SocialMetas from 'utils/SocialMetas'
|
||||
import Transition from 'utils/Transition'
|
||||
|
||||
// Animations
|
||||
import { animateIn } from 'animations/place'
|
||||
pageTransition.onAnimationEnd = animateIn
|
||||
|
||||
// Props and variables
|
||||
export let photos
|
||||
@@ -108,99 +107,100 @@
|
||||
/>
|
||||
</svelte:head>
|
||||
|
||||
<Transition {animateIn}>
|
||||
<section class="place">
|
||||
<div class="place__title">
|
||||
<h1 class="title-location title-location--big" aria-label="Houses of {location.name}">
|
||||
<span class="place__title_top anim-mask">
|
||||
<span class="place__title_houses">Houses</span>
|
||||
<em class="place__title_of">of</em>
|
||||
</span>
|
||||
<span class="place__title_bottom anim-mask">
|
||||
<span class="place__title_name">{location.name}</span>
|
||||
</span>
|
||||
</h1>
|
||||
|
||||
<section class="place">
|
||||
<div class="place__title">
|
||||
<h1 class="title-location title-location--big" aria-label="Houses of {location.name}">
|
||||
<span class="place__title_top anim-mask">
|
||||
<span class="place__title_houses">Houses</span>
|
||||
<em class="place__title_of">of</em>
|
||||
</span>
|
||||
<span class="place__title_bottom anim-mask">
|
||||
<span class="place__title_name">{location.name}</span>
|
||||
</span>
|
||||
</h1>
|
||||
<a href="/choose" class="button-control button-control--big button-control--dashed" aria-label="Change the location">
|
||||
<span class="center">
|
||||
<IconGlobe width="44" color="#fff" />
|
||||
<span>Change</span>
|
||||
</span>
|
||||
<svg>
|
||||
<circle cx="50%" cy="50%" r="43%" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<a href="/choose" class="button-control button-control--big button-control--dashed" aria-label="Change the location" sapper-noscroll>
|
||||
<span class="center">
|
||||
<IconGlobe width="44" color="#fff" />
|
||||
<span>Change</span>
|
||||
</span>
|
||||
<svg>
|
||||
<circle cx="50%" cy="50%" r="43%" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
<div class="place__wrap wrap">
|
||||
<div class="place__description">
|
||||
<div class="wrapper">
|
||||
<p>{$site.description}</p>
|
||||
|
||||
<div class="place__wrap wrap">
|
||||
<div class="place__description">
|
||||
<div class="wrapper">
|
||||
<p>{$site.description}</p>
|
||||
{#if description}
|
||||
<p>
|
||||
Houses Of
|
||||
<LinkChange href="/choose" text={location.name}>
|
||||
<IconGlobeSmall width="14" color="#999" />
|
||||
</LinkChange>
|
||||
{description}
|
||||
</p>
|
||||
{/if}
|
||||
|
||||
{#if description}
|
||||
<p>
|
||||
Houses Of
|
||||
<LinkChange href="/choose" text={location.name} noScroll="true">
|
||||
<IconGlobeSmall width="14" color="#999" />
|
||||
</LinkChange>
|
||||
{description}
|
||||
</p>
|
||||
{/if}
|
||||
{#if photos}
|
||||
<p class="updated style-caps">
|
||||
<strong>Updated</strong>
|
||||
<time datetime={dateUpdatedDatetime} title={dateUpdatedFull}>{dateUpdatedRelative}</time>
|
||||
</p>
|
||||
|
||||
<ToggleLayout />
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if illustration_desktop && illustration_mobile}
|
||||
<div class="place__illustration"
|
||||
style="--url-desktop: url({illustration_desktop.full_url}); --url-mobile: url({illustration_mobile.full_url});"
|
||||
/>
|
||||
{/if}
|
||||
</section>
|
||||
|
||||
<section class="photos photos--{layoutSetting || 'list'}">
|
||||
<div class="photos__sidewrap wrap">
|
||||
<aside class="photos__side">
|
||||
<Switcher type="switcher--side" />
|
||||
|
||||
{#if photos}
|
||||
<p class="updated style-caps">
|
||||
<strong>Updated</strong>
|
||||
<time datetime={dateUpdatedDatetime} title={dateUpdatedFull}>{dateUpdatedRelative}</time>
|
||||
</p>
|
||||
|
||||
<ToggleLayout />
|
||||
{/if}
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if illustration_desktop && illustration_mobile}
|
||||
<div class="place__illustration"
|
||||
style="--url-desktop: url({illustration_desktop.full_url}); --url-mobile: url({illustration_mobile.full_url});"
|
||||
/>
|
||||
{/if}
|
||||
</section>
|
||||
{#if photos}
|
||||
<div class="photos__view wrap">
|
||||
{#each paginatedPhotos as photo, index}
|
||||
<Photo
|
||||
photo={photo}
|
||||
index={photos.length - photos.indexOf(photo)}
|
||||
layout={layoutSetting}
|
||||
/>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<section class="photos photos--{layoutSetting || 'list'}">
|
||||
<div class="photos__sidewrap wrap">
|
||||
<aside class="photos__side">
|
||||
<Switcher type="switcher--side" />
|
||||
|
||||
{#if photos}
|
||||
<p class="updated style-caps">
|
||||
<strong>Updated</strong>
|
||||
<time datetime={dateUpdatedDatetime} title={dateUpdatedFull}>{dateUpdatedRelative}</time>
|
||||
</p>
|
||||
{/if}
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
{#if photos}
|
||||
<div class="photos__view wrap">
|
||||
{#each paginatedPhotos as photo, index}
|
||||
<Photo
|
||||
photo={photo}
|
||||
index={photos.length - photos.indexOf(photo)}
|
||||
layout={layoutSetting}
|
||||
<Pagination
|
||||
{photos} {paginatedPhotos} {photosPerPage}
|
||||
on:updatePagination={updatePagination}
|
||||
/>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<Pagination
|
||||
{photos} {paginatedPhotos} {photosPerPage}
|
||||
on:updatePagination={updatePagination}
|
||||
/>
|
||||
{:else}
|
||||
<div class="wrap" style="padding-top: 20vw; padding-bottom: 20vw;">
|
||||
<p style="text-align: center; color: #333;">No photo for {location.name}</p>
|
||||
</div>
|
||||
{/if}
|
||||
</section>
|
||||
|
||||
{:else}
|
||||
<div class="wrap" style="padding-top: 20vw; padding-bottom: 20vw;">
|
||||
<p style="text-align: center; color: #333;">No photo for {location.name}</p>
|
||||
</div>
|
||||
{/if}
|
||||
</section>
|
||||
|
||||
<Footer />
|
||||
<Footer />
|
||||
</Transition>
|
||||
|
||||
Reference in New Issue
Block a user