diff --git a/apps/website/src/components/PageTransition.svelte b/apps/website/src/components/PageTransition.svelte deleted file mode 100644 index bb654a3..0000000 --- a/apps/website/src/components/PageTransition.svelte +++ /dev/null @@ -1,33 +0,0 @@ - - -
{ - // Show page loading indicator - $pageLoading = true - }} - on:outroend={() => { - // Scroll back to top - doNotScroll && requestAnimationFrame(() => scrollToTop()) - }} -> - -
diff --git a/apps/website/src/routes/(shop)/shop/+error.svelte b/apps/website/src/routes/(shop)/shop/+error.svelte index e804d95..34b1b16 100644 --- a/apps/website/src/routes/(shop)/shop/+error.svelte +++ b/apps/website/src/routes/(shop)/shop/+error.svelte @@ -3,7 +3,6 @@ import { page } from '$app/stores' // Components import Metas from '$components/Metas.svelte' - import PageTransition from '$components/PageTransition.svelte' import ShopHeader from '$components/organisms/ShopBanner.svelte' import PostersGrid from '$components/organisms/PostersGrid.svelte' @@ -25,19 +24,17 @@ /> - -
- +
+ -
-
-
-

Uh oh!

-

{errors[$page.status].message}

-
+
+
+
+

Uh oh!

+

{errors[$page.status].message}

-
+
+
- -
- + +
diff --git a/apps/website/src/routes/(shop)/shop/+page.svelte b/apps/website/src/routes/(shop)/shop/+page.svelte index cdd2473..fc41728 100644 --- a/apps/website/src/routes/(shop)/shop/+page.svelte +++ b/apps/website/src/routes/(shop)/shop/+page.svelte @@ -3,7 +3,6 @@ import { getAssetUrlKey } from '$utils/api' import { shopCurrentProductSlug } from '$utils/stores/shop' // Components - import PageTransition from '$components/PageTransition.svelte' import Metas from '$components/Metas.svelte' import PostersGrid from '$components/organisms/PostersGrid.svelte' import ShopHeader from '$components/organisms/ShopBanner.svelte' @@ -25,15 +24,13 @@ /> - -
- +
+ - + - -
- + +
diff --git a/apps/website/src/routes/(shop)/shop/[type]-[name]/+page.svelte b/apps/website/src/routes/(shop)/shop/[type]-[name]/+page.svelte index 3972012..2ac1a77 100644 --- a/apps/website/src/routes/(shop)/shop/[type]-[name]/+page.svelte +++ b/apps/website/src/routes/(shop)/shop/[type]-[name]/+page.svelte @@ -4,7 +4,6 @@ import { shopCurrentProductSlug } from '$utils/stores/shop' import { capitalizeFirstLetter } from 'utils/string' // Components - import PageTransition from '$components/PageTransition.svelte' import Metas from '$components/Metas.svelte' import ShopHeader from '$components/organisms/ShopBanner.svelte' import PostersGrid from '$components/organisms/PostersGrid.svelte' @@ -24,15 +23,13 @@ /> - -
- +
+ - + - -
- + +
diff --git a/apps/website/src/routes/(site)/[country]/[location]/+page.svelte b/apps/website/src/routes/(site)/[country]/[location]/+page.svelte index 5b78e76..1eef7e5 100644 --- a/apps/website/src/routes/(site)/[country]/[location]/+page.svelte +++ b/apps/website/src/routes/(site)/[country]/[location]/+page.svelte @@ -16,7 +16,6 @@ import { PUBLIC_LIST_INCREMENT } from '$env/static/public' // Components import Metas from '$components/Metas.svelte' - import PageTransition from '$components/PageTransition.svelte' import Image from '$components/atoms/Image.svelte' import Button from '$components/atoms/Button.svelte' import IconEarth from '$components/atoms/IconEarth.svelte' @@ -218,149 +217,147 @@ /> - -
-
-

- - Houses - of - - - {location.name} - -

+
+
+

+ + Houses + of + + + {location.name} + +

-
-
-
- Houses of {location.name} {location.description ?? 'has no description yet'} -
-
-

- Photos by - {#each location.credits as { credit_id: { name, website } }} - {#if website} - - {name} - - {:else} - {name} - {/if} - {/each} +

+
+
+ Houses of {location.name} {location.description ?? 'has no description yet'} +
+
+

+ Photos by + {#each location.credits as { credit_id: { name, website } }} + {#if website} + + {name} + + {:else} + {name} + {/if} + {/each} +

+ {#if latestPhoto} + · +

+ Updated

- {#if latestPhoto} - · -

- Updated -

- {/if} -
+ {/if} +
-
- + + {#if location.has_poster} + - - {#if location.has_poster} - - {/if} -
+ {/if}
+
- {#if hasIllustration} - - - - Illustration for {location.name} - - {/if} + {#if hasIllustration} + + + + Illustration for {location.name} + + {/if} +
+ + {#if photos.length} +
+ {#each photos as { title, image: { id, title: alt, width, height }, slug, city, date_taken }, index} + + {/each}
- {#if photos.length} -
- {#each photos as { title, image: { id, title: alt, width, height }, slug, city, date_taken }, index} - - {/each} -
+
+ !ended && loadMorePhotos()} + > + {#if !ended} +

See more photos

+ {:else} +

You've seen it all!

+ {/if} + -
- !ended && loadMorePhotos()} - > - {#if !ended} -

See more photos

- {:else} -

You've seen it all!

- {/if} - - - {#if ended} -
-
-
- {#if location.has_poster} - - {:else} - - {/if} - -
+ {#if ended} +
+
+
+ {#if location.has_poster} + + {:else} + + {/if} +
- {/if} +
+ {/if} - {#if location.acknowledgement} -
- Flag of {location.country.name} -

{location.acknowledgement}

-
- {/if} -
- {:else} -
-

- No photos available for {location.name}.
- Come back later! -

-
- {/if} -
- + {#if location.acknowledgement} +
+ Flag of {location.country.name} +

{location.acknowledgement}

+
+ {/if} +
+ {:else} +
+

+ No photos available for {location.name}.
+ Come back later! +

+
+ {/if} +
diff --git a/apps/website/src/routes/(site)/[country]/[location]/[photo]/+page.svelte b/apps/website/src/routes/(site)/[country]/[location]/[photo]/+page.svelte index f2118ab..3988ac9 100644 --- a/apps/website/src/routes/(site)/[country]/[location]/[photo]/+page.svelte +++ b/apps/website/src/routes/(site)/[country]/[location]/[photo]/+page.svelte @@ -19,7 +19,6 @@ // Components import Metas from '$components/Metas.svelte' import SplitText from '$components/SplitText.svelte' - import PageTransition from '$components/PageTransition.svelte' import Image from '$components/atoms/Image.svelte' import Icon from '$components/atoms/Icon.svelte' import IconArrow from '$components/atoms/IconArrow.svelte' @@ -301,105 +300,103 @@ {/if} - -
-
-

Tap for fullscreen

+
+
+

Tap for fullscreen

- + + + + + +
+
- - - - - -
-
- {#each visiblePhotos as { id, image, title }, index (id)} -
- {title} -
- {/each} - -
- - - - - - + {#each visiblePhotos as { id, image, title }, index (id)} +
+ {title}
+ {/each} - -
- -
+
+ + + + + +
-
-

{currentPhoto.title}

-
- - - - {#if currentPhoto.city} - {currentPhoto.city}, {location.name}, {location.country.name} - {:else} - {location.name}, {location.country.name} - {/if} - - - {#if currentPhoto.date_taken} - · - - {/if} -
+
+ +
+
+ +
+

{currentPhoto.title}

+ +
+ + + + {#if currentPhoto.city} + {currentPhoto.city}, {location.name}, {location.country.name} + {:else} + {location.name}, {location.country.name} + {/if} + + + {#if currentPhoto.date_taken} + · + + {/if}
+
- {#if isFullscreen} -
-
- {currentPhoto.title} - - - - - -
+ {#if isFullscreen} +
+
+ {currentPhoto.title} + + + + +
- {/if} -
- +
+ {/if} +
diff --git a/apps/website/src/routes/(site)/about/+page.svelte b/apps/website/src/routes/(site)/about/+page.svelte index 34a1028..6eaa4b8 100644 --- a/apps/website/src/routes/(site)/about/+page.svelte +++ b/apps/website/src/routes/(site)/about/+page.svelte @@ -16,7 +16,6 @@ import { quartOut } from '$animations/easings' // Components import Metas from '$components/Metas.svelte' - import PageTransition from '$components/PageTransition.svelte' import Image from '$components/atoms/Image.svelte' import Button from '$components/atoms/Button.svelte' import AboutGridPhoto from '$components/atoms/AboutGridPhoto.svelte' @@ -181,222 +180,220 @@ /> - -
- +
+ -
-
-

{about.intro_title}

-
- {@html about.intro_heading} -
- -
- {@html about.intro_text} -
+
+
+

{about.intro_title}

+
+ {@html about.intro_heading}
-
-
-
-
- {about.intro_firstphoto.title} -
- {about.intro_firstphoto_caption}
- in - - {about.intro_firstlocation.country.flag.title} - Naarm Australia (Melbourne) - -
-
- -

{about.creation_title}

-
- {@html about.creation_heading} -
- -
- {@html about.creation_text} -
- -
- {about.creation_portrait.title} -
- - {about.creation_portrait_caption} - +
+ {@html about.intro_text}
-
+
+
-
-
-
- {about.present_image.title} -
- -

{about.present_title}

-
-

{about.present_text}

-
- -
- {@html about.present_heading} -
- -
-

{about.present_conclusion}

-
-
-
- - {#if about.image_showcase} -
+
+
+
{about.image_showcase.title} +
+ {about.intro_firstphoto_caption}
+ in + + {about.intro_firstlocation.country.flag.title} + Naarm Australia (Melbourne) + +
+
+ +

{about.creation_title}

+
+ {@html about.creation_heading}
- {/if} -
-
-
+
+ +
+
+
+ {about.present_image.title} +
+ +

{about.present_title}

+
+

{about.present_text}

+
+ +
+ {@html about.present_heading} +
+ +
+

{about.present_conclusion}

+
+
+
+ + {#if about.image_showcase} +
+ {about.image_showcase.title} +
+ {/if} + +
+
+ + +
+ {#each about.process_steps as { text, image, video_mp4, video_webm }, index} + {#if index === currentStep} + + {/if} + {/each} +
+
+
+ +
+
+
+ {#each photos as { image: { id }, title }, index} + + {/each} +
+
+
+ +
+
+

{about.contact_title}

+
+ {#each about.contact_blocks as { title, text, link, button }} +
+

{title}

+
+ {@html text} +
+
+ {#if link} + {#key emailCopied === link} +
{ + emailCopied = detail.email + // Clear timeout and add timeout to hide message + clearTimeout(emailCopiedTimeout) + emailCopiedTimeout = setTimeout(() => emailCopied = null, 2500) }} > - {title} - - - {/each} - - - -
- {#each about.process_steps as { text, image, video_mp4, video_webm }, index} - {#if index === currentStep} - - {/if} - {/each} -
-
-
- -
-
-
- {#each photos as { image: { id }, title }, index} - - {/each} -
-
-
- -
-
-

{about.contact_title}

-
- {#each about.contact_blocks as { title, text, link, button }} -
-

{title}

-
- {@html text} -
-
- {#if link} - {#key emailCopied === link} -
{ - emailCopied = detail.email - // Clear timeout and add timeout to hide message - clearTimeout(emailCopiedTimeout) - emailCopiedTimeout = setTimeout(() => emailCopied = null, 2500) - }} - > - {#if emailCopied !== link} -
- {/key} - {/if} -
+ {#if emailCopied !== link} +
+ {/key} + {/if}
- {/each} -
+
+ {/each}
- -
- + + +
diff --git a/apps/website/src/routes/(site)/credits/+page.svelte b/apps/website/src/routes/(site)/credits/+page.svelte index d6686cb..1384b72 100644 --- a/apps/website/src/routes/(site)/credits/+page.svelte +++ b/apps/website/src/routes/(site)/credits/+page.svelte @@ -10,7 +10,6 @@ import { quartOut } from 'svelte/easing' // Components import Metas from '$components/Metas.svelte' - import PageTransition from '$components/PageTransition.svelte' import Image from '$components/atoms/Image.svelte' import Heading from '$components/molecules/Heading.svelte' import InteractiveGlobe from '$components/organisms/InteractiveGlobe.svelte' @@ -66,44 +65,18 @@ /> - -
- - -
-
- {#each data.credits.list as { title, credits }} -
-

{title}

-
    - {#each credits as { name, role, website }} -
  • -
    -
    - {#if website} -

    - {name} -

    - {:else} -

    {name}

    - {/if} -
    -
    - {role} -
    -
    -
    • - {/each} -
-
- {/each} +
+ +
+
+ {#each data.credits.list as { title, credits }}
-

Photography

+

{title}

    - {#each credit as { name, website, location }} + {#each credits as { name, role, website }}
  • @@ -116,33 +89,57 @@ {/if}
    - + {role}
    • {/each}
-
-
+ {/each} - -
- +
+

Photography

+
    + {#each credit as { name, website, location }} +
  • +
    +
    + {#if website} +

    + {name} +

    + {:else} +

    {name}

    + {/if} +
    +
    + +
    +
    +
    • + {/each} +
+
+
+
+ + +
diff --git a/apps/website/src/routes/(site)/locations/+page.svelte b/apps/website/src/routes/(site)/locations/+page.svelte index d9add0f..c88042a 100644 --- a/apps/website/src/routes/(site)/locations/+page.svelte +++ b/apps/website/src/routes/(site)/locations/+page.svelte @@ -6,7 +6,6 @@ import { getContext } from 'svelte' // Components import Metas from '$components/Metas.svelte' - import PageTransition from '$components/PageTransition.svelte' import InteractiveGlobe from '$components/organisms/InteractiveGlobe.svelte' import Locations from '$components/organisms/Locations.svelte' import ShopModule from '$components/organisms/ShopModule.svelte' @@ -23,20 +22,18 @@ /> - -
- +
+ -
- - -
+
+ + +
-
-
- - -
-
-
- +
+
+ + +
+
+
diff --git a/apps/website/src/routes/(site)/photos/+page.svelte b/apps/website/src/routes/(site)/photos/+page.svelte index 12ab35f..da14a5b 100644 --- a/apps/website/src/routes/(site)/photos/+page.svelte +++ b/apps/website/src/routes/(site)/photos/+page.svelte @@ -19,7 +19,6 @@ import { PUBLIC_FILTERS_DEFAULT_COUNTRY, PUBLIC_FILTERS_DEFAULT_SORT, PUBLIC_GRID_INCREMENT } from '$env/static/public' // Components import Metas from '$components/Metas.svelte' - import PageTransition from '$components/PageTransition.svelte' import SplitText from '$components/SplitText.svelte' import IconEarth from '$components/atoms/IconEarth.svelte' import Button from '$components/atoms/Button.svelte' @@ -336,164 +335,162 @@ /> - -
-
+
+ + + + + + +
- - - +
+ Filter photos +
    +
  • + +
    • +
  • + +
    • +
- - -
-
- Filter photos -
    -
  • - -
    • -
  • - -
    • -
- -
- {#if filtered} - - {/if} -
+
+ {#if filtered} + + {/if}
-
+ +
-
-
- {#if photos} -
- {#each photos as { id, image, slug, location, title, city }, index (id)} -
- - {image.title} - -
- -
-
- {/each} -
+
+
+ {#if photos} +
+ {#each photos as { id, image, slug, location, title, city }, index (id)} +
+ + {image.title} + +
+ +
+
+ {/each} +
-
-

- Last updated: -

+
+

+ Last updated: +

-
- {:else if !filteredCountryExists} -
-

- {$page.url.searchParams.get('country').replace(/(^|\s)\S/g, letter => letter.toUpperCase())} is not available… yet 👀 -

-
- {/if} - -
-
- - +
+ {currentPhotosAmount} + / + {totalPhotos}
+ {:else if !filteredCountryExists} +
+

+ {$page.url.searchParams.get('country').replace(/(^|\s)\S/g, letter => letter.toUpperCase())} is not available… yet 👀 +

+
+ {/if} + +
+
+ + +
-
-
- + + + diff --git a/apps/website/src/routes/(site)/subscribe/+page.svelte b/apps/website/src/routes/(site)/subscribe/+page.svelte index 1bdd0e1..1e7123f 100644 --- a/apps/website/src/routes/(site)/subscribe/+page.svelte +++ b/apps/website/src/routes/(site)/subscribe/+page.svelte @@ -10,7 +10,6 @@ import { quartOut } from '$animations/easings' // Components import Metas from '$components/Metas.svelte' - import PageTransition from '$components/PageTransition.svelte' import Heading from '$components/molecules/Heading.svelte' import EmailForm from '$components/molecules/EmailForm.svelte' import NewsletterIssue from '$components/molecules/NewsletterIssue.svelte' @@ -65,34 +64,32 @@ /> - -
-
diff --git a/apps/website/src/routes/(site)/terms/+page.svelte b/apps/website/src/routes/(site)/terms/+page.svelte index f16b5bc..29c5649 100644 --- a/apps/website/src/routes/(site)/terms/+page.svelte +++ b/apps/website/src/routes/(site)/terms/+page.svelte @@ -6,7 +6,6 @@ import dayjs from 'dayjs' import relativeTime from 'dayjs/plugin/relativeTime' // Components - import PageTransition from '$components/PageTransition.svelte' import Metas from '$components/Metas.svelte' import Heading from '$components/molecules/Heading.svelte' @@ -22,27 +21,25 @@ /> - -
- +
+ -
-
- {#each legal.terms as { title, text }, index} -
-

{index + 1}. {title}

-
- {@html text} -
-
- {/each} +
+
+ {#each legal.terms as { title, text }, index} +
+

{index + 1}. {title}

+
+ {@html text} +
+
+ {/each} -
-

- Updated: -

-
-
-
-
- +
+

+ Updated: +

+
+ + +
diff --git a/apps/website/src/routes/+error.svelte b/apps/website/src/routes/+error.svelte index 8e42fd9..1b923ee 100644 --- a/apps/website/src/routes/+error.svelte +++ b/apps/website/src/routes/+error.svelte @@ -7,7 +7,6 @@ import { page } from '$app/stores' // Components import Metas from '$components/Metas.svelte' - import PageTransition from '$components/PageTransition.svelte' import BoxCTA from '$components/atoms/BoxCTA.svelte' import Heading from '$components/molecules/Heading.svelte' import InteractiveGlobe from '$components/organisms/InteractiveGlobe.svelte' @@ -35,51 +34,49 @@ /> - -
-
- +
+
+ - -
  • - -
    • -
  • - -
    • -
  • - -
    • -     -
    + +
  • + +
    • +
  • + +
    • +
  • + +
    • +     +
    - - + + -
    -
    -
    - - -
    +
    +
    +
    + +
    -
    -     + + diff --git a/apps/website/src/routes/+layout.server.ts b/apps/website/src/routes/+layout.server.ts index 925edee..2d63fc6 100644 --- a/apps/website/src/routes/+layout.server.ts +++ b/apps/website/src/routes/+layout.server.ts @@ -96,6 +96,7 @@ export const load = async ({ url }) => { locations: countLocations[0].count.id, countries: countCountries[0].count.id, }, + currentPath: url.pathname, } } } catch (err) { diff --git a/apps/website/src/routes/+layout.svelte b/apps/website/src/routes/+layout.svelte index e69b638..95696e9 100644 --- a/apps/website/src/routes/+layout.svelte +++ b/apps/website/src/routes/+layout.svelte @@ -3,10 +3,13 @@ import { browser } from '$app/environment' import { page } from '$app/stores' - import { beforeNavigate } from '$app/navigation' + import { beforeNavigate, afterNavigate } from '$app/navigation' import { PUBLIC_ANALYTICS_DOMAIN } from '$env/static/public' - import { onMount, setContext } from 'svelte' + import { setContext, onMount } from 'svelte' + import { fade } from 'svelte/transition' + import { DELAY, DURATION } from '$utils/constants' import { pageLoading, previousPage } from '$utils/stores' + import { scrollToTop } from 'utils/scroll' import '$utils/polyfills' // Components import SVGSprite from '$components/SVGSprite.svelte' @@ -37,9 +40,24 @@ /** * On page change */ - // Store previous page (for photo Viewer close button) - beforeNavigate(({ from }) => { + beforeNavigate(({ from, to }) => { + // Store previous page (for photo Viewer close button) $previousPage = from.url.pathname + + // Enable page loading state if URL changed + if (from.route.id !== to.route.id) { + $pageLoading = true + } + }) + + afterNavigate(() => { + // Remove page loading state + setTimeout(() => $pageLoading = false, DELAY.PAGE_LOADING) + + // Scroll back to top when new page is ready (excepted certain pages) + if (!$page.url.searchParams.get('country') && !$page.url.pathname.includes('/shop/')) { + setTimeout(scrollToTop, DELAY.PAGE_IN) + } }) // Define page loading @@ -65,11 +83,19 @@ - +{#key data.currentPath} +
    + + + {#if !$page.params.photo} +
    + {/if} +
    +{/key} -{#if !$page.params.photo} -