From ab9b0e1a598ab2331aca92d1961b8eff574d2679 Mon Sep 17 00:00:00 2001
From: Shelby Kay <bonjour@shelbykay.dev>
Date: Tue, 19 Oct 2021 12:22:04 +0200
Subject: [PATCH] Add style to Photo Viewer page

---
 src/components/atoms/ButtonCircle.svelte      |   7 +
 src/components/atoms/IconArrow.svelte         |   4 +-
 .../[country]/[location]/[photo].svelte       |  63 +++++---
 src/style/atoms/_arrow.scss                   |  10 ++
 src/style/atoms/_button-circle.scss           |  15 ++
 src/style/pages/_viewer-photo.scss            | 141 ++++++++++++++++++
 src/style/style.scss                          |   3 +-
 static/images/icons/map-pin.svg               |   3 +
 8 files changed, 221 insertions(+), 25 deletions(-)
 create mode 100644 src/components/atoms/ButtonCircle.svelte
 create mode 100644 src/style/atoms/_button-circle.scss
 create mode 100644 src/style/pages/_viewer-photo.scss
 create mode 100644 static/images/icons/map-pin.svg

diff --git a/src/components/atoms/ButtonCircle.svelte b/src/components/atoms/ButtonCircle.svelte
new file mode 100644
index 0000000..63e06ae
--- /dev/null
+++ b/src/components/atoms/ButtonCircle.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+
+</script>
+
+<button class="button-circle" on:click>
+    <slot />
+</button>
\ No newline at end of file
diff --git a/src/components/atoms/IconArrow.svelte b/src/components/atoms/IconArrow.svelte
index 8664b3a..994eb00 100644
--- a/src/components/atoms/IconArrow.svelte
+++ b/src/components/atoms/IconArrow.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-
     export let color: string = undefined
+    export let flip: boolean = false
 </script>
 
-<svg class="arrow arrow--{color}" width="12" height="14" viewBox="0 0 12 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg class="arrow arrow--{color}" class:arrow--flip={flip} width="12" height="14" viewBox="0 0 12 14" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path fill-rule="evenodd" clip-rule="evenodd" d="M4.67961 11.8224C4.34487 12.1571 4.34487 12.6999 4.67961 13.0346C5.01434 13.3693 5.55705 13.3693 5.89179 13.0346L11.3204 7.60602C11.6551 7.27129 11.6551 6.72857 11.3204 6.39384L5.89179 0.965267C5.55705 0.630532 5.01434 0.630532 4.67961 0.965267C4.34487 1.3 4.34487 1.84271 4.67961 2.17745L8.64494 6.14279L1.2857 6.14279C0.812311 6.14279 0.428555 6.52654 0.428555 6.99993C0.428555 7.47332 0.812311 7.85707 1.2857 7.85707L8.64494 7.85707L4.67961 11.8224Z" fill="#000"/>
 </svg>
diff --git a/src/routes/[country]/[location]/[photo].svelte b/src/routes/[country]/[location]/[photo].svelte
index 461d0e5..c0d8683 100644
--- a/src/routes/[country]/[location]/[photo].svelte
+++ b/src/routes/[country]/[location]/[photo].svelte
@@ -4,6 +4,8 @@
     import advancedFormat from 'dayjs/plugin/advancedFormat.js'
     // Components
     import Image from '$components/atoms/Image.svelte'
+import IconArrow from '$components/atoms/IconArrow.svelte'
+import ButtonCircle from '$components/atoms/ButtonCircle.svelte'
 
     export let photos: any[]
     export let location: any
@@ -40,32 +42,49 @@
 </script>
 
 
-<h1>Title</h1>
-<p>{currentPhoto.title}</p>
+<main class="viewer-photo grid">
+    <div class="viewer-photo__carousel">
+        <div class="viewer-photo__images">
+            <Image
+                class="photo"
+                id={currentPhoto.image.id}
+                alt={currentPhoto.title}
+                sizeKey="photo-list"
+                sizes={{
+                    small: { width: 500 },
+                    medium: { width: 850 },
+                    large: { width: 1280 },
+                }}
+                ratio={1.5}
+            />
 
-<h2>Location</h2>
-<p>{location.name}, {location.country.name}</p>
-<span style="vertical-align: middle;">&middot;</span>
-<time class="text-date" datetime={dayjs(currentPhoto.date_taken).format('YYYY-MM-DD')}>
-    {dayjs(currentPhoto.date_taken).format('MMMM, Do YYYY')}
-</time>
+            <div class="viewer-photo__controls">
+                <ButtonCircle on:click={goToPrevious}>
+                    <IconArrow
+                        color="pink"
+                        flip={true}
+                    />
+                </ButtonCircle>
+                <ButtonCircle on:click={goToPrevious}>
+                    <IconArrow
+                        color="pink"
+                    />
+                </ButtonCircle>
+            </div>
 
-<button on:click={goToPrevious}>Previous</button>
-<button on:click={goToNext}>Next</button>
+            <p class="viewer-photo__index title-index">{currentIndex + 1}</p>
+        </div>
 
-<Image
-    id={currentPhoto.image.id}
-    alt={currentPhoto.title}
-    sizeKey="photo-list"
-    sizes={{
-        small: { width: 500 },
-        medium: { width: 850 },
-        large: { width: 1280 },
-    }}
-    ratio={1.5}
-/>
 
-<p>index: {currentIndex + 1}</p>
+        <div class="viewer-photo__info">
+            <h1 class="title-medium">{currentPhoto.title}</h1>
+
+            <div class="detail text-date">
+                <img src="/images/icons/map-pin.svg" alt=""><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>
+</main>
 
 
 <script context="module" lang="ts">
diff --git a/src/style/atoms/_arrow.scss b/src/style/atoms/_arrow.scss
index 54b1d16..1cc0fad 100644
--- a/src/style/atoms/_arrow.scss
+++ b/src/style/atoms/_arrow.scss
@@ -6,4 +6,14 @@
             fill: #fff;
         }
     }
+
+    &--pink {
+        path {
+            fill: $color-secondary;
+        }
+    }
+
+    &--flip {
+        transform: rotate(180deg);
+    }
 }
\ No newline at end of file
diff --git a/src/style/atoms/_button-circle.scss b/src/style/atoms/_button-circle.scss
new file mode 100644
index 0000000..dd398b0
--- /dev/null
+++ b/src/style/atoms/_button-circle.scss
@@ -0,0 +1,15 @@
+.button-circle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 56px;
+    height: 56px;
+    background-color: #fff;
+    border-radius: 100vh;
+
+    & > * {
+        width: 22px;
+        height: 22px;
+        object-fit: contain;
+    }
+}
\ No newline at end of file
diff --git a/src/style/pages/_viewer-photo.scss b/src/style/pages/_viewer-photo.scss
new file mode 100644
index 0000000..7f16b54
--- /dev/null
+++ b/src/style/pages/_viewer-photo.scss
@@ -0,0 +1,141 @@
+.viewer-photo {
+    height: 100vh;
+
+    @include bp (md, max) {
+        display: block;
+    }
+
+    // Carousel
+    &__carousel {
+        display: grid;
+        grid-row-gap: 20px;
+        margin: auto 8px;
+        height: 100%;
+
+        @include bp (md) {
+            margin: auto 0;
+            grid-column: 3 / span 16;
+        }
+    }
+
+    // Images
+    &__images {
+        position: relative;
+        margin: auto 0 0;
+
+        .photo {
+            position: relative;
+            z-index: 3;
+            border-radius: 6px;
+            overflow: hidden;
+            box-shadow:
+                0 12px 12px rgba(#000, 0.15),
+                0 20px 20px rgba(#000, 0.15),
+                0 48px 48px rgba(#000, 0.15);
+        }
+    }
+
+    // Infos
+    &__info {
+        margin-top: auto;
+        margin-bottom: 40px;
+        padding: 0 20px;
+        text-align: center;
+
+        @include bp (md) {
+            margin-top: 26px;
+            padding: 0;
+            text-align: left;
+        }
+        @include bp (lg) {
+            display: grid;
+            grid-template-columns: 55% 45%;
+            align-items: baseline;
+        }
+
+        h1 {
+            color: $color-secondary;
+            font-size: rem(32px);
+            line-height: 1.1;
+        }
+
+        // Details
+        .detail {
+            display: inline-block;
+            align-items: center;
+            margin-top: 24px;
+            color: $color-tertiary;
+            line-height: 1.5;
+
+            @include bp (lg) {
+                margin-top: 0;
+                margin-left: auto;
+                text-align: right;
+                padding-left: 16px;
+            }
+
+            // Icon
+            img {
+                display: inline-block;
+                margin-top: -5px;
+                margin-right: 12px;
+            }
+            // Separator
+            .sep {
+                display: inline-block;
+                margin: 0 4px;
+                line-height: 1;
+            }
+        }
+    }
+
+    // Index
+    &__index {
+        position: absolute;
+        z-index: 1;
+        left: 50%;
+        bottom: calc(92% + 1vw);
+        line-height: 1;
+        transform: translate3d(-50%, 0, 0);
+        color: rgba($color-tertiary, 0.4);
+
+        @include bp (md, max) {
+            font-size: clamp(#{rem(80px)}, 24vw, #{rem(120px)});
+        }
+        @include bp (md) {
+            top: 50%;
+            left: 95%;
+            width: 350px;
+            text-align: center;
+            bottom: auto;
+            transform: translate3d(0, -50%, 0);
+        }
+    }
+
+    // Controls
+    &__controls {
+        display: none;
+
+        @include bp (md) {
+            position: absolute;
+            z-index: 20;
+            display: flex;
+            left: -28px;
+            right: -28px;
+            top: 50%;
+            transform: translateY(-50%);
+            justify-content: space-between;
+        }
+    }
+
+    // Image
+    .photo {
+        grid-column: 3 / span 16;
+
+        img {
+            width: 100%;
+            height: auto;
+            display: block;
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/style/style.scss b/src/style/style.scss
index 0a33699..81ee3f7 100644
--- a/src/style/style.scss
+++ b/src/style/style.scss
@@ -35,6 +35,7 @@
 // Atomic Design System
 // Atoms
 @import "atoms/button";
+@import "atoms/button-circle";
 @import "atoms/badge";
 @import "atoms/arrow";
 @import "atoms/discover";
@@ -59,7 +60,7 @@
 
 
 // Pages
-// @import "pages/page";
+@import "pages/viewer-photo";
 
 // Misc
 @import "animations";
\ No newline at end of file
diff --git a/static/images/icons/map-pin.svg b/static/images/icons/map-pin.svg
new file mode 100644
index 0000000..c44c35e
--- /dev/null
+++ b/static/images/icons/map-pin.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="19" viewBox="0 0 16 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.51787 13.244C8.29206 13.6955 7.64287 13.6955 7.41707 13.244C7.41707 13.244 5.27191 9.01059 4.25578 7.03501C3.23965 5.05943 4.02998 2.49118 6.09046 1.44695C8.15094 0.402716 10.663 1.22117 11.6792 3.28141C12.3001 4.52321 12.2719 5.84967 11.6792 7.03501C11.0864 8.22036 8.51787 13.244 8.51787 13.244ZM9.95738 5.22877C9.95738 4.12809 9.08239 3.25319 7.98158 3.25319C6.88078 3.25319 6.00578 4.15631 6.00578 5.22877C6.00578 6.32945 6.88078 7.20435 7.98158 7.20435C9.08239 7.20435 9.95738 6.32945 9.95738 5.22877ZM6.50898 15.1335C6.51939 15.1526 6.53135 15.171 6.54476 15.1888L6.44888 16.5251L10.0169 17.6779V13.4566C10.3586 12.8149 10.7654 12.0515 11.1765 11.2816V17.6779L14.7445 16.5251L14.2539 9.68778L11.4829 10.7079C11.7389 10.2289 11.9905 9.75854 12.223 9.32507L14.5215 8.47535C14.8705 8.37166 15.1411 8.6724 15.178 9.03754L15.9127 16.3004C15.9636 16.8029 15.6579 17.2724 15.1805 17.425L10.5967 18.8903L5.84678 17.4195L0.740081 18.8903C0.561681 18.9301 0.360981 18.9102 0.204881 18.7909C0.0487812 18.6717 -0.0181187 18.5127 0.00418125 18.3338L1.14148 10.4232C1.18608 10.2244 1.31988 10.0654 1.52058 10.0058L3.65978 9.3043C3.81969 9.61333 3.9812 9.92989 4.14174 10.248L2.23418 10.8605L1.25298 17.6779L5.33388 16.5052L5.57503 13.1639C6.1283 14.315 6.50898 15.1335 6.50898 15.1335Z" fill="#FFE0C5"/>
+</svg>