Bring back the sapper-noscroll attribute
All checks were successful
continuous-integration/drone/push Build is passing

Window scroll is now been triggered manually during the page transition and not automatically by Sapper
This commit is contained in:
2020-04-04 11:46:17 +02:00
parent 94fa63ef41
commit 37c5cb2c4e
7 changed files with 11 additions and 8 deletions

View File

@@ -2,6 +2,7 @@
export let href = '#' export let href = '#'
export let type = 'a' export let type = 'a'
export let text = '' export let text = ''
export let noScroll = undefined
</script> </script>
{#if type === 'button'} {#if type === 'button'}
@@ -13,7 +14,7 @@
</button> </button>
{:else} {:else}
<a {href} class={$$props.class ? $$props.class : 'button'} on:click> <a {href} class={$$props.class ? $$props.class : 'button'} on:click sapper-noscroll={noScroll}>
<slot></slot> <slot></slot>
<div class="text" data-text={text}> <div class="text" data-text={text}>
<span>{text}</span> <span>{text}</span>

View File

@@ -1,9 +1,10 @@
<script> <script>
export let href = '#' export let href = '#'
export let text = '' export let text = ''
export let noScroll = undefined
</script> </script>
<a href={href} class="link-change"> <a href={href} class="link-change" sapper-noscroll={noScroll}>
{text} {text}
<span class="icon"> <span class="icon">
<slot></slot> <slot></slot>

View File

@@ -3,9 +3,10 @@
export let text = '' export let text = ''
export let target = null export let target = null
export let rel = null export let rel = null
export let noScroll = undefined
</script> </script>
<a class="link-translate" {href} {target} {rel}> <a class="link-translate" {href} {target} {rel} sapper-noscroll={noScroll}>
<slot /> <slot />
<div class="text" data-text={text}> <div class="text" data-text={text}>
<span>{text}</span> <span>{text}</span>

View File

@@ -7,7 +7,7 @@
</script> </script>
<div class="location"> <div class="location">
<a href="/location/{country.slug}/{slug}" rel="prefetch"> <a href="/location/{country.slug}/{slug}" rel="prefetch" sapper-noscroll>
<img src={country.flag.full_url} alt="Flag of {country.name}"> <img src={country.flag.full_url} alt="Flag of {country.name}">
<div class="anim-mask mask-city"> <div class="anim-mask mask-city">
<h3 class="location__city">{name}</h3> <h3 class="location__city">{name}</h3>

View File

@@ -46,7 +46,7 @@
<div class="photo__image wrap"> <div class="photo__image wrap">
<div class="align"> <div class="align">
<a href="/viewer/{location.country.slug}/{location.slug}/{photo.slug}"> <a href="/viewer/{location.country.slug}/{location.slug}/{photo.slug}" sapper-noscroll>
<picture class="photo__picture"> <picture class="photo__picture">
<source media="(min-width: 992px)" data-srcset={getThumbnail(private_hash, 1300)}> <source media="(min-width: 992px)" data-srcset={getThumbnail(private_hash, 1300)}>
<source media="(min-width: 768px)" data-srcset={getThumbnail(private_hash, 992)}> <source media="(min-width: 768px)" data-srcset={getThumbnail(private_hash, 992)}>

View File

@@ -22,7 +22,7 @@
<div class="switcher {type}"> <div class="switcher {type}">
<div class="switcher__text" class:empty={!location}> <div class="switcher__text" class:empty={!location}>
<a href="/"> <a href="/" sapper-noscroll>
{#if !location} {#if !location}
<span class="top">Houses</span> <span class="top">Houses</span>
<span class="bottom"> <span class="bottom">
@@ -36,7 +36,7 @@
</div> </div>
<div class="button-control button-control--dashed switcher__icon"> <div class="button-control button-control--dashed switcher__icon">
<a href="/choose" aria-label="Change the location"> <a href="/choose" aria-label="Change the location" sapper-noscroll>
<IconGlobe <IconGlobe
color={type.includes('side') ? '#333' : '#fff'} color={type.includes('side') ? '#333' : '#fff'}
width={type.includes('side') ? 18 : 24} width={type.includes('side') ? 18 : 24}

View File

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