From 615f7df4a18c1e96ee983edbe6d6ec0e9a798f2e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Mon, 13 Jun 2022 18:28:24 +0200
Subject: [PATCH] Force 3/2 format for non landscape photos on Location page

Center image on a background when square, portrait or other ratio
- Fix MutuationObserver for using components (would think a component is an item)
---
 src/components/molecules/House.svelte        |  5 ++-
 src/routes/[country]/[location]/[photo].ts   |  1 +
 src/routes/[country]/[location]/index.svelte | 18 +++++------
 src/routes/[country]/[location]/index.ts     | 23 ++++++++------
 src/style/molecules/_house.scss              | 33 +++++++++++++++++++-
 5 files changed, 58 insertions(+), 22 deletions(-)

diff --git a/src/components/molecules/House.svelte b/src/components/molecules/House.svelte
index 3ced15b..cc5c756 100644
--- a/src/components/molecules/House.svelte
+++ b/src/components/molecules/House.svelte
@@ -9,6 +9,7 @@
     export let photoAlt: string
     export let title: string
     export let index: string
+    export let orientation: string = undefined
     export let date: string = undefined
     export let city: string = undefined
 </script>
@@ -28,7 +29,9 @@
         </p>
     </div>
 
-    <figure class="house__photo">
+    <figure class="house__photo"
+        class:not-landscape={orientation && orientation !== 'landscape'}
+    >
         <a href={url} sveltekit:noscroll tabindex="0">
             <Image
                 id={photoId}
diff --git a/src/routes/[country]/[location]/[photo].ts b/src/routes/[country]/[location]/[photo].ts
index dd86698..ae27acf 100644
--- a/src/routes/[country]/[location]/[photo].ts
+++ b/src/routes/[country]/[location]/[photo].ts
@@ -54,6 +54,7 @@ export async function get({ params }: RequestEvent): Promise<RequestHandlerOutpu
                         id
                         title
                     }
+                    orientation
                     city
                 }
 
diff --git a/src/routes/[country]/[location]/index.svelte b/src/routes/[country]/[location]/index.svelte
index cce1d50..28123dc 100644
--- a/src/routes/[country]/[location]/index.svelte
+++ b/src/routes/[country]/[location]/index.svelte
@@ -8,6 +8,7 @@
     import { getAssetUrlKey } from '$utils/helpers'
     import { fetchAPI } from '$utils/api'
     import { DURATION } from '$utils/contants'
+    import { photoFields } from '.'
     // Components
     import Metas from '$components/Metas.svelte'
     import PageTransition from '$components/PageTransition.svelte'
@@ -75,15 +76,7 @@
                     limit: ${import.meta.env.VITE_LIST_INCREMENT},
                     page: ${page},
                 ) {
-                    title
-                    slug
-                    city
-                    image {
-                        id
-                        title
-                    }
-                    date_taken
-                    date_created
+                    ${photoFields}
                 }
             }
         `)
@@ -126,7 +119,9 @@
             for (const mutation of mutationsList) {
                 if (mutation.type === 'childList') {
                     // Observe new items
-                    mutation.addedNodes.forEach((item: HTMLElement) => observerPhotos.observe(item))
+                    Array.from(mutation.addedNodes)
+                        .filter(item => item.nodeType === Node.ELEMENT_NODE)
+                        .forEach((item: HTMLElement) => observerPhotos.observe(item))
                 }
             }
         })
@@ -269,11 +264,12 @@
 
     {#if photos.length}
         <section class="location-page__houses grid" bind:this={photosListEl}>
-            {#each photos as { title, image: { id, title: alt }, slug, city, date_taken }, index}
+            {#each photos as { title, image: { id, title: alt }, orientation, slug, city, date_taken }, index}
                 <House
                     {title}
                     photoId={id}
                     photoAlt={alt}
+                    {orientation}
                     url="/{params.country}/{params.location}/{slug}"
                     {city}
                     date={date_taken}
diff --git a/src/routes/[country]/[location]/index.ts b/src/routes/[country]/[location]/index.ts
index 364fb7b..feeef5d 100644
--- a/src/routes/[country]/[location]/index.ts
+++ b/src/routes/[country]/[location]/index.ts
@@ -1,6 +1,19 @@
 import type { RequestEvent, RequestHandlerOutput } from '@sveltejs/kit'
 import { fetchAPI } from '$utils/api'
 
+export const photoFields = `
+    title
+    slug
+    city
+    image {
+        id
+        title
+    }
+    orientation
+    date_taken
+    date_created
+`
+
 export async function get({ params }: RequestEvent): Promise<RequestHandlerOutput> {
     try {
         const { location } = params
@@ -40,15 +53,7 @@ export async function get({ params }: RequestEvent): Promise<RequestHandlerOutpu
                     limit: ${import.meta.env.VITE_LIST_AMOUNT},
                     page: 1,
                 ) {
-                    title
-                    slug
-                    city
-                    image {
-                        id
-                        title
-                    }
-                    date_taken
-                    date_created
+                    ${photoFields}
                 }
 
                 # Total
diff --git a/src/style/molecules/_house.scss b/src/style/molecules/_house.scss
index f3e72e2..0a009ab 100644
--- a/src/style/molecules/_house.scss
+++ b/src/style/molecules/_house.scss
@@ -81,7 +81,6 @@
             position: relative;
             z-index: 3;
             border-radius: 0;
-            background: $color-primary;
 
             @include bp (sm) {
                 border-radius: 8px;
@@ -97,6 +96,38 @@
             will-change: transform;
         }
 
+        // Variant: Not landscape
+        &.not-landscape {
+            aspect-ratio: 3 / 2;
+
+            @supports not (aspect-ratio: auto) {
+                position: relative;
+                overflow: hidden;
+                padding-top: 66.66%;
+                height: 0;
+            }
+
+            picture {
+                height: 100%;
+                background: $color-cream;
+            }
+            img {
+                height: 100%;
+                width: 100%;
+                object-fit: contain;
+
+                @supports not (aspect-ratio: auto) {
+                    position: absolute;
+                    top: 50%;
+                    left: 50%;
+                    width: auto;
+                    max-width: 100%;
+                    height: auto;
+                    transform: translate(-50%, -50%);
+                }
+            }
+        }
+
         // Scale down image on hover
         @media (hover: hover) {
             a:hover {