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

Use page transition component to avoid repetition on main

Browse Source
This commit is contained in:
Félix Péault
2021-11-30 00:23:36 +01:00
parent ba09c2af2d
commit f8fe141505
9 changed files with 28 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/PageTransition.svelte Normal file
View File

@@ -0,0 +1,14 @@
<script lang="ts">
import { fade } from 'svelte/transition'
export let refresh = ''
</script>
{#key refresh}
<div
in:fade={{ duration: 400, delay: 500 }}
out:fade={{ duration: 400 }}
>
<slot />
</div>
{/key}

6
src/routes/[country]/[location]/index.svelte
View File

@@ -1,7 +1,6 @@
<script lang="ts">
import { navigating, page } from '$app/stores'
import { onMount } from 'svelte'
import { fade } from 'svelte/transition'
import anime from 'animejs'
import dayjs from 'dayjs'
import advancedFormat from 'dayjs/plugin/advancedFormat.js'
@@ -192,10 +191,7 @@
<svelte:window bind:scrollY />
<main class="location-page"
in:fade={{ duration: DURATION.PAGE_IN, delay: DURATION.PAGE_OUT }}
out:fade={{ duration: DURATION.PAGE_OUT }}
>
<main class="location-page">
<section class="location-page__intro grid" bind:this={introEl}>
<h1 class="title" class:is-short={location.name.length <= 4}>
<span class="housesof mask">

7
src/routes/__layout.svelte
View File

@@ -8,6 +8,7 @@
import '$utils/polyfills'
// Components
import SVGSprite from '$components/SVGSprite.svelte'
import PageTransition from '$components/PageTransition.svelte'
import Switcher from '$components/molecules/Switcher.svelte'
import Footer from '$components/organisms/Footer.svelte'
@@ -47,7 +48,7 @@
if (!$page.query.get('country') && !$page.path.includes('/shop/poster')) {
scrollToTop()
}
}, DURATION.PAGE_OUT * 1.5)
}, DURATION.PAGE_OUT + 1)
}
})
@@ -59,7 +60,9 @@
<Switcher isOver={!!$page.params.location && !!$page.params.photo} />
<slot />
<PageTransition refresh={$page.path}>
<slot />
</PageTransition>
{#if !$page.params.photo}
<Footer />

7
src/routes/credits.svelte
View File

@@ -1,6 +1,4 @@
<script lang="ts">
import { fade } from 'svelte/transition'
import { DURATION } from '$utils/contants'
// Components
import Metas from '$components/Metas.svelte'
import SiteTitle from '$components/atoms/SiteTitle.svelte'
@@ -16,10 +14,7 @@
/>
<main class="credits"
in:fade={{ duration: DURATION.PAGE_IN, delay: DURATION.PAGE_OUT }}
out:fade={{ duration: DURATION.PAGE_OUT }}
>
<main class="credits">
<section class="credits__heading">
<SiteTitle variant="inline" />
<p class="text-medium">{data.credits.text}</p>

7
src/routes/index.svelte
View File

@@ -1,9 +1,7 @@
<script lang="ts">
import { getContext, onMount } from 'svelte'
import { fade } from 'svelte/transition'
import { page } from '$app/stores'
import anime from 'animejs'
import { DURATION } from '$utils/contants'
// Components
import Metas from '$components/Metas.svelte'
import SplitText from '$components/SplitText.svelte'
@@ -64,10 +62,7 @@
image=""
/>
<main class="homepage"
in:fade={{ duration: DURATION.PAGE_IN, delay: DURATION.PAGE_OUT }}
out:fade={{ duration: DURATION.PAGE_OUT }}
>
<main class="homepage">
<section class="homepage__intro">
<ScrollingTitle
tag="h1"

7
src/routes/locations.svelte
View File

@@ -1,7 +1,5 @@
<script lang="ts">
import { getContext } from 'svelte'
import { fade } from 'svelte/transition'
import { DURATION } from '$utils/contants'
// Components
import Metas from '$components/Metas.svelte'
import InteractiveGlobe from '$components/organisms/InteractiveGlobe.svelte'
@@ -19,10 +17,7 @@
image=""
/>
<main class="explore"
in:fade={{ duration: DURATION.PAGE_IN, delay: DURATION.PAGE_OUT }}
out:fade={{ duration: DURATION.PAGE_OUT }}
>
<main class="explore">
<Heading
text="Explore the globe to discover unique locations across the world"
/>

8
src/routes/photos.svelte
View File

@@ -2,13 +2,12 @@
import { page } from '$app/stores'
import { goto } from '$app/navigation'
import { getContext, onMount } from 'svelte'
import { fade, fly } from 'svelte/transition'
import { fly } from 'svelte/transition'
import { quartOut } from 'svelte/easing'
import dayjs from 'dayjs'
import relativeTime from 'dayjs/plugin/relativeTime.js'
import anime from 'animejs'
import { map, lerp, throttle } from '$utils/functions'
import { DURATION } from '$utils/contants'
// Components
import Metas from '$components/Metas.svelte'
import SplitText from '$components/SplitText.svelte'
@@ -325,10 +324,7 @@
/>
<main class="photos"
in:fade={{ duration: DURATION.PAGE_IN, delay: DURATION.PAGE_OUT }}
out:fade={{ duration: DURATION.PAGE_OUT }}
>
<main class="photos">
<section class="photos__intro"
class:is-passed={scrolledPastIntro}
>

7
src/routes/shop/__layout.svelte
View File

@@ -1,8 +1,6 @@
<script lang="ts">
import { onMount } from 'svelte'
import { fade } from 'svelte/transition'
import { shopLocations, cartOpen, cartNotifications } from '$utils/stores/shop'
import { DURATION } from '$utils/contants'
// Components
import Metas from '$components/Metas.svelte'
import SiteTitle from '$components/atoms/SiteTitle.svelte'
@@ -59,10 +57,7 @@
image=""
/>
<main class="shop-page"
in:fade={{ duration: DURATION.PAGE_IN, delay: DURATION.PAGE_OUT }}
out:fade={{ duration: DURATION.PAGE_OUT }}
>
<main class="shop-page">
<Cart />
<section class="shop-page__intro" bind:this={introEl}>

9
src/routes/subscribe.svelte
View File

@@ -1,7 +1,5 @@
<script lang="ts">
import { fade } from 'svelte/transition'
<script lang="ts"> import { fade } from 'svelte/transition'
import dayjs from 'dayjs'
import { DURATION } from '$utils/contants'
// Components
import Metas from '$components/Metas.svelte'
import Image from '$components/atoms/Image.svelte'
@@ -18,10 +16,7 @@
image=""
/>
<main class="subscribe"
in:fade={{ duration: DURATION.PAGE_IN, delay: DURATION.PAGE_OUT }}
out:fade={{ duration: DURATION.PAGE_OUT }}
>
<main class="subscribe">
<Heading
text="If you wish to be pinged when new photos are added to and limited prints become available on our shop, sign up below."
/>