flayks/housesof
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Adapt style of Photos viewer

Browse Source 
- Change opacities
- Change photo background
- Disable image selection (prepping for a swipe)
- Fix mobile x and y offsets
This commit is contained in:
Félix Péault
2021-11-17 19:52:11 +01:00
parent 4714c111ca
commit 873c2d94ac
2 changed files with 20 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/routes/[country]/[location]/[photo].svelte
View File

@@ -1,10 +1,10 @@
<script lang="ts"> <script lang="ts">
import { browser } from '$app/env' import { browser } from '$app/env'
import { page } from '$app/stores' import { page } from '$app/stores'
import { getAssetUrlKey } from '$utils/helpers'
import { throttle } from '$utils/functions'
import dayjs from 'dayjs' import dayjs from 'dayjs'
import advancedFormat from 'dayjs/plugin/advancedFormat.js' import advancedFormat from 'dayjs/plugin/advancedFormat.js'
import { getAssetUrlKey } from '$utils/helpers'
import { throttle } from '$utils/functions'
// Components // Components
import Metas from '$components/Metas.svelte' import Metas from '$components/Metas.svelte'
import Image from '$components/atoms/Image.svelte' import Image from '$components/atoms/Image.svelte'

31
src/style/pages/_viewer-photo.scss
View File

@@ -40,10 +40,10 @@
.photo { .photo {
--opacity: 1; --opacity: 1;
--scale: 1.0; --scale: 0.6;
--rotate: 0deg; --rotate: 0deg;
--offset-x: -50%; --offset-x: -50%;
--offset-y: -50%; --offset-y: -30%;
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
@@ -53,20 +53,18 @@
z-index: 8; z-index: 8;
overflow: hidden; overflow: hidden;
opacity: 0; opacity: 0;
background: $color-primary;
transform: translate3d(var(--offset-x), var(--offset-y), 0) scale(var(--scale)) rotate(var(--rotate)); transform: translate3d(var(--offset-x), var(--offset-y), 0) scale(var(--scale)) rotate(var(--rotate));
transform-origin: top center; transform-origin: top center;
cursor: default; cursor: default;
will-change: transform; will-change: transform;
transition: opacity 1s var(--ease-quart), transform 1s var(--ease-quart); 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) { @include bp (md) {
--scale: 0.6;
--rotate: 5deg;
--offset-x: 13%; --offset-x: 13%;
--offset-y: -65%; --offset-y: -65%;
--rotate: 5deg;
top: 50%; top: 50%;
left: 0; left: 0;
transform-origin: bottom right; transform-origin: bottom right;
@@ -79,24 +77,31 @@
object-fit: cover; object-fit: cover;
opacity: var(--opacity); opacity: var(--opacity);
transform: translateZ(0); transform: translateZ(0);
pointer-events: none;
user-select: none;
} }
// Hidden photo over // Hidden photo over
&--0 { &--0 {
--scale: 1.1; --scale: 1.05;
--rotate: -1deg; --rotate: 0deg;
--offset-x: -50%;
--offset-y: -62.5%;
z-index: 9; z-index: 9;
opacity: 0; opacity: 0;
@include bp (md) { @include bp (md) {
--offset-x: -5%; --scale: 1.075;
--offset-y: -45%; --rotate: -1deg;
--offset-x: -4%;
--offset-y: -47.5%;
} }
} }
// First visible photo // First visible photo
&--1 { &--1 {
--scale: 1; --scale: 1;
--rotate: 0deg; --rotate: 0deg;
--offset-y: -50%;
opacity: 1; opacity: 1;
box-shadow: box-shadow:
0 12px 12px rgba(#000, 0.15), 0 12px 12px rgba(#000, 0.15),
@@ -152,7 +157,7 @@
} }
&--5 { &--5 {
--scale: 0.68; --scale: 0.68;
--opacity: 0.3; --opacity: 0.25;
--offset-y: -1.5%; --offset-y: -1.5%;
z-index: 4; z-index: 4;
opacity: 1; opacity: 1;
@@ -165,7 +170,7 @@
} }
} }
&--6 { &--6 {
--opacity: 0.3; --opacity: 0.25;
z-index: 3; z-index: 3;
opacity: 0; opacity: 0;
} }