From b835d0f5f66c7e56b669fe9e2313aff73a65d94a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Sun, 14 Nov 2021 19:52:30 +0100
Subject: [PATCH] Add photo's city on Photo viewer

---
 .../[country]/[location]/[photo].svelte       | 19 +++++++++++++++++--
 src/style/pages/_viewer-photo.scss            | 16 +++++++++++++---
 2 files changed, 30 insertions(+), 5 deletions(-)

diff --git a/src/routes/[country]/[location]/[photo].svelte b/src/routes/[country]/[location]/[photo].svelte
index 82fb903..935b1f3 100644
--- a/src/routes/[country]/[location]/[photo].svelte
+++ b/src/routes/[country]/[location]/[photo].svelte
@@ -105,6 +105,7 @@
                         id
                         title
                     }
+                    city
                 }
             }
         `)
@@ -198,7 +199,17 @@
                 <h1 class="title-medium">{currentPhoto.title}</h1>
 
                 <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>
+                    <a href="/{location.country.slug}/{location.slug}">
+                        <Icon class="icon" icon="map-pin" label="Map pin" />
+                        <span>
+                            {#if currentPhoto.city}
+                                {currentPhoto.city}, {location.name}, {location.country.name}
+                            {:else}
+                                {location.name}, {location.country.name}
+                            {/if}
+                        </span>
+                    </a>
+                    <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>
@@ -258,12 +269,16 @@
                         id
                         title
                     }
+                    city
                 }
 
                 location (filter: { slug: { _eq: "${page.params.location}" }}) {
                     name
                     slug
-                    country { name }
+                    country {
+                        name
+                        slug
+                    }
                 }
             }
         `)
diff --git a/src/style/pages/_viewer-photo.scss b/src/style/pages/_viewer-photo.scss
index 913dcd4..c464e66 100644
--- a/src/style/pages/_viewer-photo.scss
+++ b/src/style/pages/_viewer-photo.scss
@@ -186,7 +186,7 @@
         }
         @include bp (lg) {
             display: grid;
-            grid-template-columns: 60% 40%;
+            grid-template-columns: 50% 50%;
             align-items: baseline;
         }
 
@@ -215,7 +215,17 @@
                 margin-top: 0;
                 margin-left: auto;
                 text-align: right;
-                padding-left: 16px;
+                padding-left: 12px;
+            }
+
+            a {
+                color: $color-tertiary;
+                text-decoration: none;
+                transition: color 0.3s;
+
+                &:hover {
+                    color: $color-secondary-light;
+                }
             }
 
             // Icon
@@ -224,7 +234,7 @@
                 width: 17px;
                 height: 17px;
                 margin-top: -5px;
-                margin-right: 12px;
+                margin-right: 4px;
             }
             // Separator
             .sep {