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

⚠️ Rework completely how transitions works

Browse Source 
- 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:
Félix Péault
2020-04-03 22:53:43 +02:00
parent 76e2f8242e
commit 7e0d1e33fb
21 changed files with 300 additions and 315 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
src/routes/viewer/[country]/[place]/[photo].svelte
View File

@@ -35,8 +35,7 @@
locations,
currentLocation,
currentPhotos,
pageReady,
pageTransition
pageReady
} from 'utils/store'
import { getThumbnail } from 'utils/functions'
@@ -45,11 +44,11 @@
import IconCross from 'atoms/IconCross'
import Carousel from 'organisms/Carousel'
import Fullscreen from 'organisms/Fullscreen'
import Transition from 'utils/Transition'
import SocialMetas from 'utils/SocialMetas'
// Animations
import { animateIn } from 'animations/viewer'
pageTransition.onAnimationEnd = animateIn
// Props
export let photos
@@ -100,30 +99,32 @@
<svelte:window bind:innerWidth={windowWidth} />
<section class="viewer">
<div class="viewer__top">
<p class="tip">Tap for fullscreen</p>
<Transition {animateIn}>
<section class="viewer">
<div class="viewer__top">
<p class="tip">Tap for fullscreen</p>
<div class="viewer__buttons">
<a href="/choose" class="button-control button-control--dashed" aria-label="Change the location" rel="prefetch">
<IconGlobe color="#fff" width={windowWidth >= 768 ? 22 : 18} />
<svg>
<circle cx="50%" cy="50%" r="{windowWidth >= 768 ? 32 : 24}px"></circle>
</svg>
</a>
<a href="/location/{$currentLocation.country.slug}/{$currentLocation.slug}" class="button-control button-control--pink dir-bottom" aria-label="Back to photos" rel="prefetch">
<IconCross color="#fff" width="18" class="icon" />
<IconCross color="#fff" width="18" class="icon" hidden="true" />
</a>
<div class="viewer__buttons">
<a href="/choose" class="button-control button-control--dashed" aria-label="Change the location" rel="prefetch">
<IconGlobe color="#fff" width={windowWidth >= 768 ? 22 : 18} />
<svg>
<circle cx="50%" cy="50%" r="{windowWidth >= 768 ? 32 : 24}px"></circle>
</svg>
</a>
<a href="/location/{$currentLocation.country.slug}/{$currentLocation.slug}" class="button-control button-control--pink dir-bottom" aria-label="Back to photos" rel="prefetch">
<IconCross color="#fff" width="18" class="icon" />
<IconCross color="#fff" width="18" class="icon" hidden="true" />
</a>
</div>
<a href="/" bind:this={gotoLink} aria-hidden="true" hidden class="hidden">&nbsp;</a>
</div>
<a href="/" bind:this={gotoLink} aria-hidden="true" hidden class="hidden" sapper-noscroll>&nbsp;</a>
</div>
<Carousel
viewer="true"
photos={photos}
on:photoChange={photoChanged}
/>
<Carousel
viewer="true"
photos={photos}
on:photoChange={photoChanged}
/>
<Fullscreen />
</section>
<Fullscreen />
</section>
</Transition>