From f7af2aa8f39c4895bf585a53d40c699d3eb412fd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Wed, 10 Nov 2021 23:55:44 +0100
Subject: [PATCH] Add city to House info if existing

---
 .../[country]/[location]/[photo].svelte       |  4 ++--
 src/routes/[country]/[location]/index.svelte  | 24 +++++++++++--------
 src/style/_typography.scss                    |  4 ++--
 src/style/organisms/_house.scss               | 22 ++++++++++++++---
 4 files changed, 37 insertions(+), 17 deletions(-)

diff --git a/src/routes/[country]/[location]/[photo].svelte b/src/routes/[country]/[location]/[photo].svelte
index 8e914ce..ed4c743 100644
--- a/src/routes/[country]/[location]/[photo].svelte
+++ b/src/routes/[country]/[location]/[photo].svelte
@@ -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>
diff --git a/src/routes/[country]/[location]/index.svelte b/src/routes/[country]/[location]/index.svelte
index fd0dd75..98e1177 100644
--- a/src/routes/[country]/[location]/index.svelte
+++ b/src/routes/[country]/[location]/index.svelte
@@ -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')}>
+                        <h2 class="title-image">
+                            {title}
+                        </h2>
+                        <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
diff --git a/src/style/_typography.scss b/src/style/_typography.scss
index 1fc9e2a..be12533 100644
--- a/src/style/_typography.scss
+++ b/src/style/_typography.scss
@@ -108,8 +108,8 @@
     line-height: 1.5;
 }
 
-// Photo date
-.text-date {
+// Information
+.text-info {
     font-size: rem(14px);
     line-height: 1.3;
 
diff --git a/src/style/organisms/_house.scss b/src/style/organisms/_house.scss
index d1259b5..8464cdc 100644
--- a/src/style/organisms/_house.scss
+++ b/src/style/organisms/_house.scss
@@ -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;
+            }
         }
     }