From 873c2d94ac4bf6bdc2ec3c856ecff337f82f93ae Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Wed, 17 Nov 2021 19:52:11 +0100
Subject: [PATCH] Adapt style of Photos viewer

- Change opacities
- Change photo background
- Disable image selection (prepping for a swipe)
- Fix mobile x and y offsets
---
 .../[country]/[location]/[photo].svelte       |  4 +--
 src/style/pages/_viewer-photo.scss            | 31 +++++++++++--------
 2 files changed, 20 insertions(+), 15 deletions(-)

diff --git a/src/routes/[country]/[location]/[photo].svelte b/src/routes/[country]/[location]/[photo].svelte
index 466539a..f7dd822 100644
--- a/src/routes/[country]/[location]/[photo].svelte
+++ b/src/routes/[country]/[location]/[photo].svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
     import { browser } from '$app/env'
     import { page } from '$app/stores'
-    import { getAssetUrlKey } from '$utils/helpers'
-    import { throttle } from '$utils/functions'
     import dayjs from 'dayjs'
     import advancedFormat from 'dayjs/plugin/advancedFormat.js'
+    import { getAssetUrlKey } from '$utils/helpers'
+    import { throttle } from '$utils/functions'
     // Components
     import Metas from '$components/Metas.svelte'
     import Image from '$components/atoms/Image.svelte'
diff --git a/src/style/pages/_viewer-photo.scss b/src/style/pages/_viewer-photo.scss
index c464e66..b442d26 100644
--- a/src/style/pages/_viewer-photo.scss
+++ b/src/style/pages/_viewer-photo.scss
@@ -40,10 +40,10 @@
 
         .photo {
             --opacity: 1;
-            --scale: 1.0;
+            --scale: 0.6;
             --rotate: 0deg;
             --offset-x: -50%;
-            --offset-y: -50%;
+            --offset-y: -30%;
             position: absolute;
             top: 50%;
             left: 50%;
@@ -53,20 +53,18 @@
             z-index: 8;
             overflow: hidden;
             opacity: 0;
+            background: $color-primary;
             transform: translate3d(var(--offset-x), var(--offset-y), 0) scale(var(--scale)) rotate(var(--rotate));
             transform-origin: top center;
             cursor: default;
             will-change: transform;
             transition: opacity 1s var(--ease-quart), transform 1s var(--ease-quart);
-            --scale: 0.6;
-            --offset-x: 20%;
-            --offset-y: -64%;
-            opacity: 0;
 
             @include bp (md) {
+                --scale: 0.6;
+                --rotate: 5deg;
                 --offset-x: 13%;
                 --offset-y: -65%;
-                --rotate: 5deg;
                 top: 50%;
                 left: 0;
                 transform-origin: bottom right;
@@ -79,24 +77,31 @@
                 object-fit: cover;
                 opacity: var(--opacity);
                 transform: translateZ(0);
+                pointer-events: none;
+                user-select: none;
             }
 
             // Hidden photo over
             &--0 {
-                --scale: 1.1;
-                --rotate: -1deg;
+                --scale: 1.05;
+                --rotate: 0deg;
+                --offset-x: -50%;
+                --offset-y: -62.5%;
                 z-index: 9;
                 opacity: 0;
 
                 @include bp (md) {
-                    --offset-x: -5%;
-                    --offset-y: -45%;
+                    --scale: 1.075;
+                    --rotate: -1deg;
+                    --offset-x: -4%;
+                    --offset-y: -47.5%;
                 }
             }
             // First visible photo
             &--1 {
                 --scale: 1;
                 --rotate: 0deg;
+                --offset-y: -50%;
                 opacity: 1;
                 box-shadow:
                     0 12px 12px rgba(#000, 0.15),
@@ -152,7 +157,7 @@
             }
             &--5 {
                 --scale: 0.68;
-                --opacity: 0.3;
+                --opacity: 0.25;
                 --offset-y: -1.5%;
                 z-index: 4;
                 opacity: 1;
@@ -165,7 +170,7 @@
                 }
             }
             &--6 {
-                --opacity: 0.3;
+                --opacity: 0.25;
                 z-index: 3;
                 opacity: 0;
             }