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

Add photo's city on Photo viewer

Browse Source
This commit is contained in:
Félix Péault
2021-11-14 19:52:30 +01:00
parent cf6afd832e
commit b835d0f5f6
2 changed files with 30 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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
}
}
}
`)

16
src/style/pages/_viewer-photo.scss
View File

@@ -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 {