.

sandbox/animation.js

@@ -7,6 +7,12 @@ var dropdownLabel = document.getElementById("dropdownLabel");
 var dropdownContent = document.getElementById("dropdownContent");
 var playBtn = document.getElementById("playBtn");
 var slider = document.getElementById("slider");
+var clickInterceptor = document.getElementById("click-interceptor");
+
+clickInterceptor.addEventListener("mousedown", function() {
+    displayDropdownContent(false);
+    displayDropdownContentEnv(false);
+});
 
 // event on the dropdown
 function formatId(name) {
@@ -19,12 +25,14 @@ function displayDropdownContent(display) {
         chevronDown.style.display = "inline";
         chevronUp.style.display = "none";
         dropdownBtn.classList.add("open");
+        clickInterceptor.classList.remove("hidden");
     }
     else {
         dropdownContent.style.display = "none";
         chevronDown.style.display = "none";
         chevronUp.style.display = "inline";
         dropdownBtn.classList.remove("open");
+        clickInterceptor.classList.add("hidden");
     }
 }
 dropdownBtn.addEventListener("click", function() {

sandbox/environment.js

@@ -27,10 +27,12 @@ function displayDropdownContentEnv(display) {
     if (display) {
         dropdownContentEnv.classList.remove("hidden");
         btnEnvironment.classList.add("open");
+        clickInterceptor.classList.remove("hidden");
     }
     else {
         dropdownContentEnv.classList.add("hidden");
         btnEnvironment.classList.remove("open");
+        clickInterceptor.classList.add("hidden");
     }
 }
 

sandbox/index-local.html

@@ -20,9 +20,11 @@
         <div id="canvasZone">
             <canvas id="renderCanvas" touch-action="none"></canvas>
         </div>
+        <div id="click-interceptor" class="hidden">
+        </div>
         <div id="footer" class="footer">
             <div class="footerLeft">
-                <img id="playImg" src="Assets/BabylonIdentity.svg">
+                <img id="logoImg" src="Assets/BabylonIdentity.svg">
             </div>
             <div id="animationBar">
                 <div class="row">

sandbox/index-media.css

@@ -1,77 +1,19 @@
 
-@media (min-width: 0px) {
-    #slider {
-        display: none;
+@media (max-width: 768px) {
+    html {
+        --footer-height: 50px;
+        --font-size: 16px;
     }
 
-    .dropdown {        
-        width: 56px;
-    }    
-
-    #dropdownLabel {
-        display: none;
-    }   
-    #dropdownContent a {
-        max-width: 200px;
-    }
-}
-
-@media (min-width: 480px) {
-    #slider,
-    #dropdownLabel {
-        display: initial;
-    }
-    
-    #slider {
-        width: 100px;
-    }
-
-    .dropdown {        
-        width: 150px;
-    }
-
-    #dropdownContent {
-        width: 150px;
-    }
-}
-
-@media (min-width: 768px) {
-    #slider,
-    #dropdownLabel {
-        display: initial;
-    }
-    
-    #slider {
-        width: 300px;
+    .footer {       
+        grid-template-columns: 0px 1fr 150px
     }
 
     .dropdown {        
-        width: 200px;
-    }
-
-    #dropdownContent {
-        width: 200px;
-    }
-}
-
-@media (min-width: 992px) {
-    #slider,
-    #dropdownLabel {
-        display: initial;
-    }
-    
-    #slider {
-        width: 400px;
+        width: 100px;
     }
-}
 
-@media (min-width: 1200px) {
-    #slider,
-    #dropdownLabel {
-        display: initial;
-    }
-    
-    #slider {
-        width: 700px;
+    #dropdownBtn {
+        width: 100px;
     }
-}
+}

sandbox/index.css

@@ -5,6 +5,7 @@
     --button-hover-color: #BB464B;
     --button-hover-hover: #e0684b;
     --button-hover-background:  #162D3A;
+    --font-size: 20px;
 }
 
 html, body, #root {
@@ -13,7 +14,7 @@ html, body, #root {
     padding: 0;
     margin: 0;
     overflow: hidden;
-    font-size: 20px;
+    font-size: var(--font-size);
     background: var(--background);
     font-family: "acumin-pro-condensed";
     font-weight: normal;
@@ -23,6 +24,15 @@ html, body, #root {
     display: none !important;
 }
 
+#click-interceptor {
+    position: absolute;
+    width: 100%;
+    height: 100%;    
+    z-index: 99;
+    top:0;
+    left:0;
+}
+
 #canvasZone {
     display: block;
     padding: 0;
@@ -52,7 +62,6 @@ a:visited {
     color: white;
 }
 
-
 .footer {
     position: relative;
     width: 100%;
@@ -66,12 +75,18 @@ a:visited {
     grid-template-columns: 201px 1fr 210px
 }
 
+#logoImg {
+    height: var(--footer-height);
+    width: 161px;
+}
+
 .footerLeft {
     display: grid;
     grid-column: 1;
     grid-row: 1;
     padding-left: 40px;
     align-content: center; 
+    overflow: hidden;
 }
 
 .footerRight {
@@ -249,7 +264,7 @@ a:visited {
     display: flex;
     height: var(--footer-height);
     width: 200px;
-    font-size: 20px;
+    font-size: var(--font-size);
 }
 
 #playBtn {
@@ -273,7 +288,8 @@ a:visited {
 #dropdownContent-env {
     position: absolute;
     bottom: var(--footer-height);
-    right: 0px;
+    right: 0px;     
+    z-index: 100;
 }
 
 #dropdownContent-env div  {
@@ -281,7 +297,7 @@ a:visited {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    font-size: 20px;
+    font-size: var(--font-size);
     width: calc(2 * var(--footer-height));
     color: white;
     cursor: pointer;
@@ -336,7 +352,7 @@ a:visited {
     max-width: 1000px;
     transition: color 0.5s;
     height: 40px;
-    font-size: 20px;
+    font-size: var(--font-size);
     box-sizing: border-box;
     padding: 0;
     margin: 0;
@@ -356,9 +372,9 @@ a:visited {
 #dropdownContent {    
     background-color: var(--button-hover-color);
     display: none;
-    position: absolute;
+    position: absolute;      
+    z-index: 100;
     bottom: var(--footer-height);
-    z-index: 1;
     min-width: 135px;
     width: 200px;
     flex-direction: column;
@@ -399,10 +415,11 @@ a:visited {
 #slider {
     -webkit-appearance: none;
     cursor: pointer;
-    width: 1000px;
+    width: 100%;
     height: var(--footer-height);
     outline: none;
     margin-left: 20px;
+    margin-right: 10px;
     background-color: transparent;
 }
 

sandbox/index.html

@@ -52,9 +52,11 @@
         <div id="canvasZone">
             <canvas id="renderCanvas" touch-action="none"></canvas>
         </div>
+        <div id="click-interceptor" class="hidden">
+        </div>
         <div id="footer" class="footer">
             <div class="footerLeft">
-                <img id="playImg" src="Assets/BabylonIdentity.svg">
+                <img id="logoImg" src="Assets/BabylonIdentity.svg">
             </div>
             <div id="animationBar">
                 <div class="row">