Edit and WIP on Location page
Create house component
This commit is contained in:
@@ -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">
|
||||
<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} -->
|
||||
Melbourne
|
||||
{data.name}
|
||||
</strong>
|
||||
</h1>
|
||||
|
||||
<div class="location__description" bind:this={descriptionEl}>
|
||||
{@html data.description}
|
||||
<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>
|
||||
·
|
||||
<p class="text-label">Updated [10] days ago</p>
|
||||
</div>
|
||||
|
||||
{#each photos as { image: { id, title }, slug }}
|
||||
<div class="photo">
|
||||
<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>
|
||||
|
||||
<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="{title}"
|
||||
width={1000}
|
||||
height={600}
|
||||
format="webp"
|
||||
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}" } }}) {
|
||||
|
||||
@@ -10,6 +10,25 @@
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
// House Name
|
||||
.title-image {
|
||||
font-size: rem(88px);
|
||||
font-family: $font-serif;
|
||||
line-height: 1;
|
||||
color: $color-secondary;
|
||||
|
||||
}
|
||||
|
||||
// House Number
|
||||
.title-index {
|
||||
font-size: rem(280px);
|
||||
font-family: $font-serif;
|
||||
letter-spacing: -0.05em;
|
||||
font-weight: 200;
|
||||
line-height: 1;
|
||||
color: rgba($color-tertiary, 0.6);
|
||||
}
|
||||
|
||||
// Medium
|
||||
.title-medium {
|
||||
font-family: $font-serif;
|
||||
@@ -71,10 +90,17 @@
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
// Photo date
|
||||
.text-date {
|
||||
font-size: rem(16px);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
// Label
|
||||
.text-label {
|
||||
font-size: rem(12px);
|
||||
line-height: 1.4;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
font-weight: 500;
|
||||
}
|
||||
@@ -11,7 +11,7 @@
|
||||
text-decoration: none;
|
||||
|
||||
// Icon
|
||||
img {
|
||||
img, svg {
|
||||
display: block;
|
||||
margin-right: 12px;
|
||||
}
|
||||
@@ -27,5 +27,6 @@
|
||||
// Pink
|
||||
&--pink {
|
||||
background: $color-secondary-light;
|
||||
|
||||
}
|
||||
}
|
||||
51
src/style/organisms/_house.scss
Normal file
51
src/style/organisms/_house.scss
Normal file
@@ -0,0 +1,51 @@
|
||||
.house {
|
||||
--columns: 20;
|
||||
grid-column-start: 3;
|
||||
position: relative;
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
// Information
|
||||
&__info {
|
||||
grid-column: 4 / span 14;
|
||||
margin-bottom: 56px;
|
||||
max-width: 800px;
|
||||
|
||||
time {
|
||||
display: block;
|
||||
margin-top: 24px;
|
||||
color: $color-lightgray;
|
||||
}
|
||||
}
|
||||
|
||||
// Photo
|
||||
&__photo {
|
||||
position: relative;
|
||||
display: block;
|
||||
grid-column: 1 / span 17;
|
||||
|
||||
picture {
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
|
||||
// Photo number
|
||||
&__index {
|
||||
position: absolute;
|
||||
right: -250px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
@@ -1,9 +1,20 @@
|
||||
// Location Page
|
||||
.location {
|
||||
.location-page {
|
||||
background: #fff;
|
||||
|
||||
// Intro
|
||||
.location-page__intro {
|
||||
position: relative;
|
||||
// height: 85vh;
|
||||
background: $color-primary;
|
||||
|
||||
// Houses Of Title
|
||||
&__title {
|
||||
.title {
|
||||
grid-column: 1 / span var(--columns);
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
max-width: 1164px;
|
||||
margin: 0 auto;
|
||||
margin: clamp(80px, 10vw, 240px) auto clamp(60px, 6vw, 120px);
|
||||
padding: 0 32px;
|
||||
font-family: $font-serif;
|
||||
line-height: 1;
|
||||
@@ -35,4 +46,154 @@
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Illustration
|
||||
&__illustration {
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
width: clamp(320px, 100vw, 1920px);
|
||||
height: 100%;
|
||||
background: 0 0 var(--illus-mobile) no-repeat;
|
||||
background-size: 100% auto;
|
||||
transform: translate3d(-50%, 0, 0);
|
||||
|
||||
|
||||
@include bp (sm) {
|
||||
background-image: var(--illus-desktop);
|
||||
}
|
||||
@include bp (xl) {
|
||||
background-image: var(--illus-desktop-2x);
|
||||
}
|
||||
}
|
||||
|
||||
// Description
|
||||
&__description {
|
||||
--columns: 19;
|
||||
grid-column: 6 / span 19;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
margin-bottom: calc(-1 * clamp(60px, 6vw, 120px));
|
||||
background-color: $color-tertiary;
|
||||
color: $color-text;
|
||||
border-radius: 8px 0 0 8px;
|
||||
|
||||
.wrap {
|
||||
grid-column: 3 / span 13;
|
||||
max-width: 800px;
|
||||
padding: 128px 0;
|
||||
}
|
||||
|
||||
.info {
|
||||
$text-color: rgba($color-text, 0.5);
|
||||
margin: 40px 0 64px;
|
||||
color: $text-color;
|
||||
|
||||
a {
|
||||
color: $text-color;
|
||||
|
||||
&:hover {
|
||||
color: $color-secondary;
|
||||
}
|
||||
}
|
||||
|
||||
& > * {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
.ctas {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.button {
|
||||
margin-right: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Houses
|
||||
&__houses {
|
||||
background-color: #fff;
|
||||
padding-top: 240px;
|
||||
}
|
||||
|
||||
// House
|
||||
.house {
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 120px;
|
||||
}
|
||||
|
||||
&:nth-child(even) {
|
||||
.house {
|
||||
&__photo {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
&__info {
|
||||
margin-left: auto;
|
||||
text-align: right;
|
||||
}
|
||||
&__index {
|
||||
right: auto;
|
||||
left: -250px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__next {
|
||||
margin-top: -120px;
|
||||
padding: 240px 0 104px;
|
||||
background-color: $color-tertiary;
|
||||
text-align: center;
|
||||
|
||||
.pagination {
|
||||
position: relative;
|
||||
display: block;
|
||||
margin: auto 0;
|
||||
cursor: pointer;
|
||||
|
||||
&__progress {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
font-size: rem(160px);
|
||||
color: rgba($color-text, 0.15);
|
||||
font-family: $font-serif;
|
||||
font-weight: 200;
|
||||
line-height: 1;
|
||||
letter-spacing: -0.05em;
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
margin: 0 -10px;
|
||||
}
|
||||
}
|
||||
&__page {
|
||||
position: absolute;
|
||||
color: $color-secondary-bright;
|
||||
font-size: rem(40px);
|
||||
font-family: $font-serif;
|
||||
top: 50%;
|
||||
left: 8%;
|
||||
display: block;
|
||||
width: 100%;
|
||||
transform: translateY(-50%);
|
||||
text-align: center;
|
||||
letter-spacing: normal;
|
||||
font-weight: 400;
|
||||
}
|
||||
&__more {
|
||||
display: block;
|
||||
margin-top: 16px;
|
||||
color: $color-gray;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
font-weight: 300;
|
||||
font-size: rem(14px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -47,6 +47,7 @@
|
||||
|
||||
// Organisms
|
||||
@import "organisms/locations";
|
||||
@import "organisms/house";
|
||||
@import "organisms/newsletter";
|
||||
@import "organisms/shop";
|
||||
@import "organisms/footer";
|
||||
|
||||
Reference in New Issue
Block a user