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

Globe: Temporary fix for responsive sizing, Add correct margins top/bottom
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source 
- Ideally the globe would have to get the size within its container (.globe), set via CSS and not on the window
This commit is contained in:
Félix Péault
2020-04-19 20:13:01 +02:00
parent 9220e6cf8d
commit 1cddc26625
7 changed files with 68 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/routes/_layout.svelte
View File

@@ -111,23 +111,24 @@
/*
** Manipulate data
*/
if ($countries) {
// Replace each countrie's continent by the database
$countries.forEach(count => count.continent = $continents.find(cont => cont.id === count.continent.id))
if (process.browser) {
if ($countries) {
$countries.forEach(country => {
const matchingContinent = $continents.find(continent => continent.id === country.continent.id)
// Replace continent with request data
country.continent = matchingContinent
// Add countries to each continents
matchingContinent.countries = []
matchingContinent.countries.push(country)
})
}
// Push each country to its continent
$countries.forEach(country => {
const continent = $continents.find(cont => cont.id === country.continent.id)
continent.countries = []
if (!continent.countries.includes(country)) {
continent.countries.push(country)
}
})
}
// Replace each location's country by the database
if ($locations) {
$locations.forEach(loc => loc.country = $countries.find(cont => cont.id === loc.country.id))
if ($locations) {
// Replace each location's country with request data
$locations.forEach(location => {
location.country = $countries.find(country => country.id === location.country.id)
})
}
}
</script>

9
src/routes/index.svelte
View File

@@ -52,6 +52,7 @@
// Props and Variables
export let photos = ''
const { page } = stores()
let winWidth = 0
// Reset current location if existing
currentLocation.set()
@@ -78,6 +79,8 @@
/>
</svelte:head>
<svelte:window bind:innerWidth={winWidth} />
<main class="housesof" class:is-transitioning={!$pageReady}>
<section class="intro">
<div class="anim-mask">
@@ -117,7 +120,11 @@
{#if process.browser}
<Lazy offset={window.innerHeight}>
<InteractiveGlobe />
<InteractiveGlobe size={
(winWidth <= 768) ? 0.96 :
(winWidth <= 992) ? 0.6 :
0.575}
/>
</Lazy>
{/if}

18
src/style/layouts/_explore.scss
View File

@@ -4,27 +4,17 @@
position: relative;
z-index: 3;
max-width: 312px;
margin: 0 auto;
margin: 0 auto 72px;
@include breakpoint (sm) {
max-width: 472px;
margin-bottom: 0 !important;
margin-bottom: 120px;
}
}
// Globe
.globe {
// margin-top: -96px;
// margin-bottom: -160px;
// @include breakpoint (sm) {
// margin-bottom: calc(-120px - 6vw);
// }
// @include breakpoint (xl) {
// margin-top: -176px;
// margin-bottom: -240px;
// }
}
// .globe {
// }
// Browse
.browse {

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

@@ -3,33 +3,35 @@
position: relative;
z-index: 2;
width: 100vw;
height: 100vh;
height: 800px;
overflow: hidden;
cursor: grab;
// pointer-events: none;
user-select: none;
@include breakpoint (sm) {
height: 1280px;
}
@include breakpoint (md) {
height: 1340px;
}
@include breakpoint (xl) {
height: 1670px;
}
////DEBUG////
// background: rgba(255,0,0,0.2);
// DEBUG //
// background: rgba(red, 0.2);
// &:after {
// content: "";
// display: block;
// background: blue;
// position: absolute;
// left: 0; top: 50%;
// top: 50%;
// left: 0;
// background: blue;
// width: 100%;
// height: 2px;
// margin-top:-1px;
// margin-top: -1px;
// }
////END DEBUG////
@include breakpoint (sm) {
height: 140vw;
}
@include breakpoint (xl) {
height: 2000px;
}
// END DEBUG //
/*
@@ -70,7 +72,7 @@
will-change: transform;
span {
transition: color 0.4s $ease-quart, opacity 0.4s $ease-quart;
transition: color 0.4s $ease-quart, opacity 0.3s $ease-inout;
}
// Hover glow effect
@@ -88,17 +90,25 @@
// Location city
&__city {
font-family: $font-serif;
font-size: rem(24px);
font-size: rem(18px);
line-height: 1;
@include breakpoint (sm) {
font-size: rem(24px);
}
}
// Location country
&__country {
display: block;
opacity: 0.8;
font-family: $font-sans;
font-size: rem(10px);
font-size: rem(8px);
line-height: 1;
text-transform: uppercase;
@include breakpoint (sm) {
font-size: rem(10px);
}
}
// Active
@@ -134,14 +144,12 @@
&.is-close {
.marker__label {
opacity: 0;
pointer-events: none;
}
// Show labels on hover
&:hover {
.marker__label {
opacity: 1;
pointer-events: auto;
}
}
}

10
src/style/molecules/_location.scss
View File

@@ -69,17 +69,19 @@
z-index: 1;
top: 50%;
left: 50%;
transform: scale(0.6) translate(-50%, -50%);
transform: scale(0.6) translate(-50%, -50%) translateZ(0);
transform-origin: 0 0;
display: block;
width: 216px;
height: 216px;
width: 184px;
height: 184px;
background: rgba($color-lightpurple, 0.3);
border-radius: 100%;
transition: transform 0.3s $ease-quart, opacity 0.3s $ease-quart;
will-change: transform;
@include breakpoint (sm) {
transform: scale(0.94) translate(-50%, -50%);
width: 216px;
height: 216px;
}
}
}

14
src/style/pages/_homepage.scss
View File

@@ -79,15 +79,7 @@
}
// Globe
// .globe {
// margin-bottom: calc(-200px - 8vw);
// @include breakpoint (sm) {
// margin-bottom: calc(-100px - 28vw);
// }
// @include breakpoint (xl) {
// margin-bottom: -550px;
// }
// }
// Browse
@@ -124,9 +116,13 @@
// Massive title
.anim-title {
margin-top: -#{pxVW(352)};
margin-top: -#{pxVW(224)};
margin-left: -60px;
@include breakpoint (sm) {
margin-top: -224px;
}
span:nth-of-type(1) {
letter-spacing: -6vw;
}

1
src/style/pages/_page.scss
View File

@@ -93,7 +93,6 @@
// Globe
// .globe {
// margin-top: 8vw;
// }
}