⚠️ 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:
2020-04-03 22:53:43 +02:00
parent 76e2f8242e
commit 7e0d1e33fb
21 changed files with 300 additions and 315 deletions

View File

@@ -3,6 +3,8 @@
import { stores } from '@sapper/app'
import { currentLocation, fullscreen } from 'utils/store'
import { getThumbnail, formatDate } from 'utils/functions'
const dispatch = createEventDispatcher()
const { page } = stores()
// Dependencies
import SwipeListener from 'swipe-listener'
@@ -15,13 +17,9 @@
import Counter from 'atoms/Counter'
import PaginationDots from 'molecules/PaginationDots'
// Props
// Props and Variables
export let photos
export let viewer = false
// Variables
const dispatch = createEventDispatcher()
const { page } = stores()
let scope
let swiped
let currentIndex = 0

View File

@@ -17,7 +17,7 @@
<li>
<ul>
<li>
<LinkTranslate href="/credits" text="Credits" rel="prefetch" noScroll="true" />
<LinkTranslate href="/credits" text="Credits" rel="prefetch" />
</li>
{#if $site}
<li class="instagram">

View File

@@ -32,7 +32,7 @@
/*
** Run code on component mount
** Run code when mounted
*/
onMount(() => {
// Entering transition