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",
"compression": "^1.7.4",
"imagesloaded": "^4.1.4",
"lazysizes": "^5.2.0",
"lazysizes": "^5.2.2",
"node-fetch": "^2.6.0",
"normalize.css": "^8.0.1",
"polka": "^1.0.0-next.11",
"rellax": "^1.12.1",
"scroll-out": "^2.2.10",
"scroll-out": "^2.2.11",
"sirv": "^0.4.6",
"svelte-lazy": "^0.1.11",
"swipe-listener": "^1.1.0"
},
"devDependencies": {
"@babel/core": "^7.9.6",
"@babel/core": "^7.10.2",
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
"@babel/plugin-transform-runtime": "^7.9.6",
"@babel/preset-env": "^7.9.6",
"@babel/runtime": "^7.9.6",
"@babel/plugin-transform-runtime": "^7.10.1",
"@babel/preset-env": "^7.10.2",
"@babel/runtime": "^7.10.2",
"@rollup/plugin-alias": "^3.1.0",
"@rollup/plugin-babel": "^5.0.2",
"@rollup/plugin-commonjs": "12.0.0",
@@ -42,15 +42,15 @@
"autoprefixer": "^9.8.0",
"dotenv": "^8.2.0",
"node-sass": "^4.14.1",
"postcss": "^7.0.30",
"postcss": "^7.0.32",
"postcss-load-config": "^2.1.0",
"postcss-preset-env": "^6.7.0",
"rollup": "^2.10.9",
"rollup": "^2.12.0",
"rollup-plugin-glslify": "^1.2.0",
"rollup-plugin-svelte": "^5.2.2",
"rollup-plugin-terser": "^6.0.1",
"rollup-plugin-terser": "^6.1.0",
"sapper": "^0.27.13",
"svelte": "^3.22.3",
"svelte": "^3.23.0",
"svelte-preprocess": "^3.7.4"
},
"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 { private_hash } = photo.image
const imgAlt = `${name}, ${location.region}, ${location.country.name}`
const nameSplit = name.split(', ')
// Photo index
const photoIndex = (index < 10 ? '0': '') + index
@@ -35,9 +36,11 @@
<div class="photo__location wrap">
<div class="wrapper">
<h2 class="title-location" id="photo-{index + 1}">
{#each name.split(', ') as line, i}
{#each nameSplit as line, i}
<span class="line">
<span>{name.split(', ')[i]},</span>
<span>
{nameSplit[i]}{#if i < nameSplit.length - 1},{/if}
</span>
</span>
{/each}
</h2>

4
src/routes/_layout.svelte
View File

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

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

@@ -164,7 +164,8 @@
{#if illu_desktop || illu_desktop_2x || illu_mobile}
<div class="place__illustration">
<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"
style="{`--url-desktop: ${illu_desktop ? `url(${illu_desktop.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}`}"
/>

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

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

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

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

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

@@ -55,15 +55,19 @@
@include breakpoint (xl) {
grid-column-gap: 96px;
grid-row-gap: 96px;
max-width: 1024px;
// max-width: 1024px;
margin-left: auto;
margin-right: auto;
margin-bottom: 72px;
// 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-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
&:nth-child(even) {
@include breakpoint (sm) {
@@ -87,6 +94,9 @@
.photo__location, h2 {
text-align: right;
}
h2 {
margin-left: auto;
}
// Image
.photo {

2
src/utils/functions.js
View File

@@ -128,7 +128,7 @@ export const formatDate = (originDate, format) => {
// Relative time from an input date
export const relativeTime = (originDate, limit = 0) => {
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
const mn = 60 * 1000