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

Move data-sveltekit-* attributes to parent level when possible

Browse Source
This commit is contained in:
Félix Péault
2022-08-31 09:43:52 +02:00
parent 3618414aa0
commit 1de3c717b2
15 changed files with 121 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/atoms/BoxCTA.svelte
View File

@@ -12,7 +12,7 @@
</script>
<a href={url} class="box-cta"
data-sveltekit-noscroll data-sveltekit-prefetch={url.includes('http') ? true : undefined}
data-sveltekit-prefetch={url.includes('http') ? true : undefined}
>
<div class="icon">
<Icon icon={icon} label={alt} />

2
src/components/molecules/House.svelte
View File

@@ -40,7 +40,7 @@
</div>
<div class="house__photo grid" class:not-landscape={ratio < 1.475}>
<a href={url} data-sveltekit-noscroll tabindex="0">
<a href={url} tabindex="0">
<figure class="house__image shadow-photo">
<Image
class="photo"

1
src/components/molecules/Location.svelte
View File

@@ -69,7 +69,6 @@
<a href="/{location.country.slug}/{location.slug}"
on:mousemove={handleMouseMove}
on:mouseleave={handleMouseLeave}
data-sveltekit-noscroll
tabindex="0"
>
<Image

6
src/components/molecules/Switcher.svelte
View File

@@ -60,12 +60,10 @@
</span>
</button>
<ul class="switcher__links">
<ul class="switcher__links" data-sveltekit-noscroll data-sveltekit-prefetch>
{#each switcher_links as { text, url, icon, icon_label }}
<li class:is-active={$page.url.pathname === url}>
<a href={url} on:click={toggleSwitcher} tabindex="0"
data-sveltekit-noscroll data-sveltekit-prefetch
>
<a href={url} on:click={toggleSwitcher} tabindex="0">
<Icon class="icon" icon={icon} label={icon_label} />
<span>{text}</span>
</a>

4
src/components/organisms/Footer.svelte
View File

@@ -19,10 +19,10 @@
</a>
<nav class="footer__links">
<ul>
<ul data-sveltekit-prefetch data-sveltekit-noscroll>
{#each footer_links as { title, slug }}
<li>
<a href="/{slug}" class="link-3d" data-sveltekit-prefetch data-sveltekit-noscroll tabindex="0">
<a href="/{slug}" class="link-3d" tabindex="0">
<SplitText text={title} clone={true} />
</a>
</li>

8
src/components/organisms/InteractiveGlobe2.svelte
View File

@@ -122,10 +122,10 @@
</div>
{#if enableMarkers}
<ul class="globe__markers">
<ul class="globe__markers" data-sveltekit-noscroll>
{#each markers as { name, slug, country, lat, lng }}
<li class="globe__marker" data-location={slug} data-lat={lat} data-lng={lng}>
<a href="/{country.slug}/{slug}" data-sveltekit-noscroll>
<a href="/{country.slug}/{slug}">
<dl>
<dt class="title-small">{name}</dt>
<dd class="text-label text-label--small">{country.name}</dd>
@@ -141,10 +141,10 @@
{#if popinOpen}
<div class="globe__popin" transition:fly={{ y: 16, duration: 500, easing: quartOut }}>
<ul>
<ul data-sveltekit-noscroll>
{#each clusterLocations as { name, slug, country }}
<li>
<a href="/{country.slug}/{slug}" data-sveltekit-noscroll tabindex="0">
<a href="/{country.slug}/{slug}" tabindex="0">
<Image
class="flag"
id={country.flag.id}

2
src/components/organisms/ListCTAs.svelte
View File

@@ -19,6 +19,6 @@
}
</style>
<ul class="list-cta">
<ul class="list-cta" data-sveltekit-noscroll>
<slot />
</ul>

2
src/components/organisms/Locations.svelte
View File

@@ -65,7 +65,7 @@
{/each}
</ul>
<ul class="browse__locations"
<ul class="browse__locations" data-sveltekit-noscroll
use:reveal={{
children: '.location',
animation: { y: ['20%', 0], opacity: [0, 1] },

4
src/components/organisms/ShopHeader.svelte
View File

@@ -113,10 +113,10 @@
<div class="container">
<p class="text-label">Choose a city</p>
<nav>
<ul>
<ul data-sveltekit-noscroll data-sveltekit-prefetch>
{#each shopLocations as { name, slug }}
<li class:is-active={product && slug === product.location.slug}>
<a href="/shop/poster-{slug}" on:click={() => smoothScroll({ hash: 'poster' })} data-sveltekit-prefetch data-sveltekit-noscroll>
<a href="/shop/poster-{slug}" on:click={() => smoothScroll({ hash: 'poster' })}>
{name}
</a>
</li>

17
src/routes/+page.svelte
View File

@@ -118,15 +118,6 @@
<DiscoverText />
<ListCTAs>
<li>
<BoxCTA
url="#locations"
icon="globe"
label="Discover locations"
alt="Globe"
on:click={() => smoothScroll({ hash: 'locations' })}
/>
</li>
<li>
<BoxCTA
url="/photos"
@@ -143,6 +134,14 @@
alt="Shopping bag"
/>
</li>
<li>
<BoxCTA
url="/about"
icon="compass"
label="Learn about the project"
alt="Compass"
/>
</li>
</ListCTAs>
</div>

2
src/routes/[country]/[location]/+page.svelte
View File

@@ -282,7 +282,7 @@
</section>
{#if photos.length}
<section class="location-page__houses" bind:this={photosListEl}>
<section class="location-page__houses" bind:this={photosListEl} data-sveltekit-noscroll>
{#each photos as { title, image: { id, title: alt, width, height }, slug, city, date_taken }, index}
<House
{title}

4
src/routes/credits/+page.svelte
View File

@@ -117,11 +117,11 @@
{/if}
</dt>
<dd>
<ul>
<ul data-sveltekit-noscroll>
{#each location as loc}
{#if loc.location_id}
<li>
<a href="/{loc.location_id.country.slug}/{loc.location_id.slug}" data-sveltekit-noscroll tabindex="0">
<a href="/{loc.location_id.country.slug}/{loc.location_id.slug}" tabindex="0">
<Image
id={loc.location_id.country.flag.id}
sizeKey="square-small"

4
src/routes/photos/+page.svelte
View File

@@ -427,10 +427,10 @@
<section class="photos-page__content" bind:this={photosContentEl} style:--margin-sides="{sideMargins}px">
<div class="grid container">
{#if photos}
<div class="photos-page__grid" bind:this={photosGridEl}>
<div class="photos-page__grid" bind:this={photosGridEl} data-sveltekit-noscroll data-sveltekit-prefetch>
{#each photos as { id, image, slug, location, title, city }, index (id)}
<figure class="photo shadow-photo">
<a href="/{location.country.slug}/{location.slug}/{slug}" data-sveltekit-prefetch data-sveltekit-noscroll tabindex="0">
<a href="/{location.country.slug}/{location.slug}/{slug}" tabindex="0">
<Image
id={image.id}
sizeKey="photo-grid"