From 51dc9650ec95660b2a45b50180edb4dbb5e129cc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Sun, 10 Oct 2021 21:40:25 +0200
Subject: [PATCH] Add dynamic photo's index on Location page

---
 src/routes/[country]/[location]/index.svelte |  6 ++--
 src/style/organisms/_house.scss              | 34 +++++++++++++++++---
 src/style/pages/_location.scss               | 18 +----------
 3 files changed, 34 insertions(+), 24 deletions(-)

diff --git a/src/routes/[country]/[location]/index.svelte b/src/routes/[country]/[location]/index.svelte
index 0a1ed63..735462a 100644
--- a/src/routes/[country]/[location]/index.svelte
+++ b/src/routes/[country]/[location]/index.svelte
@@ -143,7 +143,7 @@
     </section>
 
     <section class="location-page__houses grid">
-        {#each photos as { title, image: { id, title: alt }, slug, date_taken }}
+        {#each photos as { title, image: { id, title: alt }, slug, date_taken }, index}
             <div class="house grid">
                 <div class="house__info">
                     <a href="/{params.country}/{params.location}/{slug}">
@@ -163,7 +163,9 @@
                         height={853}
                         class="shadow-photo"
                     />
-                    <span class="house__index title-index">22</span>
+                    <span class="house__index title-index">
+                        {(totalPhotos - index < 10) ? '0' : ''}{totalPhotos - index}
+                    </span>
                 </a>
             </div>
         {/each}
diff --git a/src/style/organisms/_house.scss b/src/style/organisms/_house.scss
index b196495..65147a5 100644
--- a/src/style/organisms/_house.scss
+++ b/src/style/organisms/_house.scss
@@ -42,10 +42,34 @@
 
     // Photo number
     &__index {
-        position: absolute;
-        right: -250px;
-        top: 50%;
-        transform: translateY(-50%);
-        z-index: 1;
+        @include bp (sm) {
+            position: absolute;
+            z-index: 1;
+            left: 112.5%;
+            width: 400px;
+            top: 50%;
+            text-align: left;
+            transform: translate3d(-50%, -50%, 0);
+        }
+    }
+
+    // Even photos
+    &:nth-child(even) {
+        .house {
+            &__photo {
+                grid-column-start: 4;
+            }
+            &__info {
+                margin-left: auto;
+                text-align: right;
+            }
+            &__index {
+                @include bp (sm) {
+                    right: auto;
+                    left: -12%;
+                    text-align: right;
+                }
+            }
+        }
     }
 }
\ No newline at end of file
diff --git a/src/style/pages/_location.scss b/src/style/pages/_location.scss
index ed75ca3..86d8dec 100644
--- a/src/style/pages/_location.scss
+++ b/src/style/pages/_location.scss
@@ -126,22 +126,6 @@
         &:not(:last-child) {
             margin-bottom: 120px;
         }
-
-        &:nth-child(even) {
-            .house {
-                &__photo {
-                    grid-column-start: 4;
-                }
-                &__info {
-                    margin-left: auto;
-                    text-align: right;
-                }
-                &__index {
-                    right: auto;
-                    left: -250px;
-                }
-            }
-        }
     }
 
     // Next photos section
@@ -190,7 +174,7 @@
                     margin: 0 -10px;
                 }
             }
-            & > p {
+            p {
                 display: block;
                 margin: 16px auto 0;
                 text-align: center;