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

Edit and WIP on Location page

Browse Source 
Create house component
This commit is contained in:
Shelby Kay
2021-10-07 22:10:08 +02:00
parent d397fdb00f
commit eb6762b240
6 changed files with 377 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

133
src/routes/[country]/[location]/index.svelte
View File

@@ -1,44 +1,116 @@
<script lang="ts">
import { page } from '$app/stores'
import dayjs from 'dayjs'
import advancedFormat from 'dayjs/plugin/advancedFormat'
import { getAssetUrl } from '$utils/helpers'
// Components
import Button from '$components/atoms/Button.svelte'
import IconEarth from '$components/atoms/IconEarth.svelte'
import Image from '$components/atoms/Image.svelte'
export let data: any
export let photos: any
dayjs.extend(advancedFormat)
const { params } = $page
let descriptionEl: HTMLElement
</script>
<main class="location">
<h1 class="location__title">
<span class="housesof">
<strong>Houses</strong>
<span>of</span>
</span>
<strong class="city">
<!-- {data.name} -->
Melbourne
</strong>
</h1>
<main class="location-page">
<section class="location-page__intro grid"
style="
--illus-desktop: url({getAssetUrl(data.illustration_desktop.id, 1600, 1466, 90)});
--illus-desktop-2x: url({getAssetUrl(data.illustration_desktop_2x.id, 3200, 2932, 90)});
--illus-mobile: url({getAssetUrl(data.illustration_mobile.id, 1125, 2317, 90)});
"
>
<h1 class="title">
<span class="housesof">
<strong>Houses</strong>
<span>of</span>
</span>
<strong class="city">
{data.name}
</strong>
</h1>
<div class="location__description" bind:this={descriptionEl}>
{@html data.description}
</div>
<div class="location-page__description grid" bind:this={descriptionEl}>
<div class="wrap">
<div class="text-medium">
Houses of {data.name} {data.description}
</div>
<div class="info">
<p class="text-label">
Photos by
{#each data.credits as { credit_id: { name, website }}}
{#if website}
<a href={website} target="_blank" rel="noopener external">
{name}
</a>
{:else}
<span>{name}</span>
{/if}
{/each}
</p>
&middot;
<p class="text-label">Updated [10] days ago</p>
</div>
{#each photos as { image: { id, title }, slug }}
<div class="photo">
<a href="/{params.country}/{params.location}/{slug}">
<Image
id={id}
alt="{title}"
width={1000}
height={600}
format="webp"
/>
</a>
<div class="ctas">
<Button url="/locations" text="Change location" class="shadow-small">
<IconEarth />
</Button>
<Button url="/shop" text="Buy the poster" class="button--pink shadow-small">
<!-- <IconEarth /> -->
</Button>
</div>
</div>
</div>
{/each}
<div class="location-page__illustration" />
</section>
<section class="location-page__houses grid">
{#each photos as { title, image: { id, title: alt }, slug, date_taken }}
<div class="house grid">
<div class="house__info">
<a href="/{params.country}/{params.location}/{slug}">
<h2 class="title-image">
{title}
</h2>
<time class="text-date" datetime={dayjs(date_taken).format('YYYY-MM-DD')}>
{dayjs(date_taken).format('MMMM, Do YYYY')}
</time>
</a>
</div>
<a class="house__photo" href="/{params.country}/{params.location}/{slug}">
<Image
id={id}
alt="{alt}"
width={1280}
height={853}
class="shadow-photo"
/>
<span class="house__index title-index">22</span>
</a>
</div>
{/each}
</section>
<section class="location-page__next">
<div class="pagination" role="button">
<div class="pagination__progress">
<span class="pagination__page">page</span>
<span class="current">1</span>
<span>/</span>
<span class="total">1</span>
</div>
<p class="pagination__more">
See more photos
</p>
</div>
</section>
</main>
@@ -55,6 +127,15 @@
slug
description
date_updated
illustration_desktop { id }
illustration_desktop_2x { id }
illustration_mobile { id }
credits {
credit_id {
name
website
}
}
}
photo (filter: { location: { slug: { _eq: "${location}" } }}) {