From 53b76dc41addda76db33b4b0dcf48513d2ad41f9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Sat, 28 Dec 2019 13:21:36 +0100
Subject: [PATCH] Photo in list component

---
 src/components/Photo.svelte | 48 ++++++++++++++++++++-----------------
 1 file changed, 26 insertions(+), 22 deletions(-)

diff --git a/src/components/Photo.svelte b/src/components/Photo.svelte
index a0b0566..647e80c 100644
--- a/src/components/Photo.svelte
+++ b/src/components/Photo.svelte
@@ -1,36 +1,40 @@
 <script>
-    import { slide } from 'svelte/transition'
+    // Svelte
+    import { fade, slide } from 'svelte/transition'
+    import { site, currentLocation } from '../store'
+
+    // Dependencies
     import dayjs from 'dayjs'
     import advancedFormat from 'dayjs/plugin/advancedFormat'
-    import * as fn from '../functions'
+    dayjs.extend(advancedFormat)
 
-    export let photo
     export let index
-    export let location
+    export let photo
+    const location = $currentLocation.location
 
     // Manipulate data
     const thumbnail = photo.image.data.thumbnails.find(t => t.url.includes('key=large'))
     index = (index < 10 ? '0' : null) + index
-
-    // Format the date
-    dayjs.extend(advancedFormat)
-    const date = dayjs(photo.created_on).format('MMM Do, YYYY')
 </script>
 
-<div class="card" in:slide out:slide>
-    <div class="card-image">
-        <figure class="image is-4by3">
-            <img src="{thumbnail.url}" alt="{photo.name}, {location.name}, {location.country.name}" width="{thumbnail.width}" height="{thumbnail.height}">
-        </figure>
-    </div>
+<div class="card" in:fade out:fade>
+    <a href="/viewer/{location.country.slug}/{location.slug}/{photo.slug}">
+        <div class="card-image">
+            <figure class="image is-4by3">
+                <img src="{thumbnail.url}" alt="{photo.name}, {location.name}, {location.country.name}" width="{thumbnail.width}" height="{thumbnail.height}">
+            </figure>
+        </div>
 
-    <div class="card-content">
-        <h4 class="title is-4">{photo.name}</h4>
-        <p>{location.name}, {location.country.name}</p>
-    </div>
+        <div class="card-content">
+            <p class="is-size-5"><strong></strong>
+                <strong>{photo.name}</strong>
+            </p>
+            <p>{location.name}, {location.country.name}</p>
+        </div>
 
-    <footer class="card-footer">
-        <span class="card-footer-item">{date}</span>
-        <span class="card-footer-item">#{index}</span>
-    </footer>
+        <footer class="card-footer has-text-grey-light">
+            <span class="card-footer-item">{dayjs(photo.date).format('MMM Do, YYYY')}</span>
+            <span class="card-footer-item">#{index}</span>
+        </footer>
+    </a>
 </div>