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

Add city to House info if existing

Browse Source
This commit is contained in:
Félix Péault
2021-11-10 23:55:44 +01:00
parent e94c9f6d9a
commit f7af2aa8f3
4 changed files with 37 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/routes/[country]/[location]/[photo].svelte
View File

@@ -119,8 +119,8 @@
<div class="viewer-photo__info">
<h1 class="title-medium">{currentPhoto.title}</h1>
<div class="detail text-date">
<Icon class="icon" icon="map-pin" label="Map pin" /><span>{location.name}, {location.country.name}</span> <span class="sep">&middot;</span> <time datetime={dayjs(currentPhoto.date_taken).format('YYYY-MM-DD')}>{dayjs(currentPhoto.date_taken).format('MMMM, Do YYYY')}</time>
<div class="detail text-info">
<Icon class="icon" icon="map-pin" label="Map pin" /> <span>{location.name}, {location.country.name}</span> <span class="sep">&middot;</span> <time datetime={dayjs(currentPhoto.date_taken).format('YYYY-MM-DD')}>{dayjs(currentPhoto.date_taken).format('MMMM, Do YYYY')}</time>
</div>
</div>
</div>

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

@@ -1,11 +1,12 @@
<script lang="ts">
import { page } from '$app/stores'
import { getAssetUrlKey } from '$utils/helpers'
import dayjs from 'dayjs'
import advancedFormat from 'dayjs/plugin/advancedFormat.js'
import relativeTime from 'dayjs/plugin/relativeTime.js'
import { getAssetUrlKey } from '$utils/helpers'
// Components
import Metas from '$components/Metas.svelte'
import Icon from '$components/atoms/Icon.svelte'
import Button from '$components/atoms/Button.svelte'
import IconEarth from '$components/atoms/IconEarth.svelte'
import Image from '$components/atoms/Image.svelte'
@@ -20,10 +21,10 @@
dayjs.extend(relativeTime)
const { params } = $page
let descriptionEl: HTMLElement
let currentPage: number = 1
let ended: boolean
let currentPhotosAmount: number
$: latestPhoto = photos[0]
$: currentPhotosAmount = photos.length
$: ended = currentPhotosAmount === totalPhotos
@@ -66,6 +67,7 @@
) {
title
slug
city
image {
id
title
@@ -111,7 +113,7 @@
</strong>
</h1>
<div class="location-page__description grid" bind:this={descriptionEl}>
<div class="location-page__description grid">
<div class="wrap">
<div class="text-medium">
Houses of {location.name} {location.description}
@@ -155,17 +157,18 @@
{#if photos.length}
<section class="location-page__houses grid">
{#each photos as { title, image: { id, title: alt }, slug, date_taken }, index}
{#each photos as { title, image: { id, title: alt }, slug, city, date_taken }, index}
<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')}>
<p class="info text-info">
{#if city}<Icon class="icon" icon="map-pin" label="Map pin" /> {city} <span class="sep">·</span>{/if}
<time datetime={dayjs(date_taken).format('YYYY-MM-DD')}>
{dayjs(date_taken).format('MMMM, Do YYYY')}
</time>
</a>
</p>
</div>
<figure class="house__photo">
<a href="/{params.country}/{params.location}/{slug}">
@@ -263,6 +266,7 @@
) {
title
slug
city
image {
id
title

4
src/style/_typography.scss
View File

@@ -108,8 +108,8 @@
line-height: 1.5;
}
// Photo date
.text-date {
// Information
.text-info {
font-size: rem(14px);
line-height: 1.3;

22
src/style/organisms/_house.scss
View File

@@ -13,11 +13,13 @@
// Information
&__info {
grid-column: 2 / span var(--columns);
grid-column: 1 / span var(--columns);
margin-bottom: 32px;
padding: 0 20px;
max-width: min(540px, 85vw);
@include bp (mob-lg) {
max-width: min(540px, 85vw);
}
@include bp (sm) {
grid-column: 4 / span 14;
margin-bottom: 56px;
@@ -25,14 +27,28 @@
max-width: 800px;
}
time {
.info {
display: block;
margin-top: 16px;
color: $color-lightgray;
line-height: 1.5;
@include bp (sm) {
margin-top: 24px;
}
& > * {
display: inline-block;
}
svg {
width: 1em;
height: 1em;
margin-right: 0.4em;
margin-bottom: 3px;
}
.sep {
margin: 0 4px;
}
}
}