WIP React > Svelte

Put most of the developed design into Svelte

src/routes/location/[country]/[location].svelte

@@ -1,74 +1,165 @@
 <script context="module">
 	// Svelte
-	import { api, site, locations, currentLocation } from '../../../store'
+	import { apiEndpoints, site, locations, currentLocation } from '../../../store'
+	import { stores } from '@sapper/app'
 
-	// Preload
+	// Preload data
 	export async function preload (page, session) {
-		const photos = await this.fetch(`${api.rest}/items/photos?fields=id,name,date,slug,image.data,created_on,modified_on&filter[location.slug][rlike]=%${page.params.location}%&sort=-created_on,name`)
-		const photosData = await photos.json()
-
-		return {
-			photos: photosData.data
+		// Load photos
+		const req = await this.fetch(`${apiEndpoints.rest}/items/photos?fields=id,name,date,slug,image.data,created_on,modified_on&filter[location.slug][rlike]=%${page.params.location}%&sort=-created_on,name`)
+		const photos = await req.json()
+		if (req.status === 200) {
+			return { photos: photos.data }
 		}
+		this.error(404, 'Not found')
 	}
 </script>
 
 <script>
-	// Svelte
-	import { fade, slide } from 'svelte/transition'
-	import { stores } from '@sapper/app'
-	const { page } = stores()
-	export let photos
-
 	// Dependencies
 	import dayjs from 'dayjs'
 	import advancedFormat from 'dayjs/plugin/advancedFormat'
 	import relativeTime from 'dayjs/plugin/relativeTime'
+
+	// Components
+	import IconGlobe from '../../../atoms/iconGlobe'
+	import IconGlobeSmall from '../../../atoms/iconGlobeSmall'
+	import Cursor from '../../../atoms/Cursor'
+	import Photo from '../../../molecules/Photo'
+	import Switcher from '../../../molecules/Switcher'
+	import Footer from '../../../molecules/Footer'
+
+	// Props
+	export let photos
+
+	// Setup
+	const { page } = stores()
 	dayjs.extend(advancedFormat)
 	dayjs.extend(relativeTime)
 
-	// Components
-	import Photo from '../../../components/Photo'
-	import SwitcherSide from '../../../components/SwitcherSide'
-
 	// Update current location
-	currentLocation.set({
-		location: $locations.find(location => location.slug === $page.params.location),
-		photos: photos
-	})
+	const location = $locations.find(loc => loc.slug === $page.params.location)
+	currentLocation.set({ location, photos })
 
-	// Define things
-	const locationFull = `${$currentLocation.location.name}, ${$currentLocation.location.country.name}`
-	const dateUpdated = (photos.length) ? {
-		full: dayjs(photos[0].modified_on).format('MMM Do, YYYY'),
-		relative: dayjs().to(dayjs(photos[0].modified_on))
-	} : undefined
-	const lastUpdated = (photos.length) ? ((dayjs(photos[0].modified_on).isBefore(dayjs().subtract(1, 'M'))) ? dateUpdated.full : dateUpdated.relative) : undefined
+	// Define full location
+	const locationFull = `${location.name}, ${location.country.name}`
+
+	// Define dates
+	const dateUpdatedFull = photos.length ? dayjs(photos[0].modified_on).format('MMM Do, YYYY') : ''
+	const dateUpdatedRelative = photos.length ? dayjs().to(dayjs(photos[0].modified_on)) : ''
+	const lastUpdated = photos.length ? (dayjs(photos[0].modified_on).isBefore(dayjs().subtract(1, 'M'))) ? dateUpdatedFull : dateUpdatedRelative : ''
 </script>
 
 <svelte:head>
 	<title>Houses Of - Beautiful houses of {locationFull}</title>
 </svelte:head>
 
-<div class="section container">
+<section class="place">
+	<div class="place__title">
+		<h1 class="title-location title-location--big">
+			<span class="top">Houses <em>of</em></span>
+			<span class="bottom">{location.name}</span>
+		</h1>
+
+		<a href="/choose" class="button-control button-control--big button-control--dashed">
+			<span class="center">
+				<IconGlobe width="44" color="#fff" />
+				<span>Change</span>
+			</span>
+			<svg>
+				<circle cx="50%" cy="50%" r="43%"></circle>
+			</svg>
+		</a>
+	</div>
+
+	<div class="wrap place__description--wrap">
+		<div class="place__description">
+			<div class="wrapper">
+				<p>{$site.description}</p>
+				<p>
+					Houses Of
+					<a href="/choose" class="link-change">
+						{location.name}
+						<span class="icon">
+							<IconGlobeSmall width="14" color="#999" />
+						</span>
+					</a>
+					{location.description}
+				</p>
+				<p class="updated style-caps">
+					<strong>Updated</strong>
+					<time datetime={dateUpdatedFull} title={dateUpdatedFull}>{lastUpdated}</time>
+				</p>
+
+				<div class="toggle">
+					<button on:click class="active">
+						<svg xmlns="http://www.w3.org/2000/svg" width="19" height="17" viewBox="0 0 19 17">
+							<path fill="#FF6C89" fillRule="evenodd" d="M39,30 L39,33 L24,33 L24,30 L39,30 Z M43,23 L43,26 L28,26 L28,23 L43,23 Z M39,16 L39,19 L24,19 L24,16 L39,16 Z" transform="translate(-24 -16)" />
+						</svg>
+						<span>List</span>
+					</button>
+					<button on:click>
+						<svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" viewBox="0 0 18 20">
+							<path fill="#FF6C89" fillRule="evenodd" d="M63,27 L63,34 L56,34 L56,27 L63,27 Z M52,25 L52,32 L45,32 L45,25 L52,25 Z M63,16 L63,23 L56,23 L56,16 L63,16 Z M52,14 L52,21 L45,21 L45,14 L52,14 Z" transform="translate(-45 -14)"/>
+						</svg>
+						<span>Grid</span>
+					</button>
+				</div>
+			</div>
+		</div>
+	</div>
+</section>
+
+<section class="photos photos--list">
+	<aside class="photos__side">
+		<div class="sticky">
+			<Switcher type="switcher--side" />
+			<p class="updated style-caps">
+				<strong>Updated</strong>
+				<time datetime={dateUpdatedFull} title={dateUpdatedFull}>{lastUpdated}</time>
+			</p>
+		</div>
+	</aside>
+
+	<Cursor type="zoom" />
+
+	<div class="wrap">
+		{#each photos as photo, index}
+		<Photo {photo} index={index + 1} />
+		{/each}
+	</div>
+
+	<section class="pagination">
+		<button>
+			<div class="pagination__page">
+				<p><span>page</span> 1/3</p>
+			</div>
+			<p class="style-caps pagination__caption">See more photos</p>
+		</button>
+	</section>
+
+	<Footer />
+</section>
+
+<!-- <div class="section container">
 	<div class="nav content">
-		<SwitcherSide />
+		<Switcher />
 	</div>
 
 	<div class="content">
 		<h1 class="title is-2">{locationFull}</h1>
-		{#if $currentLocation && $currentLocation.location.description}
+		{#if location && location.description}
 		<p>
 			{$site.description}<br>
-			Houses Of <a href="/choose">{$currentLocation.location.name}</a> {$currentLocation.location.description}
+			Houses Of <a href="/choose">{location.name}</a> {location.description}
 		</p>
 		{/if}
-		{#if photos.length > 0}
-		<p><strong>Updated</strong> <time title="{dateUpdated && dateUpdated.full}">{lastUpdated}</time></p>
+		{#if photos.length}
+		<p><strong>Updated</strong> <time datetime={dateUpdatedFull} title={dateUpdatedFull}>{lastUpdated}</time></p>
 		{/if}
 	</div>
 
-	{#if photos.length > 0}
+	{#if photos.length}
 	<div class="columns is-multiline">
 		{#each photos as photo, index}
 		<div class="column is-one-third">
@@ -83,4 +174,4 @@
 		</div>
 	</div>
 	{/if}
-</div>
+</div> -->