From fd37c36595b5aece7197dbb6ce013c23fd289698 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= Date: Sun, 9 Oct 2022 14:44:25 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=A7=20Use=20PageTransition=20as=20a=20?= =?UTF-8?q?div=20and=20switch?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - use a page classed div for PageTransition which avoids to make global style for the page - fix the loading spinner that was too short and would come and go before arriving on the page, now fades out when changing page as pageLoading is defined on the PageTransition afterUpdate --- src/components/PageTransition.svelte | 14 +- src/routes/+error.svelte | 82 +- src/routes/+layout.svelte | 10 +- src/routes/+page.svelte | 148 ++-- src/routes/[country]/[location]/+page.svelte | 267 +++---- .../[country]/[location]/[photo]/+page.svelte | 166 ++-- src/routes/about/+page.svelte | 405 +++++----- src/routes/credits/+page.svelte | 113 +-- src/routes/locations/+page.svelte | 26 +- src/routes/photos/+page.svelte | 300 ++++---- src/routes/shop/+error.svelte | 22 +- src/routes/shop/+page.svelte | 16 +- src/routes/shop/[type]-[name]/+page.svelte | 16 +- src/routes/subscribe/+page.svelte | 50 +- src/routes/terms/+page.svelte | 40 +- src/style/pages/_about.scss | 4 +- src/style/pages/_error.scss | 2 - src/style/pages/_explore.scss | 11 +- src/style/pages/_homepage.scss | 6 +- src/style/pages/_location.scss | 6 +- src/style/pages/_shop.scss | 64 +- src/style/pages/_subscribe.scss | 12 +- src/style/pages/_viewer.scss | 718 +++++++++--------- 23 files changed, 1252 insertions(+), 1246 deletions(-) diff --git a/src/components/PageTransition.svelte b/src/components/PageTransition.svelte index 3db93c2..312164a 100644 --- a/src/components/PageTransition.svelte +++ b/src/components/PageTransition.svelte @@ -1,18 +1,26 @@ -
doNotScroll && scrollToTop()} > -
\ No newline at end of file + \ No newline at end of file diff --git a/src/routes/+error.svelte b/src/routes/+error.svelte index e6a3043..680c160 100644 --- a/src/routes/+error.svelte +++ b/src/routes/+error.svelte @@ -34,49 +34,51 @@ title="{errors[$page.status].title} – Houses Of" /> - -
- + +
+
+ - -
  • - -
    • -
  • - -
    • -
  • - -
    • -     -
    + +
  • + +
    • +
  • + +
    • +
  • + +
    • +     +
    - - + + -
    -
    -
    - - +
    +
    +
    + + +
    -
    + \ No newline at end of file diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index a20ac68..efbabe1 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -7,7 +7,6 @@ import type { PageData } from './$types' import { onMount, setContext } from 'svelte' import { pageLoading, previousPage } from '$utils/stores' - import { DURATION } from '$utils/contants' import '$utils/polyfills' import { PUBLIC_ANALYTICS_KEY, PUBLIC_ANALYTICS_URL } from '$env/static/public' // Components @@ -46,14 +45,7 @@ // Define page loading from navigating store navigating.subscribe((store: any) => { - if (store) { - $pageLoading = true - - // Turn page loading when changing page - setTimeout(() => { - $pageLoading = false - }, DURATION.PAGE_IN * 1.25) - } + store && ($pageLoading = true) }) onMount(() => { diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 83c9ea8..bbd5930 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -82,87 +82,89 @@ /> - -
    - +
    +
    - - + + + -
    -

    - {settings.description} -

    +
    +

    + {settings.description} +

    - + +
    +
    + +
    + +
    + +
    + + + +
  • + +
    • +
  • + +
    • +
  • + +
    • +
    -
    -
    - -
    +
    + -
    - + + + - -
  • - -
    • -
  • - -
    • -
  • - -
    • -     -
    + +
    -
    - - - - - - - -
    - -
    -
    -
    - - +
    +
    +
    + + +
    -
    + \ No newline at end of file diff --git a/src/routes/[country]/[location]/+page.svelte b/src/routes/[country]/[location]/+page.svelte index e96a8f7..ae07268 100644 --- a/src/routes/[country]/[location]/+page.svelte +++ b/src/routes/[country]/[location]/+page.svelte @@ -218,148 +218,149 @@ + +
    +
    +

    + + 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} -

    - {#if latestPhoto} - · -

    - Updated +

    +
    +
    + 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} -
    + {#if latestPhoto} + · +

    + Updated +

    + {/if} +
    -
    - - - {#if location.has_poster} - - {/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 !ended} -

    See more photos

    - {:else} -

    You've seen it all!

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

    {location.acknowledgement}

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

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

    -
    - {/if} + + {#if photos.length} +
    + {#each photos as { title, image: { id, title: alt, width, height }, slug, city, date_taken }, index} + + {/each} +
    + +
    + + {#if !ended} +

    See more photos

    + {:else} +

    You've seen it all!

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

    {location.acknowledgement}

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

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

    +
    + {/if} + \ No newline at end of file diff --git a/src/routes/[country]/[location]/[photo]/+page.svelte b/src/routes/[country]/[location]/[photo]/+page.svelte index f9444ba..8475e3d 100644 --- a/src/routes/[country]/[location]/[photo]/+page.svelte +++ b/src/routes/[country]/[location]/[photo]/+page.svelte @@ -305,98 +305,100 @@ {/if} - -
    -

    Tap for fullscreen

    + +
    +
    +

    Tap for fullscreen

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

    {currentPhoto.title}

    -
    - -
    -
    - -
    -

    {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 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} +
    \ No newline at end of file diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte index e506335..8ab49d3 100644 --- a/src/routes/about/+page.svelte +++ b/src/routes/about/+page.svelte @@ -180,215 +180,216 @@ image={about.seo_image ? getAssetUrlKey(about.seo_image.id, 'share-image') : null} /> + +
    + - - - -
    -
    -

    {about.intro_title}

    -
    - {@html about.intro_heading} -
    - -
    - {@html about.intro_text} -
    -
    -
    - -
    -
    -
    - {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} - -
    -
    - -
    -
    -
    - {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} - - {/each} +
    + {@html about.intro_text} +
    -
    -
    + -
    -
    -
    - {#each photos as { image: { id }, title }, index} - +
    +
    + {about.intro_firstphoto.title} - {/each} -
    -
    -
    +
    + {about.intro_firstphoto_caption}
    + in + + {about.intro_firstlocation.country.flag.title} + Naarm Australia (Melbourne) + +
    + -
    -
    -

    {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} -
    +

    {about.creation_title}

    +
    + {@html about.creation_heading} +
    + +
    + {@html about.creation_text} +
    + +
    + {about.creation_portrait.title} +
    + + {about.creation_portrait_caption} + +
    +
    + +
    +
    +
    + {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} + + {/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} +
    +
    + {/each} +
    +
    +
    +     \ No newline at end of file diff --git a/src/routes/credits/+page.svelte b/src/routes/credits/+page.svelte index 7b6029d..f2efc62 100644 --- a/src/routes/credits/+page.svelte +++ b/src/routes/credits/+page.svelte @@ -17,7 +17,7 @@ import InteractiveGlobe from '$components/organisms/InteractiveGlobe.svelte' export let data: PageData - const { credits, credit } = data + const { credit } = data onMount(() => { @@ -63,22 +63,47 @@ + +
    + - - +
    +
    + {#each data.credits.list as { title, credits }} +
    +

    {title}

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

      + {name} +

      + {:else} +

      {name}

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

    {title}

    +

    Photography

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

    Photography

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

      - {name} -

      - {:else} -

      {name}

      - {/if} -
      -
      - -
      -
      -
      • - {/each} -
    -
    -
    +
    - + +
    \ No newline at end of file diff --git a/src/routes/locations/+page.svelte b/src/routes/locations/+page.svelte index f6027d3..f07f462 100644 --- a/src/routes/locations/+page.svelte +++ b/src/routes/locations/+page.svelte @@ -23,18 +23,20 @@ image="" /> - - + +
    + -
    - - -
    +
    + + +
    -
    -
    - - -
    -
    +
    +
    + + +
    +
    +
    \ No newline at end of file diff --git a/src/routes/photos/+page.svelte b/src/routes/photos/+page.svelte index 087d182..cd5dd81 100644 --- a/src/routes/photos/+page.svelte +++ b/src/routes/photos/+page.svelte @@ -336,162 +336,164 @@ /> - -
    - - - - - - -
    +
    +
    -
    - Filter photos -
      -
    • - -
      • -
    • - -
      • -
    + + + -
    - {#if filtered} - - {/if} -
    -
    -
    -
    + -
    -
    - {#if photos} -
    - {#each photos as { id, image, slug, location, title, city }, index (id)} -
    - - {image.title} - -
    - -
    -
    - {/each} -
    +
    +
    + Filter photos +
      +
    • + +
      • +
    • + +
      • +
    -
    -

    - Last updated: -

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

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

    -
    - {/if} +
    +
    -
    -
    - - +
    +
    + {#if photos} +
    + {#each photos as { id, image, slug, location, title, city }, index (id)} +
    + + {image.title} + +
    + +
    +
    + {/each} +
    + +
    +

    + Last updated: +

    + +
    + {:else if !filteredCountryExists} +
    +

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

    +
    + {/if} + +
    +
    + + +
    -
    - + + \ No newline at end of file diff --git a/src/routes/shop/+error.svelte b/src/routes/shop/+error.svelte index f30411a..dcd77f9 100644 --- a/src/routes/shop/+error.svelte +++ b/src/routes/shop/+error.svelte @@ -25,17 +25,19 @@ /> - - + +
    + -
    -
    -
    -

    Uh oh!

    -

    {errors[$page.status].message}

    +
    +
    +
    +

    Uh oh!

    +

    {errors[$page.status].message}

    +
    -
    -
    + - + +
    \ No newline at end of file diff --git a/src/routes/shop/+page.svelte b/src/routes/shop/+page.svelte index 4781f31..0dcaaea 100644 --- a/src/routes/shop/+page.svelte +++ b/src/routes/shop/+page.svelte @@ -26,13 +26,15 @@ /> - - + +
    + - + - + +
    \ No newline at end of file diff --git a/src/routes/shop/[type]-[name]/+page.svelte b/src/routes/shop/[type]-[name]/+page.svelte index 35f8507..a35c6ab 100644 --- a/src/routes/shop/[type]-[name]/+page.svelte +++ b/src/routes/shop/[type]-[name]/+page.svelte @@ -24,13 +24,15 @@ /> - - + +
    + - + - + +
    \ No newline at end of file diff --git a/src/routes/subscribe/+page.svelte b/src/routes/subscribe/+page.svelte index cd51ab3..ec74f30 100644 --- a/src/routes/subscribe/+page.svelte +++ b/src/routes/subscribe/+page.svelte @@ -65,32 +65,34 @@ description="Subscribe to the Houses Of newsletter to be notified when new photos or locations are added to the site and when more prints are available on our shop" /> - -