🔥 Huge style refactoring by using SvelteKit built-in style tag
It's been tricky but got there finally! Hello `:global` - Avoid using one global CSS file containing everything - Import the component SCSS file in a script tag from the component file to allow style scoping and including it only when used
This commit is contained in:
@@ -1,3 +1,7 @@
|
||||
<style lang="scss">
|
||||
@import "../../../style/pages/viewer";
|
||||
</style>
|
||||
|
||||
<script lang="ts">
|
||||
import { browser } from '$app/env'
|
||||
import { page } from '$app/stores'
|
||||
@@ -223,24 +227,24 @@
|
||||
autoplay: false,
|
||||
})
|
||||
|
||||
anime.set('.viewer__picture', {
|
||||
anime.set('.photo-page__picture', {
|
||||
opacity: 0,
|
||||
})
|
||||
anime.set('.viewer__picture.is-1', {
|
||||
anime.set('.photo-page__picture.is-1', {
|
||||
translateY: 24,
|
||||
})
|
||||
|
||||
// Photos
|
||||
timeline.add({
|
||||
targets: '.viewer__picture.is-1',
|
||||
targets: '.photo-page__picture.is-1',
|
||||
opacity: 1,
|
||||
translateY: 0,
|
||||
duration: 900,
|
||||
}, 250)
|
||||
timeline.add({
|
||||
targets: '.viewer__picture:not(.is-1)',
|
||||
targets: '.photo-page__picture:not(.is-1)',
|
||||
opacity: 1,
|
||||
translateX (element: HTMLElement, index: number) {
|
||||
translateX (element: HTMLElement) {
|
||||
const x = getComputedStyle(element).getPropertyValue('--offset-x').trim()
|
||||
return [`-${x}`, 0]
|
||||
},
|
||||
@@ -249,7 +253,7 @@
|
||||
|
||||
// Prev/Next buttons
|
||||
timeline.add({
|
||||
targets: '.viewer__controls button',
|
||||
targets: '.photo-page__controls button',
|
||||
translateX (item: HTMLElement) {
|
||||
let direction = item.classList.contains('prev') ? -1 : 1
|
||||
return [16 * direction, 0]
|
||||
@@ -260,25 +264,25 @@
|
||||
|
||||
// Infos
|
||||
timeline.add({
|
||||
targets: '.viewer__info > *',
|
||||
targets: '.photo-page__info > *',
|
||||
translateY: [24, 0],
|
||||
opacity: [0, 1],
|
||||
delay: anime.stagger(200)
|
||||
}, 400)
|
||||
|
||||
|
||||
anime.set('.viewer__index', {
|
||||
anime.set('.photo-page__index', {
|
||||
opacity: 0
|
||||
})
|
||||
// Index
|
||||
timeline.add({
|
||||
targets: '.viewer__index',
|
||||
targets: '.photo-page__index',
|
||||
opacity: 1,
|
||||
duration: 900,
|
||||
}, 600)
|
||||
// Fly each number
|
||||
timeline.add({
|
||||
targets: '.viewer__index .char',
|
||||
targets: '.photo-page__index .char',
|
||||
translateY: ['100%', 0],
|
||||
delay: anime.stagger(200),
|
||||
duration: 1000,
|
||||
@@ -303,25 +307,25 @@
|
||||
{/if}
|
||||
|
||||
|
||||
<PageTransition name="viewer">
|
||||
<PageTransition name="photo-page">
|
||||
<div class="container grid">
|
||||
<p class="viewer__notice text-label">Tap for fullscreen</p>
|
||||
<p class="photo-page__notice text-label">Tap for fullscreen</p>
|
||||
|
||||
<ButtonCircle
|
||||
tag="a"
|
||||
url={previousUrl}
|
||||
color="purple"
|
||||
class="viewer__close shadow-box-dark"
|
||||
class="close shadow-box-dark"
|
||||
>
|
||||
<svg width="12" height="12">
|
||||
<use xlink:href="#cross">
|
||||
</svg>
|
||||
</ButtonCircle>
|
||||
|
||||
<div class="viewer__carousel">
|
||||
<div class="viewer__images" use:swipe on:swipe={handleSwipe} on:tap={toggleFullscreen}>
|
||||
<div class="photo-page__carousel">
|
||||
<div class="photo-page__images" use:swipe on:swipe={handleSwipe} on:tap={toggleFullscreen}>
|
||||
{#each visiblePhotos as { id, image, title }, index (id)}
|
||||
<div class="viewer__picture is-{currentIndex === 0 ? index + 1 : index}">
|
||||
<div class="photo-page__picture is-{currentIndex === 0 ? index + 1 : index}">
|
||||
<Image
|
||||
class="photo {image.width / image.height < 1.475 ? 'not-landscape' : ''}"
|
||||
id={image.id}
|
||||
@@ -337,7 +341,7 @@
|
||||
</div>
|
||||
{/each}
|
||||
|
||||
<div class="viewer__controls">
|
||||
<div class="photo-page__controls">
|
||||
<ButtonCircle class="prev shadow-box-dark" disabled={!canGoNext} clone={true} on:click={goToPrevious}>
|
||||
<IconArrow color="pink" flip={true} />
|
||||
</ButtonCircle>
|
||||
@@ -347,12 +351,12 @@
|
||||
</div>
|
||||
|
||||
|
||||
<div class="viewer__index title-index">
|
||||
<div class="photo-page__index title-index">
|
||||
<SplitText text="{(currentPhotoIndex < 10) ? '0' : ''}{currentPhotoIndex}" mode="chars" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="viewer__info">
|
||||
<div class="photo-page__info">
|
||||
<h1 class="title-medium">{currentPhoto.title}</h1>
|
||||
|
||||
<div class="detail text-info">
|
||||
@@ -376,7 +380,7 @@
|
||||
</div>
|
||||
|
||||
{#if isFullscreen}
|
||||
<div class="viewer__fullscreen" bind:this={fullscreenEl} on:click={toggleFullscreen}
|
||||
<div class="photo-page__fullscreen" bind:this={fullscreenEl} on:click={toggleFullscreen}
|
||||
in:fade={{ easing: quartOut, duration: 1000 }}
|
||||
out:fade={{ easing: quartOut, duration: 1000, delay: 300 }}
|
||||
>
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
<style lang="scss">
|
||||
@import "../../../style/pages/location";
|
||||
</style>
|
||||
|
||||
<script lang="ts">
|
||||
import { navigating, page } from '$app/stores'
|
||||
import { onMount } from 'svelte'
|
||||
@@ -14,6 +18,7 @@
|
||||
import Button from '$components/atoms/Button.svelte'
|
||||
import IconEarth from '$components/atoms/IconEarth.svelte'
|
||||
import House from '$components/molecules/House.svelte'
|
||||
import Pagination from '$components/molecules/Pagination.svelte'
|
||||
import NewsletterModule from '$components/organisms/NewsletterModule.svelte'
|
||||
|
||||
export let location: any
|
||||
@@ -279,23 +284,19 @@
|
||||
|
||||
<section class="location-page__next">
|
||||
<div class="container">
|
||||
<div class="pagination" role="button"
|
||||
on:click={!ended && loadMorePhotos} disabled={ended ? ended : undefined}
|
||||
<Pagination
|
||||
ended={ended}
|
||||
current={currentPhotosAmount}
|
||||
total={totalPhotos}
|
||||
on:click={!ended && loadMorePhotos}
|
||||
on:keydown={({ key, target }) => key === 'Enter' && target.click()}
|
||||
tabindex="0"
|
||||
>
|
||||
<div class="pagination__progress">
|
||||
<span class="current">{currentPhotosAmount}</span>
|
||||
<span>/</span>
|
||||
<span class="total">{totalPhotos}</span>
|
||||
|
||||
{#if !ended}
|
||||
<p class="pagination__more">See more photos</p>
|
||||
{:else}
|
||||
<p class="pagination__message">You've seen it all!</p>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
>
|
||||
{#if !ended}
|
||||
<p class="more">See more photos</p>
|
||||
{:else}
|
||||
<p class="message">You've seen it all!</p>
|
||||
{/if}
|
||||
</Pagination>
|
||||
|
||||
{#if ended}
|
||||
<NewsletterModule theme="light" />
|
||||
|
||||
Reference in New Issue
Block a user