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

Place: Add @1x desktop illustration size, Optimize responsive
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
Félix Péault
2020-04-11 19:33:37 +02:00
parent 90bdb5890d
commit 7180419fb0
9 changed files with 62 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@@ -50,7 +50,7 @@
"postcss": "^7.0.27", "postcss": "^7.0.27",
"postcss-load-config": "^2.1.0", "postcss-load-config": "^2.1.0",
"postcss-preset-env": "^6.7.0", "postcss-preset-env": "^6.7.0",
"rollup": "^2.4.0", "rollup": "^2.6.0",
"rollup-plugin-babel": "^4.4.0", "rollup-plugin-babel": "^4.4.0",
"rollup-plugin-eslint": "^7.0.0", "rollup-plugin-eslint": "^7.0.0",
"rollup-plugin-glslify": "^1.2.0", "rollup-plugin-glslify": "^1.2.0",

60
pnpm-lock.yaml generated
View File

@@ -14,10 +14,10 @@ devDependencies:
'@babel/plugin-transform-runtime': 7.9.0_@babel+core@7.9.0 '@babel/plugin-transform-runtime': 7.9.0_@babel+core@7.9.0
'@babel/preset-env': 7.9.5_@babel+core@7.9.0 '@babel/preset-env': 7.9.5_@babel+core@7.9.0
'@babel/runtime': 7.9.2 '@babel/runtime': 7.9.2
'@rollup/plugin-alias': 3.0.1_rollup@2.4.0 '@rollup/plugin-alias': 3.0.1_rollup@2.6.0
'@rollup/plugin-commonjs': 11.0.2_rollup@2.4.0 '@rollup/plugin-commonjs': 11.0.2_rollup@2.6.0
'@rollup/plugin-node-resolve': 7.1.1_rollup@2.4.0 '@rollup/plugin-node-resolve': 7.1.1_rollup@2.6.0
'@rollup/plugin-replace': 2.3.1_rollup@2.4.0 '@rollup/plugin-replace': 2.3.1_rollup@2.6.0
autoprefixer: 9.7.6 autoprefixer: 9.7.6
babel-plugin-module-resolver: 4.0.0 babel-plugin-module-resolver: 4.0.0
dotenv: 8.2.0 dotenv: 8.2.0
@@ -32,12 +32,12 @@ devDependencies:
postcss: 7.0.27 postcss: 7.0.27
postcss-load-config: 2.1.0 postcss-load-config: 2.1.0
postcss-preset-env: 6.7.0 postcss-preset-env: 6.7.0
rollup: 2.4.0 rollup: 2.6.0
rollup-plugin-babel: 4.4.0_@babel+core@7.9.0+rollup@2.4.0 rollup-plugin-babel: 4.4.0_@babel+core@7.9.0+rollup@2.6.0
rollup-plugin-eslint: 7.0.0 rollup-plugin-eslint: 7.0.0
rollup-plugin-glslify: 1.2.0 rollup-plugin-glslify: 1.2.0
rollup-plugin-svelte: 5.2.1_rollup@2.4.0+svelte@3.20.1 rollup-plugin-svelte: 5.2.1_rollup@2.6.0+svelte@3.20.1
rollup-plugin-terser: 5.3.0_rollup@2.4.0 rollup-plugin-terser: 5.3.0_rollup@2.6.0
sapper: 0.27.12_svelte@3.20.1 sapper: 0.27.12_svelte@3.20.1
svelte: 3.20.1 svelte: 3.20.1
svelte-preprocess: 3.7.1_svelte@3.20.1 svelte-preprocess: 3.7.1_svelte@3.20.1
@@ -912,23 +912,23 @@ packages:
dev: false dev: false
resolution: resolution:
integrity: sha512-3NsZsJIA/22P3QUyrEDNA2D133H4j224twJrdipXN38dpnIOzAbUDtOwkcJ5pXmn75w7LSQDjA4tO9dm1XlqlA== integrity: sha512-3NsZsJIA/22P3QUyrEDNA2D133H4j224twJrdipXN38dpnIOzAbUDtOwkcJ5pXmn75w7LSQDjA4tO9dm1XlqlA==
/@rollup/plugin-alias/3.0.1_rollup@2.4.0: /@rollup/plugin-alias/3.0.1_rollup@2.6.0:
dependencies: dependencies:
rollup: 2.4.0 rollup: 2.6.0
slash: 3.0.0 slash: 3.0.0
dev: true dev: true
peerDependencies: peerDependencies:
rollup: ^1.20.0 rollup: ^1.20.0
resolution: resolution:
integrity: sha512-ReSy6iPl3GsWLMNeshXAfgItZFMoMOTYC7MZQQM5va4pqxiGgwl1xZUZfHW6zGyZPK+k8TBadxx+kdmepiUa+g== integrity: sha512-ReSy6iPl3GsWLMNeshXAfgItZFMoMOTYC7MZQQM5va4pqxiGgwl1xZUZfHW6zGyZPK+k8TBadxx+kdmepiUa+g==
/@rollup/plugin-commonjs/11.0.2_rollup@2.4.0: /@rollup/plugin-commonjs/11.0.2_rollup@2.6.0:
dependencies: dependencies:
'@rollup/pluginutils': 3.0.8_rollup@2.4.0 '@rollup/pluginutils': 3.0.8_rollup@2.6.0
estree-walker: 1.0.1 estree-walker: 1.0.1
is-reference: 1.1.4 is-reference: 1.1.4
magic-string: 0.25.7 magic-string: 0.25.7
resolve: 1.15.1 resolve: 1.15.1
rollup: 2.4.0 rollup: 2.6.0
dev: true dev: true
engines: engines:
node: '>= 8.0.0' node: '>= 8.0.0'
@@ -936,14 +936,14 @@ packages:
rollup: ^1.20.0 rollup: ^1.20.0
resolution: resolution:
integrity: sha512-MPYGZr0qdbV5zZj8/2AuomVpnRVXRU5XKXb3HVniwRoRCreGlf5kOE081isNWeiLIi6IYkwTX9zE0/c7V8g81g== integrity: sha512-MPYGZr0qdbV5zZj8/2AuomVpnRVXRU5XKXb3HVniwRoRCreGlf5kOE081isNWeiLIi6IYkwTX9zE0/c7V8g81g==
/@rollup/plugin-node-resolve/7.1.1_rollup@2.4.0: /@rollup/plugin-node-resolve/7.1.1_rollup@2.6.0:
dependencies: dependencies:
'@rollup/pluginutils': 3.0.8_rollup@2.4.0 '@rollup/pluginutils': 3.0.8_rollup@2.6.0
'@types/resolve': 0.0.8 '@types/resolve': 0.0.8
builtin-modules: 3.1.0 builtin-modules: 3.1.0
is-module: 1.0.0 is-module: 1.0.0
resolve: 1.15.1 resolve: 1.15.1
rollup: 2.4.0 rollup: 2.6.0
dev: true dev: true
engines: engines:
node: '>= 8.0.0' node: '>= 8.0.0'
@@ -951,20 +951,20 @@ packages:
rollup: ^1.20.0 rollup: ^1.20.0
resolution: resolution:
integrity: sha512-14ddhD7TnemeHE97a4rLOhobfYvUVcaYuqTnL8Ti7Jxi9V9Jr5LY7Gko4HZ5k4h4vqQM0gBQt6tsp9xXW94WPA== integrity: sha512-14ddhD7TnemeHE97a4rLOhobfYvUVcaYuqTnL8Ti7Jxi9V9Jr5LY7Gko4HZ5k4h4vqQM0gBQt6tsp9xXW94WPA==
/@rollup/plugin-replace/2.3.1_rollup@2.4.0: /@rollup/plugin-replace/2.3.1_rollup@2.6.0:
dependencies: dependencies:
'@rollup/pluginutils': 3.0.8_rollup@2.4.0 '@rollup/pluginutils': 3.0.8_rollup@2.6.0
magic-string: 0.25.7 magic-string: 0.25.7
rollup: 2.4.0 rollup: 2.6.0
dev: true dev: true
peerDependencies: peerDependencies:
rollup: ^1.20.0 rollup: ^1.20.0
resolution: resolution:
integrity: sha512-qDcXj2VOa5+j0iudjb+LiwZHvBRRgWbHPhRmo1qde2KItTjuxDVQO21rp9/jOlzKR5YO0EsgRQoyox7fnL7y/A== integrity: sha512-qDcXj2VOa5+j0iudjb+LiwZHvBRRgWbHPhRmo1qde2KItTjuxDVQO21rp9/jOlzKR5YO0EsgRQoyox7fnL7y/A==
/@rollup/pluginutils/3.0.8_rollup@2.4.0: /@rollup/pluginutils/3.0.8_rollup@2.6.0:
dependencies: dependencies:
estree-walker: 1.0.1 estree-walker: 1.0.1
rollup: 2.4.0 rollup: 2.6.0
dev: true dev: true
engines: engines:
node: '>= 8.0.0' node: '>= 8.0.0'
@@ -4074,11 +4074,11 @@ packages:
hasBin: true hasBin: true
resolution: resolution:
integrity: sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w== integrity: sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==
/rollup-plugin-babel/4.4.0_@babel+core@7.9.0+rollup@2.4.0: /rollup-plugin-babel/4.4.0_@babel+core@7.9.0+rollup@2.6.0:
dependencies: dependencies:
'@babel/core': 7.9.0 '@babel/core': 7.9.0
'@babel/helper-module-imports': 7.8.3 '@babel/helper-module-imports': 7.8.3
rollup: 2.4.0 rollup: 2.6.0
rollup-pluginutils: 2.8.2 rollup-pluginutils: 2.8.2
dev: true dev: true
peerDependencies: peerDependencies:
@@ -4100,10 +4100,10 @@ packages:
dev: true dev: true
resolution: resolution:
integrity: sha512-EqUFINMICD9U3MJ4jsxBcCRhzWNZJBWyAK2ol+2ClWIPaIWOuz0OY/Ml8rdT81F4aufwxJN5I9N7QvCth0OrUQ== integrity: sha512-EqUFINMICD9U3MJ4jsxBcCRhzWNZJBWyAK2ol+2ClWIPaIWOuz0OY/Ml8rdT81F4aufwxJN5I9N7QvCth0OrUQ==
/rollup-plugin-svelte/5.2.1_rollup@2.4.0+svelte@3.20.1: /rollup-plugin-svelte/5.2.1_rollup@2.6.0+svelte@3.20.1:
dependencies: dependencies:
require-relative: 0.8.7 require-relative: 0.8.7
rollup: 2.4.0 rollup: 2.6.0
rollup-pluginutils: 2.8.2 rollup-pluginutils: 2.8.2
sourcemap-codec: 1.4.8 sourcemap-codec: 1.4.8
svelte: 3.20.1 svelte: 3.20.1
@@ -4113,11 +4113,11 @@ packages:
svelte: '*' svelte: '*'
resolution: resolution:
integrity: sha512-wc93cN66sRpX6uFljVFqvWT6NU3V5ab/uLXKt2UiARuexFU/ctolzkmdXM7WM5iKdTX9scToS9sabJTJV4DUMA== integrity: sha512-wc93cN66sRpX6uFljVFqvWT6NU3V5ab/uLXKt2UiARuexFU/ctolzkmdXM7WM5iKdTX9scToS9sabJTJV4DUMA==
/rollup-plugin-terser/5.3.0_rollup@2.4.0: /rollup-plugin-terser/5.3.0_rollup@2.6.0:
dependencies: dependencies:
'@babel/code-frame': 7.8.3 '@babel/code-frame': 7.8.3
jest-worker: 24.9.0 jest-worker: 24.9.0
rollup: 2.4.0 rollup: 2.6.0
rollup-pluginutils: 2.8.2 rollup-pluginutils: 2.8.2
serialize-javascript: 2.1.2 serialize-javascript: 2.1.2
terser: 4.6.7 terser: 4.6.7
@@ -4132,7 +4132,7 @@ packages:
dev: true dev: true
resolution: resolution:
integrity: sha512-EEp9NhnUkwY8aif6bxgovPHMoMoNr2FulJziTndpt5H9RdwC47GSGuII9XxpSdzVGM0GWrNPHV6ie1LTNJPaLQ== integrity: sha512-EEp9NhnUkwY8aif6bxgovPHMoMoNr2FulJziTndpt5H9RdwC47GSGuII9XxpSdzVGM0GWrNPHV6ie1LTNJPaLQ==
/rollup/2.4.0: /rollup/2.6.0:
dev: true dev: true
engines: engines:
node: '>=10.0.0' node: '>=10.0.0'
@@ -4140,7 +4140,7 @@ packages:
optionalDependencies: optionalDependencies:
fsevents: 2.1.2 fsevents: 2.1.2
resolution: resolution:
integrity: sha512-dYE2ZKl9+kxuFKDaaSuauZjIPa8hcKDqI7WrOq1pTXYG4GJw+6ypLifGIvCKw5yJpSmuFohuimYpg0wfRXTCLw== integrity: sha512-qbvQ9ZbvbhBdtRBZ/A4g+9z3iJQ1rHAtjinn3FiN+j5tfz8xiNyTE1JEEMcFWqlH7+NHadI9ieeqKdp8HwYLnQ==
/run-async/2.4.0: /run-async/2.4.0:
dependencies: dependencies:
is-promise: 2.1.0 is-promise: 2.1.0
@@ -4892,7 +4892,7 @@ specifiers:
postcss: ^7.0.27 postcss: ^7.0.27
postcss-load-config: ^2.1.0 postcss-load-config: ^2.1.0
postcss-preset-env: ^6.7.0 postcss-preset-env: ^6.7.0
rollup: ^2.4.0 rollup: ^2.6.0
rollup-plugin-babel: ^4.4.0 rollup-plugin-babel: ^4.4.0
rollup-plugin-eslint: ^7.0.0 rollup-plugin-eslint: ^7.0.0
rollup-plugin-glslify: ^1.2.0 rollup-plugin-glslify: ^1.2.0

2
src/animations/place.js
View File

@@ -41,6 +41,8 @@ export const animateIn = () => {
tl.add({ tl.add({
targets: '.place__illustration', targets: '.place__illustration',
scale: [1.1, 1], scale: [1.1, 1],
translateX: ['-50%', '-50%'],
translateZ: [0, 0],
opacity: [0, 1] opacity: [0, 1]
}, 0) }, 0)

5
src/routes/_layout.svelte
View File

@@ -43,8 +43,9 @@
country { id } country { id }
description description
coordinates coordinates
illustration_desktop { full_url } illu_desktop { full_url }
illustration_mobile { full_url } illu_desktop_2x { full_url }
illu_mobile { full_url }
} }
} }
}`}) }`})

11
src/routes/location/[country]/[place].svelte
View File

@@ -58,7 +58,7 @@
// Update current location // Update current location
const location = $locations.find(loc => loc.slug === $page.params.place) const location = $locations.find(loc => loc.slug === $page.params.place)
const { description, country, illustration_desktop, illustration_mobile } = location const { description, country, illu_desktop, illu_desktop_2x, illu_mobile } = location
currentLocation.set(location) currentLocation.set(location)
currentPhotos.set(photos) currentPhotos.set(photos)
@@ -122,7 +122,7 @@
<a href="/choose" class="button-control button-control--big button-control--dashed" aria-label="Change the location"> <a href="/choose" class="button-control button-control--big button-control--dashed" aria-label="Change the location">
<span class="center"> <span class="center">
<IconGlobe width="44" color="#fff" /> <IconGlobe width={window.innerWidth <= 768 ? 32 : 44} color="#fff" />
<span>Change</span> <span>Change</span>
</span> </span>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
@@ -158,10 +158,11 @@
</div> </div>
</div> </div>
{#if illustration_desktop || illustration_mobile} {#if illu_desktop || illu_mobile}
<div class="place__illustration" <div class="place__illustration"
style="{`--url-desktop: ${illustration_desktop ? `url(${illustration_desktop.full_url});` : undefined}`} style="{`--url-desktop: ${illu_desktop ? `url(${illu_desktop.full_url});` : undefined}`}
{`--url-mobile: ${illustration_mobile ? `url(${illustration_mobile.full_url});` : undefined}`}" {`--url-desktop-2x: ${illu_desktop_2x ? `url(${illu_desktop_2x.full_url});` : undefined}`}
{`--url-mobile: ${illu_mobile ? `url(${illu_mobile.full_url});` : undefined}`}"
/> />
{/if} {/if}
</section> </section>

9
src/style/_base.scss
View File

@@ -121,9 +121,12 @@ button {
font-size: pxVW(180); font-size: pxVW(180);
@include breakpoint (sm) { @include breakpoint (sm) {
font-size: pxVW(160); font-size: pxVW(130);
} }
@include breakpoint (md) { @include breakpoint (md) {
font-size: pxVW(160);
}
@include breakpoint (lg) {
font-size: rem(160px); font-size: rem(160px);
} }
@@ -168,6 +171,7 @@ button {
/* Text Styles /* Text Styles
========================================================================== */ ========================================================================== */
// Location
.style-location { .style-location {
font-family: $font-serif; font-family: $font-serif;
font-size: 6vw; font-size: 6vw;
@@ -191,12 +195,12 @@ button {
} }
} }
.street { .street {
margin-bottom: 8px; margin-bottom: 8px;
} }
} }
// Information (capitalized text)
.style-caps { .style-caps {
font-family: $font-sans; font-family: $font-sans;
font-size: rem(12px); font-size: rem(12px);
@@ -214,6 +218,7 @@ button {
} }
} }
// Short text (description)
.style-description { .style-description {
color: $color-tertiary; color: $color-tertiary;
font-family: $font-sans-light; font-family: $font-sans-light;

4
src/style/atoms/_button-control.scss
View File

@@ -210,6 +210,10 @@
text-decoration: none; text-decoration: none;
@include breakpoint (sm) { @include breakpoint (sm) {
width: 120px;
height: 120px;
}
@include breakpoint (lg) {
width: 152px; width: 152px;
height: 152px; height: 152px;
} }

2
src/style/organisms/_photos.scss
View File

@@ -53,7 +53,6 @@
.photo { .photo {
position: relative; position: relative;
z-index: 4; z-index: 4;
overflow: hidden;
} }
@@ -71,6 +70,7 @@
// Photo // Photo
.photo { .photo {
padding-bottom: 80px; padding-bottom: 80px;
overflow: hidden;
@include breakpoint (sm) { @include breakpoint (sm) {
padding-bottom: 120px; padding-bottom: 120px;

26
src/style/pages/_place.scss
View File

@@ -22,7 +22,7 @@
@include breakpoint (sm) { @include breakpoint (sm) {
flex-direction: row; flex-direction: row;
align-items: flex-end; align-items: flex-end;
padding: pxVW(208) 0 pxVW(320); padding: pxVW(240) 0 pxVW(288); // 528
height: auto; height: auto;
max-height: none; max-height: none;
} }
@@ -165,9 +165,12 @@
position: absolute; position: absolute;
z-index: 0; z-index: 0;
top: 0; top: 0;
left: 0; left: 50%;
width: 100%; width: 100%;
max-width: 1920px;
height: 100%; height: 100%;
transform: translateX(-50%);
transform-origin: 0 0;
background-image: var(--url-mobile); background-image: var(--url-mobile);
background-position: 0 0; background-position: 0 0;
background-repeat: no-repeat; background-repeat: no-repeat;
@@ -177,22 +180,9 @@
@include breakpoint (sm) { @include breakpoint (sm) {
background-image: var(--url-desktop); background-image: var(--url-desktop);
} }
@media (min-width: $screen-sm) and (-webkit-min-device-pixel-ratio: 2),
// Gradient on top (min-width: $screen-sm) and (min-resolution: 192dpi) {
&:before { background-image: var(--url-desktop-2x);
content: "";
width: 100%;
height: 60vw;
display: block;
position: absolute;
bottom: 0;
left: 0;
background: linear-gradient(180deg, rgba($color-primary, 0%) 0%, $color-primary 100%);
@include breakpoint (lg) {
height: 50%;
min-height: 600px;
}
} }
} }
} }