From faf0c3c96b5da01483d127ec2498d9fccea0ab27 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Tue, 21 Apr 2020 14:41:26 +0200
Subject: [PATCH] Globe: Fix bottom when cut

---
 src/globe/index.js               | 20 +++++++++++---------
 src/style/_variables.scss        | 13 +++----------
 src/style/layouts/_main.scss     |  1 +
 src/style/molecules/_globe.scss  |  2 ++
 src/style/organisms/_footer.scss |  2 +-
 5 files changed, 18 insertions(+), 20 deletions(-)

diff --git a/src/globe/index.js b/src/globe/index.js
index 8942c9a..3bfba70 100644
--- a/src/globe/index.js
+++ b/src/globe/index.js
@@ -60,6 +60,7 @@ class WebglGlobe {
 
     // Build
     buildWebglScene () {
+        // Renderer
         this.renderer = new Renderer({
             // To allow transparent background on webgl canvas
             alpha: true,
@@ -67,6 +68,8 @@ class WebglGlobe {
             antialias: window.innerWidth < 768 || window.devicePixelRatio == 1 ? true : false,
         })
 
+        const elParent = document.body
+
         // we put the canvas at the end of body tag as 'position:fixed'
         // this is to avoid having a too big canvas if the globe needs to be very large:
         // so instead we move the globe as we scroll
@@ -75,7 +78,7 @@ class WebglGlobe {
         this.renderer.canvas.style.left = 0
         this.renderer.canvas.style.pointerEvents = 'none'
         this.renderer.canvas.style.zIndex = 100
-        document.body.appendChild(this.renderer.canvas)
+        elParent.appendChild(this.renderer.canvas)
 
         // The markers DOM nodes wrapper
         // this wrapper is added just next to the canvas, at the end of body tag
@@ -85,8 +88,7 @@ class WebglGlobe {
         this.$markerWrapper.style.top  = 0
         this.$markerWrapper.style.left = 0
         this.$markerWrapper.style.pointerEvents = 'none'
-        this.$markerWrapper.style.zIndex = 101
-        document.body.appendChild(this.$markerWrapper)
+        elParent.appendChild(this.$markerWrapper)
 
         // Load worldmap texture
         this.texture = Texture.fromUrl(this.renderer.gl, this.options.texture, {
@@ -281,11 +283,11 @@ class WebglGlobe {
     }
 
     // Destroy
-    destroy() {
-        this.disable()//stop render loop
-        document.body.removeChild(this.$markerWrapper )
-        document.body.removeChild(this.renderer.canvas )
-        this.camera.delete()//to remove event listeners
+    destroy () {
+        this.disable() // Stop render loop
+        document.body.removeChild(this.$markerWrapper)
+        document.body.removeChild(this.renderer.canvas)
+        this.camera.delete() // To remove event listeners
     }
 
     /**
@@ -311,7 +313,7 @@ class WebglGlobe {
         }
 
         if (this.globeMesh.material.uniforms.uCameraOffsetY) {
-            this.globeMesh.material.uniforms.uCameraOffsetY.value += (this.globeScrollOffset - this.globeMesh.material.uniforms.uCameraOffsetY.value ) * this.options.scrollSmoothing
+            this.globeMesh.material.uniforms.uCameraOffsetY.value += (this.globeScrollOffset - this.globeMesh.material.uniforms.uCameraOffsetY.value) * this.options.scrollSmoothing
         }
 
         this.currMarkerScrollOffset += (this.markersScrollOffset - this.currMarkerScrollOffset) * this.options.scrollSmoothing
diff --git a/src/style/_variables.scss b/src/style/_variables.scss
index 1bf150f..17aa120 100644
--- a/src/style/_variables.scss
+++ b/src/style/_variables.scss
@@ -1,5 +1,6 @@
 // Colors
 $color-primary: #3C0576;
+$color-primary-darker: #2D0458;
 $color-secondary: #FF6C89;
 $color-secondary-bright: #FF0536;
 $color-text: #333;
@@ -9,16 +10,8 @@ $color-gray: #666;
 $color-lightgray: #999;
 
 // CSS Variables
-:root {
-    // Colors
-    --color-primary: #{$color-primary};
-    --color-secondary: #{$color-secondary};
-    --color-text: #{$color-text};
-    --color-tertiary: #{$color-tertiary};
-    --color-lightpurple: #{$color-lightpurple};
-    --color-gray: #{$color-gray};
-    --color-lightgray: #{$color-lightgray};
-}
+// :root {
+// }
 
 
 /* Fonts
diff --git a/src/style/layouts/_main.scss b/src/style/layouts/_main.scss
index 6c0f161..aaeb009 100644
--- a/src/style/layouts/_main.scss
+++ b/src/style/layouts/_main.scss
@@ -1,6 +1,7 @@
 // Main page
 .housesof {
     position: absolute;
+    z-index: 120;
     top: 0;
     left: 0;
     width: 100%;
diff --git a/src/style/molecules/_globe.scss b/src/style/molecules/_globe.scss
index 0fd5a6c..5953fce 100644
--- a/src/style/molecules/_globe.scss
+++ b/src/style/molecules/_globe.scss
@@ -46,6 +46,8 @@
     ** Markers
     */
     &__markers {
+        z-index: 210;
+
         // When dragging
         &.is-grabbing {
             cursor: grabbing;
diff --git a/src/style/organisms/_footer.scss b/src/style/organisms/_footer.scss
index a0166bb..92af450 100644
--- a/src/style/organisms/_footer.scss
+++ b/src/style/organisms/_footer.scss
@@ -2,7 +2,7 @@
    FOOTER
 ========================================================================== */
 .footer {
-    background-color: #2D0458;
+    background-color: $color-primary-darker;
 
     .wrap {
         display: block;