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

Merge branch 'dev'
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
Félix Péault
2020-06-02 15:12:06 +02:00
parent 818ac70b32 56d9caa86b
commit 44844f57c2
10 changed files with 706 additions and 582 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
package.json
View File

@@ -18,22 +18,22 @@
"animejs": "^3.2.0", "animejs": "^3.2.0",
"compression": "^1.7.4", "compression": "^1.7.4",
"imagesloaded": "^4.1.4", "imagesloaded": "^4.1.4",
"lazysizes": "^5.2.0", "lazysizes": "^5.2.2",
"node-fetch": "^2.6.0", "node-fetch": "^2.6.0",
"normalize.css": "^8.0.1", "normalize.css": "^8.0.1",
"polka": "^1.0.0-next.11", "polka": "^1.0.0-next.11",
"rellax": "^1.12.1", "rellax": "^1.12.1",
"scroll-out": "^2.2.10", "scroll-out": "^2.2.11",
"sirv": "^0.4.6", "sirv": "^0.4.6",
"svelte-lazy": "^0.1.11", "svelte-lazy": "^0.1.11",
"swipe-listener": "^1.1.0" "swipe-listener": "^1.1.0"
}, },
"devDependencies": { "devDependencies": {
"@babel/core": "^7.9.6", "@babel/core": "^7.10.2",
"@babel/plugin-syntax-dynamic-import": "^7.8.3", "@babel/plugin-syntax-dynamic-import": "^7.8.3",
"@babel/plugin-transform-runtime": "^7.9.6", "@babel/plugin-transform-runtime": "^7.10.1",
"@babel/preset-env": "^7.9.6", "@babel/preset-env": "^7.10.2",
"@babel/runtime": "^7.9.6", "@babel/runtime": "^7.10.2",
"@rollup/plugin-alias": "^3.1.0", "@rollup/plugin-alias": "^3.1.0",
"@rollup/plugin-babel": "^5.0.2", "@rollup/plugin-babel": "^5.0.2",
"@rollup/plugin-commonjs": "12.0.0", "@rollup/plugin-commonjs": "12.0.0",
@@ -42,15 +42,15 @@
"autoprefixer": "^9.8.0", "autoprefixer": "^9.8.0",
"dotenv": "^8.2.0", "dotenv": "^8.2.0",
"node-sass": "^4.14.1", "node-sass": "^4.14.1",
"postcss": "^7.0.30", "postcss": "^7.0.32",
"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.10.9", "rollup": "^2.12.0",
"rollup-plugin-glslify": "^1.2.0", "rollup-plugin-glslify": "^1.2.0",
"rollup-plugin-svelte": "^5.2.2", "rollup-plugin-svelte": "^5.2.2",
"rollup-plugin-terser": "^6.0.1", "rollup-plugin-terser": "^6.1.0",
"sapper": "^0.27.13", "sapper": "^0.27.13",
"svelte": "^3.22.3", "svelte": "^3.23.0",
"svelte-preprocess": "^3.7.4" "svelte-preprocess": "^3.7.4"
}, },
"browserslist": [ "browserslist": [

1194
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

7
src/molecules/Photo.svelte
View File

@@ -18,6 +18,7 @@
const { name, date, location } = photo const { name, date, location } = photo
const { private_hash } = photo.image const { private_hash } = photo.image
const imgAlt = `${name}, ${location.region}, ${location.country.name}` const imgAlt = `${name}, ${location.region}, ${location.country.name}`
const nameSplit = name.split(', ')
// Photo index // Photo index
const photoIndex = (index < 10 ? '0': '') + index const photoIndex = (index < 10 ? '0': '') + index
@@ -35,9 +36,11 @@
<div class="photo__location wrap"> <div class="photo__location wrap">
<div class="wrapper"> <div class="wrapper">
<h2 class="title-location" id="photo-{index + 1}"> <h2 class="title-location" id="photo-{index + 1}">
{#each name.split(', ') as line, i} {#each nameSplit as line, i}
<span class="line"> <span class="line">
<span>{name.split(', ')[i]},</span> <span>
{nameSplit[i]}{#if i < nameSplit.length - 1},{/if}
</span>
</span> </span>
{/each} {/each}
</h2> </h2>

6
src/routes/_layout.svelte
View File

@@ -99,7 +99,9 @@
// Add last updated date to each location // Add last updated date to each location
data.locations.data.forEach(location => { data.locations.data.forEach(location => {
const latestPhoto = latestPhotos.find(photo => photo.location.id === location.id) const latestPhoto = latestPhotos.find(photo => photo.location.id === location.id)
location.last_updated = latestPhoto.created_on if (latestPhoto) {
location.last_updated = latestPhoto.created_on
}
}) })
// Set data into store // Set data into store
@@ -171,7 +173,7 @@
{/each} {/each}
</svelte:head> </svelte:head>
<slot></slot> <slot />
<Transition /> <Transition />

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

@@ -164,9 +164,10 @@
{#if illu_desktop || illu_desktop_2x || illu_mobile} {#if illu_desktop || illu_desktop_2x || illu_mobile}
<div class="place__illustration"> <div class="place__illustration">
<div class="parallax" data-rellax-speed="-5" data-rellax-max-y="400"> <div class="parallax" data-rellax-speed="-5" data-rellax-max-y="400">
<div class="place__illustration_img" style="{`--url-desktop: ${illu_desktop ? `url(${illu_desktop.full_url});` : undefined}`} <div class="place__illustration_img"
{`--url-desktop-2x: ${illu_desktop_2x ? `url(${illu_desktop_2x.full_url});` : undefined}`} style="{`--url-desktop: ${illu_desktop ? `url(${illu_desktop.full_url});` : undefined}`}
{`--url-mobile: ${illu_mobile ? `url(${illu_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}`}"
/> />
</div> </div>
</div> </div>

29
src/style/molecules/_globe.scss
View File

@@ -64,21 +64,32 @@
display: block; display: block;
top: -4px; top: -4px;
left: -4px; left: -4px;
width: 8px;
height: 8px;
padding: 4px; padding: 4px;
border-radius: 50%;
opacity: 1; opacity: 1;
background: #ff6c89;
will-change: transform; will-change: transform;
// Dot
&:before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 8px;
height: 8px;
background: $color-secondary;
border-radius: 100%;
}
span { span {
transition: color 0.4s $ease-quart, opacity 0.3s $ease-inout; transition: color 0.4s $ease-quart, opacity 0.3s $ease-inout;
} }
// Hover glow effect // Hover glow effect
&.hover { &.hover {
animation: globeMarkerPulse 1s; &:before {
animation: globeMarkerPulse 1s;
}
} }
// Label // Label
@@ -120,7 +131,7 @@
} }
.marker { .marker {
&__city { &__city {
color: #FF6C89; color: $color-secondary;
} }
&__country { &__country {
color: $color-text; color: $color-text;
@@ -158,6 +169,12 @@
// Marker is close to another one // Marker is close to another one
// Show the marker infos only on hover // Show the marker infos only on hover
&.is-close { &.is-close {
// Dot
&:before {
width: 7px;
height: 7px;
}
// Label
.marker__label { .marker__label {
opacity: 0; opacity: 0;
} }

5
src/style/molecules/_photo.scss
View File

@@ -1,5 +1,4 @@
.photo { .photo {
/* /*
** Location ** Location
*/ */
@@ -13,6 +12,7 @@
margin-bottom: 56px; margin-bottom: 56px;
} }
// Street name
h2 { h2 {
text-align: left; text-align: left;
@@ -22,7 +22,8 @@
} }
.line { .line {
overflow: hidden; overflow: hidden;
padding-bottom: 3px; margin: -12px 0 -16px;
padding: 12px 0;
display: block; display: block;
span { span {

8
src/style/organisms/_locations.scss
View File

@@ -55,15 +55,19 @@
@include breakpoint (xl) { @include breakpoint (xl) {
grid-column-gap: 96px; grid-column-gap: 96px;
grid-row-gap: 96px; grid-row-gap: 96px;
max-width: 1024px; // max-width: 1024px;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
margin-bottom: 72px; margin-bottom: 72px;
// To apply when having 4 locations: // To apply when having 4 locations:
// grid-template-columns: repeat(4, 1fr); grid-template-columns: repeat(4, 1fr);
max-width: 1200px;
// grid-column-gap: 120px; // grid-column-gap: 120px;
// grid-row-gap: 120px; // grid-row-gap: 120px;
// Works well but fucks with the FLIP animations
// grid-auto-flow: column;
// grid-template-columns: repeat(auto-fit, minmax(min-content, 1fr));
} }
} }
} }

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

@@ -80,6 +80,13 @@
} }
} }
// Title
h2 {
@include breakpoint (sm) {
max-width: 840px;
}
}
// Even photos // Even photos
&:nth-child(even) { &:nth-child(even) {
@include breakpoint (sm) { @include breakpoint (sm) {
@@ -87,6 +94,9 @@
.photo__location, h2 { .photo__location, h2 {
text-align: right; text-align: right;
} }
h2 {
margin-left: auto;
}
// Image // Image
.photo { .photo {

2
src/utils/functions.js
View File

@@ -128,7 +128,7 @@ export const formatDate = (originDate, format) => {
// Relative time from an input date // Relative time from an input date
export const relativeTime = (originDate, limit = 0) => { export const relativeTime = (originDate, limit = 0) => {
const date = new Date(originDate) const date = new Date(originDate)
const diff = Number(new Date()) - date const diff = Number(new Date()) - date - (2 * 3600 * 1000) // 2 hours difference in ms
// Define units in milliseconds // Define units in milliseconds
const mn = 60 * 1000 const mn = 60 * 1000