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

WIP

Browse Source
This commit is contained in:
Félix Péault
2020-02-13 22:24:28 +01:00
parent 9b0c154f61
commit ef23d90eb6
60 changed files with 1665 additions and 930 deletions
Download Patch File Download Diff File Expand all files Collapse all files

128
src/routes/location/[country]/[location].svelte
View File

@@ -6,7 +6,7 @@
// Preload data
export async function preload (page, session) {
// 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 req = await this.fetch(`${apiEndpoints.rest}/items/photos?fields=id,name,date,slug,image.*,created_on,modified_on&filter[location.slug][rlike]=%${page.params.location}%&limit=-1&sort=-created_on,name`)
const photos = await req.json()
if (req.status === 200) {
return { photos: photos.data }
@@ -16,26 +16,29 @@
</script>
<script>
import { onMount } from 'svelte'
// Dependencies
import dayjs from 'dayjs'
import advancedFormat from 'dayjs/plugin/advancedFormat'
import relativeTime from 'dayjs/plugin/relativeTime'
dayjs.extend(advancedFormat)
dayjs.extend(relativeTime)
// Components
import IconGlobe from '../../../atoms/iconGlobe'
import IconGlobeSmall from '../../../atoms/iconGlobeSmall'
import Cursor from '../../../atoms/Cursor'
import LinkChange from '../../../atoms/LinkChange'
import ToggleLayout from '../../../atoms/ToggleLayout'
import Photo from '../../../molecules/Photo'
import Switcher from '../../../molecules/Switcher'
import Footer from '../../../molecules/Footer'
// Props
// Props and variables
export let photos
// Setup
const { page } = stores()
dayjs.extend(advancedFormat)
dayjs.extend(relativeTime)
let layoutSetting
let pagesTotal = 3
// Update current location
const location = $locations.find(loc => loc.slug === $page.params.location)
@@ -46,8 +49,18 @@
// Define dates
const dateUpdatedFull = photos.length ? dayjs(photos[0].modified_on).format('MMM Do, YYYY') : ''
const dateUpdatedDatetime = photos.length ? dayjs(photos[0].modified_on).format('YYYY-MM-DDThh:mm:ss') : ''
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 : ''
/*
** Run code on browser only
*/
onMount(() => {
// Get layout setting from storage
layoutSetting = localStorage.getItem('photosLayout')
})
</script>
<svelte:head>
@@ -67,7 +80,7 @@
<span>Change</span>
</span>
<svg>
<circle cx="50%" cy="50%" r="43%"></circle>
<circle cx="50%" cy="50%" r="43%" />
</svg>
</a>
</div>
@@ -77,101 +90,56 @@
<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>
Houses on:eventname
<LinkChange href="/choose" text={location.name}>
<IconGlobeSmall width="14" color="#999" />
</LinkChange>
{location.description}
</p>
<p class="updated style-caps">
<strong>Updated</strong>
<time datetime={dateUpdatedFull} title={dateUpdatedFull}>{lastUpdated}</time>
<time datetime={dateUpdatedDatetime} 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>
<ToggleLayout />
</div>
</div>
</div>
</section>
<section class="photos photos--list">
<aside class="photos__side">
<div class="sticky">
<section class="photos photos--{layoutSetting || 'list'}">
<div class="photos__side--wrap wrap">
<aside class="photos__side">
<Switcher type="switcher--side" />
<p class="updated style-caps">
<strong>Updated</strong>
<time datetime={dateUpdatedFull} title={dateUpdatedFull}>{lastUpdated}</time>
<time datetime={dateUpdatedDatetime} title={dateUpdatedFull}>{lastUpdated}</time>
</p>
</div>
</aside>
</aside>
</div>
<Cursor type="zoom" />
<div class="wrap">
<div class="photos__view wrap">
{#each photos as photo, index}
<Photo {photo} index={index + 1} />
{/each}
</div>
{#if photos.length}
<section class="pagination">
<button>
<div class="pagination__page">
<p><span>page</span> 1/3</p>
<div class="pagination__page">
<div class="pagination__page--info">page</div>
<div class="pagination__page--numbers">
<div class="scroll">
<span>3</span>
<span>2</span>
<span>1</span>
</div>
</div>
<p class="style-caps pagination__caption">See more photos</p>
</button>
/{pagesTotal}
</div>
<p class="style-caps pagination__caption">See more photos</p>
</section>
<Footer />
{/if}
</section>
<!-- <div class="section container">
<div class="nav content">
<Switcher />
</div>
<div class="content">
<h1 class="title is-2">{locationFull}</h1>
{#if location && location.description}
<p>
{$site.description}<br>
Houses Of <a href="/choose">{location.name}</a> {location.description}
</p>
{/if}
{#if photos.length}
<p><strong>Updated</strong> <time datetime={dateUpdatedFull} title={dateUpdatedFull}>{lastUpdated}</time></p>
{/if}
</div>
{#if photos.length}
<div class="columns is-multiline">
{#each photos as photo, index}
<div class="column is-one-third">
<Photo {photo} index={index + 1} />
</div>
{/each}
</div>
{:else}
<div class="message is-danger">
<div class="message-body">
<p>No photos for {locationFull}</p>
</div>
</div>
{/if}
</div> -->
<Footer />