Playground : Pull BabylonJS#6540 part 3 :

- Mobile CSS if less than 1024px
- Mobile : Remove the gutter
- Mobile : Fix a button glitch
- Mobile : Beautiful JS and TS logos
- Mobile : Submesnus are now wonderfully displayed, and not too low if the screen doesn't allow it
- Mobile : Lighter color when touching on a button
- Screen : Submenus are back on the right
- Both : BabylonJS logos are now opening the BJS home
- No more shadows #flatDesign
- Code editor and canvas are resizing when the page switch from mobile to screen version, and reversed too.

Playground/css/img/logoTS.svg

@@ -1,41 +1,22 @@
-<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 630 630">
-<!--
-The MIT License (MIT)
-
-Copyright (c) 2015 Remo H. Jansen <remo.jansen@wolksoftware.com>
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in
-all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-THE SOFTWARE.
--->
-<rect width="630" height="630" fill="#000"/>
-<g transform="translate(0.000000,630.000000) scale(0.100000,-0.100000)"
-fill="#007ACC" stroke="none">
-<path d="M0 3150 l0 -3150 3150 0 3150 0 0 3150 0 3150 -3150 0 -3150 0 0
--3150z m5077 251 c160 -40 282 -111 394 -227 58 -62 144 -175 151 -202 2 -8
--272 -192 -438 -295 -6 -4 -30 22 -57 62 -81 118 -166 169 -296 178 -191 13
--314 -87 -313 -254 0 -49 7 -78 27 -118 42 -87 120 -139 365 -245 451 -194
-644 -322 764 -504 134 -203 164 -527 73 -768 -100 -262 -348 -440 -697 -499
--108 -19 -364 -16 -480 5 -253 45 -493 170 -641 334 -58 64 -171 231 -164 243
-3 4 29 20 58 37 28 16 134 77 234 135 l181 105 38 -56 c53 -81 169 -192 239
--229 201 -106 477 -91 613 31 58 53 82 108 82 189 0 73 -9 105 -47 160 -49 70
--149 129 -433 252 -325 140 -465 227 -593 365 -74 80 -144 208 -173 315 -24
-89 -30 312 -11 402 67 314 304 533 646 598 111 21 369 13 478 -14z m-1479
--263 l2 -258 -410 0 -410 0 0 -1165 0 -1165 -290 0 -290 0 0 1165 0 1165 -410
-0 -410 0 0 253 c0 140 3 257 7 260 3 4 502 6 1107 5 l1101 -3 3 -257z" />
-</g>
-</svg>
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 630 630" style="enable-background:new 0 0 630 630;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<g>
+	<path class="st0" d="M491,400c-24.5-10.6-32.3-15.8-36.5-24.5c-2-4-2.7-6.9-2.7-11.8c-0.1-16.7,12.2-26.7,31.3-25.4
+		c13,0.9,21.5,6,29.6,17.8c2.7,4,5.1,6.6,5.7,6.2c16.6-10.3,44-28.7,43.8-29.5c-0.7-2.7-9.3-14-15.1-20.2
+		c-11.2-11.6-23.4-18.7-39.4-22.7c-10.9-2.7-36.7-3.5-47.8-1.4c-34.2,6.5-57.9,28.4-64.6,59.8c-1.9,9-1.3,31.3,1.1,40.2
+		c2.9,10.7,9.9,23.5,17.3,31.5c12.8,13.8,26.8,22.5,59.3,36.5c28.4,12.3,38.4,18.2,43.3,25.2c3.8,5.5,4.7,8.7,4.7,16
+		c0,8.1-2.4,13.6-8.2,18.9c-13.6,12.2-41.2,13.7-61.3,3.1c-7-3.7-18.6-14.8-23.9-22.9l-3.8-5.6l-18.1,10.5
+		c-10,5.8-20.6,11.9-23.4,13.5c-2.9,1.7-5.5,3.3-5.8,3.7c-0.7,1.2,10.6,17.9,16.4,24.3c14.8,16.4,38.8,28.9,64.1,33.4
+		c11.6,2.1,37.2,2.4,48,0.5c34.9-5.9,59.7-23.7,69.7-49.9c9.1-24.1,6.1-56.5-7.3-76.8C555.4,432.2,536.1,419.4,491,400z"/>
+	<path class="st0" d="M360,342l-0.2-25.8l-0.3-25.7l-110.1-0.3c-60.5-0.1-110.4,0.1-110.7,0.5c-0.4,0.3-0.7,12-0.7,26V342h41h41
+		v116.5V575h29h29V458.5V342h41H360z"/>
+</g>
+<g>
+	<path class="st0" d="M615,15v600H15V15H615 M630,0H0v630h630V0L630,0z"/>
+</g>
+</svg>

Playground/css/index.css

@@ -286,7 +286,6 @@ body {
     cursor: default;
     pointer-events: none;
     user-select: none;
-    box-shadow: 0 2px 5px #000;
 }
 .fpsLabel.languageJS {
     background-color: #3f3461;
@@ -306,7 +305,6 @@ body {
     user-select: none;
     position: relative;
     z-index:5;
-    box-shadow: 0 3px 10px #000;
 }
 .navbar a {
     text-decoration: none;
@@ -446,7 +444,7 @@ body {
 .navbar .select .subSelect .toDisplaySub {
     position: absolute;
     z-index: 10;
-    right: 100%;
+    left: 100%;
     top: 0;
     min-width: 100%;
     display: none;
@@ -656,7 +654,6 @@ body {
     border-radius: 4px;
     color: white;
     font-size: 14px;
-    box-shadow: 0 3px 10px #000;
 }
 .save-layer .save-form .separator {
     width: 350px;
@@ -683,11 +680,10 @@ body {
 
 /* Media queries */
 
-@media (min-width: 1180px) {
+@media (min-width: 1270px) {
     .navBar1280 { display: block; }
-    .navBar920 { display: none; }
-    .navBar710 { display: none; }
-    .navBar550 { display: none; }
+    .navBar1024 { display: none; }
+    .navBarMobile { display: none; }
 
     #qrCodeImage {
         height:auto;
@@ -699,11 +695,10 @@ body {
         column-count: 3;
     }
 }
-@media (max-width: 1180px) and (min-width: 920px) {
+@media (max-width: 1270px) and (min-width: 1025px) {
     .navBar1280 { display: none; }
-    .navBar920 { display: block; }
-    .navBar710 { display: none; }
-    .navBar550 { display: none; }
+    .navBar1024 { display: block; }
+    .navBarMobile { display: none; }
 
     #qrCodeImage {
         height:auto;
@@ -718,34 +713,4 @@ body {
     .navbar .category .buttonJStoTS {
         width: 70px;
     }
-}
-@media (max-width: 920px) {
-    .navBar1280 { display: none; }
-    .navBar920 { display: block; }
-    .navBar710 { display: none; }
-    .navBar550 { display: none; }
-    
-    .navbar .select .toDisplayBig ul {
-        column-count: 2;
-    }
-    .navbar .categoryTitle {
-        padding-right: 15px;
-    }
-    .navbar .version {
-        margin-right: 10px;
-        margin-left: -10px;
-    }
-    .navbar .versionSub {
-        font-size: 14px;
-    }
-    .navbar .category .buttonJStoTS {
-        width: 65px;
-    }
-
-    .button {
-        width: 45px;
-    }
-    .buttonSpaceKiller {
-        display: inline-block;
-    }
 }

Playground/css/index710.css

@@ -1,46 +0,0 @@
-@media (max-width: 710px) {
-    .navBar1280 { display: none; }
-    .navBar920 { display: none; }
-    .navBar710 { display: block; }
-    .navBar400 { display: none; }
-
-    .removeOnPhone {
-        display : none !important;
-    }
-
-    #fpsLabel {
-        top: 60px;
-    }
-    #exampleList {
-        width: 100%;
-    }
-
-    .navbar {
-        box-shadow: 0 2px 5px #000;
-    }
-
-    .navbarBottom .links .link a {
-        font-size: 14px;
-    }
-}
-
-.navbar.navBar710 .categoryTitle {
-    width: 155px;
-    height: 100%;
-    text-align: center;
-}
-.navbar.navBar710 .categoryTitle .logo {
-    margin-top: -7px;
-    margin-left: -5px;
-}
-.navbar.navBar710 .categoryTitle .version {
-    position: relative;
-    top: -35px;
-    left: 20px;
-}
-.navbar.navBar710 .select .toDisplayBig {
-    width:350px;
-}    
-.navbar.navBar710 .select .toDisplayBig ul {
-    column-count: 1;
-}

Playground/css/index550.css

@@ -1,11 +1,11 @@
-@media (max-width: 550px) {
+@media (max-width: 1025px) {
     .navBar1280 { display: none; }
-    .navBar920 { display: none; }
-    .navBar710 { display: none; }
-    .navBar550 { display: block; }
+    .navBar1024 { display: none; }
+    .navBarMobile { display: block; }
 
     #exampleList {
         height: calc(100% - 40px);
+        width: 100%;
         top: 40px;
         bottom: 0;
     }
@@ -20,13 +20,12 @@
     }
     #fpsLabel {
         position: fixed;
-        top: 40px;
+        top: 60px;
         right: 0;
         line-height: 32px;
         height: 35px;
         padding: 0;
         padding-right: 5px;
-        box-shadow: none;
     }
     .wrapper #jsEditor {
         width: 100%;
@@ -97,7 +96,7 @@
     .navbar .select img:hover {
         filter: invert(98%) sepia(0%) saturate(7500%) hue-rotate(207deg) brightness(104%) contrast(104%);
     }
-    .navbar .select img:hover {
+    .navbar .select:hover img {
         filter: invert(98%) sepia(0%) saturate(7500%) hue-rotate(207deg) brightness(104%) contrast(104%);
     }
     .navbar .select .toDisplay {
@@ -114,14 +113,22 @@
     .navbar .select .toDisplay.languageJS .option {
         background-color: #3f3461;
     }
+    .navbar .select .toDisplay.languageJS .option:active {
+        background-color: #9379e6;
+    }
     .navbar .select .toDisplay.languageTS .option {
         background-color: #bb464b;
     }
+    .navbar .select .toDisplay.languageTS .option:active {
+        background-color: #e0684b;
+    }
     .navbar .select .toDisplay .option {
         padding: 1px;
         font-size: 15px;
         height: 33px;
         line-height: 33px;
+        width: 180px;
+        box-sizing: border-box;
     }
     .navbar .select .toDisplay .option  img {
         float: left;
@@ -137,12 +144,11 @@
 
     .navbar .select .subSelect .toDisplaySub {
         position: fixed;
-        top: 75px;
+        top: 40px;
         left: 180px;
         min-width: 180px;
         width: 180px;
         height: auto;
-        max-height: calc(100% - 55px);
         text-align: left;
         overflow-y: auto;
         color: white;

Playground/debug.html

@@ -37,7 +37,7 @@
     <link rel="stylesheet" href="https://use.typekit.net/cta4xsb.css" />
     <link rel="stylesheet" href="css/index.css" />
     <link rel="stylesheet" href="css/index710.css" />
-    <link rel="stylesheet" href="css/index550.css" />
+    <link rel="stylesheet" href="css/indexMobile.css" />
 
     <!-- Pep -->
     <script src="https://code.jquery.com/pep/0.4.2/pep.min.js"></script>
@@ -519,29 +519,29 @@
     </div>
 
     <!-- Mid-size screens -->
-    <div class="navbar navBar920 languageJS">
+    <div class="navbar navBar1024 languageJS">
         <div class="categoryTitle">
             <img class="logo" src="css/img/logo_v4.svg">
-            <div class="version"><span class="versionSub" id="mainTitle920"></span></div>
+            <div class="version"><span class="versionSub" id="mainTitle1024"></span></div>
         </div>
 
         <div class="category languageJS" id="JStoTSbar">
-            <div class="buttonJStoTS languageTS" id="toTSbutton920">TS</div>
-            <div class="buttonJStoTS languageJS" id="toJSbutton920">JS</div>
+            <div class="buttonJStoTS languageTS" id="toTSbutton1024">TS</div>
+            <div class="buttonJStoTS languageJS" id="toJSbutton1024">JS</div>
             <div class="buttonSpaceKiller"></div>
-            <div class="button run" id="runButton920"><img src="css/img/playButton.svg"></div>
-            <div class="button" id="saveButton920"><img src="css/img/saveButton.svg"></div>
-            <div class="button removeOnPhone" id="zipButton920"><img src="css/img/downloadButton.svg"></div>
-            <div class="button" id="newButton920"><img src="css/img/newButton.svg"></div>
-            <div class="button removeOnPhone" id="clearButton920"><img src="css/img/clearButton.svg"></div>
+            <div class="button run" id="runButton1024"><img src="css/img/playButton.svg"></div>
+            <div class="button" id="saveButton1024"><img src="css/img/saveButton.svg"></div>
+            <div class="button removeOnPhone" id="zipButton1024"><img src="css/img/downloadButton.svg"></div>
+            <div class="button" id="newButton1024"><img src="css/img/newButton.svg"></div>
+            <div class="button removeOnPhone" id="clearButton1024"><img src="css/img/clearButton.svg"></div>
 
             <div class="button select"><img src="css/img/optionsButton.svg">
                 <div class="toDisplay">
                     <div class="option subSelect">Theme <i class="fa fa-chevron-right" aria-hidden="true"></i>
 
                         <div class="toDisplaySub">
-                            <div class="option selected" id="darkTheme920">Dark</div>
-                            <div class="option" id="lightTheme920">Light</div>
+                            <div class="option selected" id="darkTheme1024">Dark</div>
+                            <div class="option" id="lightTheme1024">Light</div>
                         </div>
                     </div>
                     <div class="option subSelect">Font size <i class="fa fa-chevron-right" aria-hidden="true"></i>
@@ -554,16 +554,16 @@
                             <div class="option" onclick="setFontSize(22);">22</div>
                         </div>
                     </div>
-                    <div class="option noSubSelect" id="safemodeToggle920">Safe mode
+                    <div class="option noSubSelect" id="safemodeToggle1024">Safe mode
                         <i class="fa fa-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option checked noSubSelect" id="editorButton920">Editor
+                    <div class="option checked noSubSelect" id="editorButton1024">Editor
                         <i class="fa fa-check-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option noSubSelect" id="fullscreenButton920">Fullscreen</div>
-                    <div class="option noSubSelect" id="editorFullscreenButton920">Editor Fullscreen</div>
-                    <div class="option noSubSelect" id="formatButton920">Format code</div>
-                    <div class="option noSubSelect" id="minimapToggle920">Minimap
+                    <div class="option noSubSelect" id="fullscreenButton1024">Fullscreen</div>
+                    <div class="option noSubSelect" id="editorFullscreenButton1024">Editor Fullscreen</div>
+                    <div class="option noSubSelect" id="formatButton1024">Format code</div>
+                    <div class="option noSubSelect" id="minimapToggle1024">Minimap
                         <i class="fa fa-square" aria-hidden="true"></i>
                     </div>
                     <div class="option subSelect" id="qrCodeHover" onmouseover="showQRCode();">QR Code Link <i
@@ -572,17 +572,17 @@
                             <div class="option" id="qrCodeImage">QR Code Image</div>
                         </div>
                     </div>
-                    <div class="option uncheck noSubSelect" id="debugButton920">Inspector
+                    <div class="option uncheck noSubSelect" id="debugButton1024">Inspector
                         <i class="fa fa-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option noSubSelect" id="metadataButton920">Metadata</div>
+                    <div class="option noSubSelect" id="metadataButton1024">Metadata</div>
                 </div>
             </div>
         </div>
 
         <div class="category right">
             <div class="button select" style="display: none;">
-                <span id="currentVersion920">v.</span>
+                <span id="currentVersion1024">v.</span>
                 <div class="toDisplay currentVersionDisplay">
                     <div class="option" onclick="setVersion('4.0');">4.0</div>
                     <div class="option" onclick="setVersion('3.0');">3.0</div>
@@ -667,28 +667,28 @@
     </div>
 
     <!-- Mobile -->
-    <div class="navbar navBar550 languageJS">
+    <div class="navbar navBarMobile languageJS">
         <div class="categoryTitle">
             <img class="logo" src="css/img/logo_v4.svg">
-            <div class="version"><span class="versionSub" id="mainTitle550"></span></div>
+            <div class="version"><span class="versionSub" id="mainTitleMobile"></span></div>
         </div>
 
         <div class="category languageJS" id="JStoTSbar">
-            <div class="buttonJStoTS languageTS" id="toTSbutton550">TS</div>
-            <div class="buttonJStoTS languageJS" id="toJSbutton550">JS</div>
+            <div class="buttonJStoTS languageTS" id="toTSbuttonMobile">TS</div>
+            <div class="buttonJStoTS languageJS" id="toJSbuttonMobile">JS</div>
             <div class="buttonSpaceKiller"></div>
-            <div class="button run" id="runButton550"><img src="css/img/playButton.svg"></div>
-            <div class="button" id="saveButton550"><img src="css/img/saveButton.svg"></div>
-            <div class="button removeOnPhone" id="zipButton550"><img src="css/img/downloadButton.svg"></div>
-            <div class="button" id="newButton550"><img src="css/img/newButton.svg"></div>
-            <div class="button removeOnPhone" id="clearButton550"><img src="css/img/clearButton.svg"></div>
+            <div class="button run" id="runButtonMobile"><img src="css/img/playButton.svg"></div>
+            <div class="button" id="saveButtonMobile"><img src="css/img/saveButton.svg"></div>
+            <div class="button removeOnPhone" id="zipButtonMobile"><img src="css/img/downloadButton.svg"></div>
+            <div class="button" id="newButtonMobile"><img src="css/img/newButton.svg"></div>
+            <div class="button removeOnPhone" id="clearButtonMobile"><img src="css/img/clearButton.svg"></div>
 
             <div class="button select"><img src="css/img/optionsButton.svg">
                 <div class="toDisplay">
                     <div class="option subSelect">Theme <i class="fa fa-chevron-right" aria-hidden="true"></i>
                         <div class="toDisplaySub">
-                            <div class="option selected" id="darkTheme550">Dark</div>
-                            <div class="option" id="lightTheme550">Light</div>
+                            <div class="option selected" id="darkThemeMobile">Dark</div>
+                            <div class="option" id="lightThemeMobile">Light</div>
                         </div>
                     </div>
                     <div class="option subSelect">Font size <i class="fa fa-chevron-right" aria-hidden="true"></i>
@@ -701,17 +701,17 @@
                             <div class="option" onclick="setFontSize(22);">22</div>
                         </div>
                     </div>
-                    <div class="option noSubSelect" id="safemodeToggle550">Safe mode
+                    <div class="option noSubSelect" id="safemodeToggleMobile">Safe mode
                         <i class="fa fa-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option checked noSubSelect" id="editorButton550">Editor
+                    <div class="option checked noSubSelect" id="editorButtonMobile">Editor
                         <i class="fa fa-check-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option nosubselect" id="fullscreenButton550" style="display: none">Fullscreen</div>
-                    <div class="option nosubselect" id="editorFullscreenButton550" style="display: none">Editor
+                    <div class="option nosubselect" id="fullscreenButtonMobile" style="display: none">Fullscreen</div>
+                    <div class="option nosubselect" id="editorFullscreenButtonMobile" style="display: none">Editor
                         Fullscreen</div>
-                    <div class="option nosubselect" id="formatButton550">Format code</div>
-                    <div class="option nosubselect" id="minimapToggle550">Minimap
+                    <div class="option nosubselect" id="formatButtonMobile">Format code</div>
+                    <div class="option nosubselect" id="minimapToggleMobile">Minimap
                         <i class="fa fa-square" aria-hidden="true"></i>
                     </div>
                     <div class="option subSelect" id="qrCodeHover" onmouseover="showQRCode();">QR Code Link <i
@@ -720,10 +720,10 @@
                             <div class="option" id="qrCodeImage">QR Code Image</div>
                         </div>
                     </div>
-                    <div class="option uncheck noSubSelect" id="debugButton550">Inspector
+                    <div class="option uncheck noSubSelect" id="debugButtonMobile">Inspector
                         <i class="fa fa-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option nosubselect" id="metadataButton550">Metadata</div>
+                    <div class="option nosubselect" id="metadataButtonMobile">Metadata</div>
                     <div class="option subSelect">Links / Tools <i class="fa fa-chevron-right" aria-hidden="true"></i>
                         <div class="toDisplaySub displayFooterLinks">
                             <div class="option link">
@@ -749,7 +749,7 @@
 
         <div class="category right">
             <div class="button select" style="display: none;">
-                <span id="currentVersion550">v.</span>
+                <span id="currentVersionMobile">v.</span>
                 <div class="toDisplay currentVersionDisplay">
                     <div class="option" onclick="setVersion('4.0');">4.0</div>
                     <div class="option" onclick="setVersion('3.0');">3.0</div>

Playground/index-local.html

@@ -16,7 +16,7 @@
     <link rel="stylesheet" href="https://use.typekit.net/cta4xsb.css">
     <link rel="stylesheet" href="css/index.css" />
     <link rel="stylesheet" href="css/index710.css" />
-    <link rel="stylesheet" href="css/index550.css" />
+    <link rel="stylesheet" href="css/indexMobile.css" />
 
     <!-- Pep -->
     <script src="https://code.jquery.com/pep/0.4.2/pep.min.js"></script>
@@ -115,29 +115,29 @@
     </div>
 
     <!-- Mid-size screens -->
-    <div class="navbar navBar920 languageJS">
+    <div class="navbar navBar1024 languageJS">
         <div class="categoryTitle">
             <img class="logo" src="css/img/logo_v4.svg">
-            <div class="version"><span class="versionSub" id="mainTitle920"></span></div>
+            <div class="version"><span class="versionSub" id="mainTitle1024"></span></div>
         </div>
 
         <div class="category languageJS" id="JStoTSbar">
-            <div class="buttonJStoTS languageTS" id="toTSbutton920">TS</div>
-            <div class="buttonJStoTS languageJS" id="toJSbutton920">JS</div>
+            <div class="buttonJStoTS languageTS" id="toTSbutton1024">TS</div>
+            <div class="buttonJStoTS languageJS" id="toJSbutton1024">JS</div>
             <div class="buttonSpaceKiller"></div>
-            <div class="button run" id="runButton920"><img src="css/img/playButton.svg"></div>
-            <div class="button" id="saveButton920"><img src="css/img/saveButton.svg"></div>
-            <div class="button removeOnPhone" id="zipButton920"><img src="css/img/downloadButton.svg"></div>
-            <div class="button" id="newButton920"><img src="css/img/newButton.svg"></div>
-            <div class="button removeOnPhone" id="clearButton920"><img src="css/img/clearButton.svg"></div>
+            <div class="button run" id="runButton1024"><img src="css/img/playButton.svg"></div>
+            <div class="button" id="saveButton1024"><img src="css/img/saveButton.svg"></div>
+            <div class="button removeOnPhone" id="zipButton1024"><img src="css/img/downloadButton.svg"></div>
+            <div class="button" id="newButton1024"><img src="css/img/newButton.svg"></div>
+            <div class="button removeOnPhone" id="clearButton1024"><img src="css/img/clearButton.svg"></div>
 
             <div class="button select"><img src="css/img/optionsButton.svg">
                 <div class="toDisplay">
                     <div class="option subSelect">Theme <i class="fa fa-chevron-right" aria-hidden="true"></i>
 
                         <div class="toDisplaySub">
-                            <div class="option selected" id="darkTheme920">Dark</div>
-                            <div class="option" id="lightTheme920">Light</div>
+                            <div class="option selected" id="darkTheme1024">Dark</div>
+                            <div class="option" id="lightTheme1024">Light</div>
                         </div>
                     </div>
                     <div class="option subSelect">Font size <i class="fa fa-chevron-right" aria-hidden="true"></i>
@@ -150,16 +150,16 @@
                             <div class="option" onclick="setFontSize(22);">22</div>
                         </div>
                     </div>
-                    <div class="option noSubSelect" id="safemodeToggle920">Safe mode
+                    <div class="option noSubSelect" id="safemodeToggle1024">Safe mode
                         <i class="fa fa-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option checked noSubSelect" id="editorButton920">Editor
+                    <div class="option checked noSubSelect" id="editorButton1024">Editor
                         <i class="fa fa-check-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option noSubSelect" id="fullscreenButton920">Fullscreen</div>
-                    <div class="option noSubSelect" id="editorFullscreenButton920">Editor Fullscreen</div>
-                    <div class="option noSubSelect" id="formatButton920">Format code</div>
-                    <div class="option noSubSelect" id="minimapToggle920">Minimap
+                    <div class="option noSubSelect" id="fullscreenButton1024">Fullscreen</div>
+                    <div class="option noSubSelect" id="editorFullscreenButton1024">Editor Fullscreen</div>
+                    <div class="option noSubSelect" id="formatButton1024">Format code</div>
+                    <div class="option noSubSelect" id="minimapToggle1024">Minimap
                         <i class="fa fa-square" aria-hidden="true"></i>
                     </div>
                     <div class="option subSelect" id="qrCodeHover" onmouseover="showQRCode();">QR Code Link <i
@@ -168,17 +168,17 @@
                             <div class="option" id="qrCodeImage">QR Code Image</div>
                         </div>
                     </div>
-                    <div class="option uncheck noSubSelect" id="debugButton920">Inspector
+                    <div class="option uncheck noSubSelect" id="debugButton1024">Inspector
                         <i class="fa fa-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option noSubSelect" id="metadataButton920">Metadata</div>
+                    <div class="option noSubSelect" id="metadataButton1024">Metadata</div>
                 </div>
             </div>
         </div>
 
         <div class="category right">
             <div class="button select" style="display: none;">
-                <span id="currentVersion920">v.</span>
+                <span id="currentVersion1024">v.</span>
                 <div class="toDisplay currentVersionDisplay">
                     <div class="option" onclick="setVersion('4.0');">4.0</div>
                     <div class="option" onclick="setVersion('3.0');">3.0</div>
@@ -263,28 +263,28 @@
     </div>
 
     <!-- Mobile -->
-    <div class="navbar navBar550 languageJS">
+    <div class="navbar navBarMobile languageJS">
         <div class="categoryTitle">
             <img class="logo" src="css/img/logo_v4.svg">
-            <div class="version"><span class="versionSub" id="mainTitle550"></span></div>
+            <div class="version"><span class="versionSub" id="mainTitleMobile"></span></div>
         </div>
 
         <div class="category languageJS" id="JStoTSbar">
-            <div class="buttonJStoTS languageTS" id="toTSbutton550">TS</div>
-            <div class="buttonJStoTS languageJS" id="toJSbutton550">JS</div>
+            <div class="buttonJStoTS languageTS" id="toTSbuttonMobile">TS</div>
+            <div class="buttonJStoTS languageJS" id="toJSbuttonMobile">JS</div>
             <div class="buttonSpaceKiller"></div>
-            <div class="button run" id="runButton550"><img src="css/img/playButton.svg"></div>
-            <div class="button" id="saveButton550"><img src="css/img/saveButton.svg"></div>
-            <div class="button removeOnPhone" id="zipButton550"><img src="css/img/downloadButton.svg"></div>
-            <div class="button" id="newButton550"><img src="css/img/newButton.svg"></div>
-            <div class="button removeOnPhone" id="clearButton550"><img src="css/img/clearButton.svg"></div>
+            <div class="button run" id="runButtonMobile"><img src="css/img/playButton.svg"></div>
+            <div class="button" id="saveButtonMobile"><img src="css/img/saveButton.svg"></div>
+            <div class="button removeOnPhone" id="zipButtonMobile"><img src="css/img/downloadButton.svg"></div>
+            <div class="button" id="newButtonMobile"><img src="css/img/newButton.svg"></div>
+            <div class="button removeOnPhone" id="clearButtonMobile"><img src="css/img/clearButton.svg"></div>
 
             <div class="button select"><img src="css/img/optionsButton.svg">
                 <div class="toDisplay">
                     <div class="option subSelect">Theme <i class="fa fa-chevron-right" aria-hidden="true"></i>
                         <div class="toDisplaySub">
-                            <div class="option selected" id="darkTheme550">Dark</div>
-                            <div class="option" id="lightTheme550">Light</div>
+                            <div class="option selected" id="darkThemeMobile">Dark</div>
+                            <div class="option" id="lightThemeMobile">Light</div>
                         </div>
                     </div>
                     <div class="option subSelect">Font size <i class="fa fa-chevron-right" aria-hidden="true"></i>
@@ -297,17 +297,17 @@
                             <div class="option" onclick="setFontSize(22);">22</div>
                         </div>
                     </div>
-                    <div class="option noSubSelect" id="safemodeToggle550">Safe mode
+                    <div class="option noSubSelect" id="safemodeToggleMobile">Safe mode
                         <i class="fa fa-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option checked noSubSelect" id="editorButton550">Editor
+                    <div class="option checked noSubSelect" id="editorButtonMobile">Editor
                         <i class="fa fa-check-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option nosubselect" id="fullscreenButton550" style="display: none">Fullscreen</div>
-                    <div class="option nosubselect" id="editorFullscreenButton550" style="display: none">Editor
+                    <div class="option nosubselect" id="fullscreenButtonMobile" style="display: none">Fullscreen</div>
+                    <div class="option nosubselect" id="editorFullscreenButtonMobile" style="display: none">Editor
                         Fullscreen</div>
-                    <div class="option nosubselect" id="formatButton550">Format code</div>
-                    <div class="option nosubselect" id="minimapToggle550">Minimap
+                    <div class="option nosubselect" id="formatButtonMobile">Format code</div>
+                    <div class="option nosubselect" id="minimapToggleMobile">Minimap
                         <i class="fa fa-square" aria-hidden="true"></i>
                     </div>
                     <div class="option subSelect" id="qrCodeHover" onmouseover="showQRCode();">QR Code Link <i
@@ -316,10 +316,10 @@
                             <div class="option" id="qrCodeImage">QR Code Image</div>
                         </div>
                     </div>
-                    <div class="option uncheck noSubSelect" id="debugButton550">Inspector
+                    <div class="option uncheck noSubSelect" id="debugButtonMobile">Inspector
                         <i class="fa fa-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option nosubselect" id="metadataButton550">Metadata</div>
+                    <div class="option nosubselect" id="metadataButtonMobile">Metadata</div>
                     <div class="option subSelect">Links / Tools <i class="fa fa-chevron-right" aria-hidden="true"></i>
                         <div class="toDisplaySub displayFooterLinks">
                             <div class="option link">
@@ -345,7 +345,7 @@
 
         <div class="category right">
             <div class="button select" style="display: none;">
-                <span id="currentVersion550">v.</span>
+                <span id="currentVersionMobile">v.</span>
                 <div class="toDisplay currentVersionDisplay">
                     <div class="option" onclick="setVersion('4.0');">4.0</div>
                     <div class="option" onclick="setVersion('3.0');">3.0</div>

Playground/index.html

@@ -9,8 +9,7 @@
 
     <link rel="stylesheet" href="https://use.typekit.net/cta4xsb.css" />
     <link rel="stylesheet" href="css/index.css" />
-    <link rel="stylesheet" href="css/index710.css" />
-    <link rel="stylesheet" href="css/index550.css" />
+    <link rel="stylesheet" href="css/index_mobile.css" />
 
     <!-- Pep -->
     <script src="js/libs/pep.min.js"></script>
@@ -127,29 +126,29 @@
     </div>
 
     <!-- Mid-size screens -->
-    <div class="navbar navBar920 languageJS">
+    <div class="navbar navBar1024 languageJS">
         <div class="categoryTitle">
             <img class="logo" src="css/img/logo_v4.svg">
-            <div class="version"><span class="versionSub" id="mainTitle920"></span></div>
+            <div class="version"><span class="versionSub" id="mainTitle1024"></span></div>
         </div>
 
         <div class="category languageJS" id="JStoTSbar">
-            <div class="buttonJStoTS languageTS" id="toTSbutton920">TS</div>
-            <div class="buttonJStoTS languageJS" id="toJSbutton920">JS</div>
+            <div class="buttonJStoTS languageTS" id="toTSbutton1024">TS</div>
+            <div class="buttonJStoTS languageJS" id="toJSbutton1024">JS</div>
             <div class="buttonSpaceKiller"></div>
-            <div class="button run" id="runButton920"><img src="css/img/playButton.svg"></div>
-            <div class="button" id="saveButton920"><img src="css/img/saveButton.svg"></div>
-            <div class="button removeOnPhone" id="zipButton920"><img src="css/img/downloadButton.svg"></div>
-            <div class="button" id="newButton920"><img src="css/img/newButton.svg"></div>
-            <div class="button removeOnPhone" id="clearButton920"><img src="css/img/clearButton.svg"></div>
+            <div class="button run" id="runButton1024"><img src="css/img/playButton.svg"></div>
+            <div class="button" id="saveButton1024"><img src="css/img/saveButton.svg"></div>
+            <div class="button removeOnPhone" id="zipButton1024"><img src="css/img/downloadButton.svg"></div>
+            <div class="button" id="newButton1024"><img src="css/img/newButton.svg"></div>
+            <div class="button removeOnPhone" id="clearButton1024"><img src="css/img/clearButton.svg"></div>
 
             <div class="button select"><img src="css/img/optionsButton.svg">
                 <div class="toDisplay">
                     <div class="option subSelect">Theme <i class="fa fa-chevron-right" aria-hidden="true"></i>
 
                         <div class="toDisplaySub">
-                            <div class="option selected" id="darkTheme920">Dark</div>
-                            <div class="option" id="lightTheme920">Light</div>
+                            <div class="option selected" id="darkTheme1024">Dark</div>
+                            <div class="option" id="lightTheme1024">Light</div>
                         </div>
                     </div>
                     <div class="option subSelect">Font size <i class="fa fa-chevron-right" aria-hidden="true"></i>
@@ -162,16 +161,16 @@
                             <div class="option" onclick="settingsPG.setFontSize(22);">22</div>
                         </div>
                     </div>
-                    <div class="option noSubSelect" id="safemodeToggle920">Safe mode
+                    <div class="option noSubSelect" id="safemodeToggle1024">Safe mode
                         <i class="fa fa-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option checked noSubSelect" id="editorButton920">Editor
+                    <div class="option checked noSubSelect" id="editorButton1024">Editor
                         <i class="fa fa-check-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option noSubSelect" id="fullscreenButton920">Fullscreen</div>
-                    <div class="option noSubSelect" id="editorFullscreenButton920">Editor Fullscreen</div>
-                    <div class="option noSubSelect" id="formatButton920">Format code</div>
-                    <div class="option noSubSelect" id="minimapToggle920">Minimap
+                    <div class="option noSubSelect" id="fullscreenButton1024">Fullscreen</div>
+                    <div class="option noSubSelect" id="editorFullscreenButton1024">Editor Fullscreen</div>
+                    <div class="option noSubSelect" id="formatButton1024">Format code</div>
+                    <div class="option noSubSelect" id="minimapToggle1024">Minimap
                         <i class="fa fa-square" aria-hidden="true"></i>
                     </div>
                     <div class="option subSelect" id="qrCodeHover" onmouseover="showQRCode();">QR Code Link <i
@@ -180,91 +179,17 @@
                             <div class="option" id="qrCodeImage">QR Code Image</div>
                         </div>
                     </div>
-                    <div class="option uncheck noSubSelect" id="debugButton920">Inspector
+                    <div class="option uncheck noSubSelect" id="debugButton1024">Inspector
                         <i class="fa fa-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option noSubSelect" id="metadataButton920">Metadata</div>
+                    <div class="option noSubSelect" id="metadataButton1024">Metadata</div>
                 </div>
             </div>
         </div>
 
         <div class="category right">
             <div class="button select" style="display: none;">
-                <span id="currentVersion920">v.</span>
-                <div class="toDisplay currentVersionDisplay">
-                    <div class="option" onclick="setVersion('4.0');">4.0</div>
-                    <div class="option" onclick="setVersion('3.0');">3.0</div>
-                </div>
-            </div>
-            <div class="button select"><img class="examplesButton" src="css/img/examplesButton.svg"></div>
-        </div>
-    </div>
-
-    <!-- Little screens -->
-    <div class="navbar navBar710 languageJS">
-        <div class="categoryTitle">
-            <img class="logo" src="css/img/logo_v4.svg">
-            <div class="version"><span class="versionSub" id="mainTitle710"></span></div>
-        </div>
-
-        <div class="category languageJS" id="JStoTSbar">
-            <div class="buttonJStoTS languageTS" id="toTSbutton710">TS</div>
-            <div class="buttonJStoTS languageJS" id="toJSbutton710">JS</div>
-            <div class="buttonSpaceKiller"></div>
-            <div class="button run" id="runButton710"><img src="css/img/playButton.svg"></div>
-            <div class="button" id="saveButton710"><img src="css/img/saveButton.svg"></div>
-            <div class="button removeOnPhone" id="zipButton710"><img src="css/img/downloadButton.svg"></div>
-            <div class="button" id="newButton710"><img src="css/img/newButton.svg"></div>
-            <div class="button removeOnPhone" id="clearButton710"><img src="css/img/clearButton.svg"></div>
-
-            <div class="button select"><img src="css/img/optionsButton.svg">
-                <div class="toDisplay">
-                    <div class="option subSelect">Theme <i class="fa fa-chevron-right" aria-hidden="true"></i>
-
-                        <div class="toDisplaySub">
-                            <div class="option selected" id="darkTheme710">Dark</div>
-                            <div class="option" id="lightTheme710">Light</div>
-                        </div>
-                    </div>
-                    <div class="option subSelect">Font size <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub displayFontSize">
-                            <div class="option" onclick="settingsPG.setFontSize(12);">12</div>
-                            <div class="option selected" onclick="settingsPG.setFontSize(14);">14</div>
-                            <div class="option" onclick="settingsPG.setFontSize(16);">16</div>
-                            <div class="option" onclick="settingsPG.setFontSize(18);">18</div>
-                            <div class="option" onclick="settingsPG.setFontSize(20);">20</div>
-                            <div class="option" onclick="settingsPG.setFontSize(22);">22</div>
-                        </div>
-                    </div>
-                    <div class="option noSubSelect" id="safemodeToggle710">Safe mode
-                        <i class="fa fa-square" aria-hidden="true"></i>
-                    </div>
-                    <div class="option checked noSubSelect" id="editorButton710">Editor
-                        <i class="fa fa-check-square" aria-hidden="true"></i>
-                    </div>
-                    <div class="option noSubSelect" id="fullscreenButton710">Fullscreen</div>
-                    <div class="option noSubSelect" id="editorFullscreenButton710">Editor Fullscreen</div>
-                    <div class="option noSubSelect" id="formatButton710">Format code</div>
-                    <div class="option noSubSelect" id="minimapToggle710">Minimap
-                        <i class="fa fa-square" aria-hidden="true"></i>
-                    </div>
-                    <div class="option subSelect" id="qrCodeHover" onmouseover="showQRCode();">QR Code Link <i
-                            class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub">
-                            <div class="option" id="qrCodeImage">QR Code Image</div>
-                        </div>
-                    </div>
-                    <div class="option uncheck noSubSelect" id="debugButton710">Inspector
-                        <i class="fa fa-square" aria-hidden="true"></i>
-                    </div>
-                    <div class="option nosubselect" id="metadataButton710">Metadata</div>
-                </div>
-            </div>
-        </div>
-
-        <div class="category right">
-            <div class="button select" style="display: none;">
-                <span id="currentVersion710">v.</span>
+                <span id="currentVersion1024">v.</span>
                 <div class="toDisplay currentVersionDisplay">
                     <div class="option" onclick="setVersion('4.0');">4.0</div>
                     <div class="option" onclick="setVersion('3.0');">3.0</div>
@@ -275,24 +200,24 @@
     </div>
 
     <!-- Mobile -->
-    <div class="navbar navBar550 languageJS">
+    <div class="navbar navBarMobile languageJS">
         <div class="category languageJS" id="JStoTSbar">
             <div class="button select"><img src="css/img/hamburgerButton.svg">
                 <div class="toDisplay">
-                    <div class="option noSubSelect languageTS" id="toTSbutton550"><img src="css/img/logoTS.svg">TypeScript</div>
-                    <div class="option noSubSelect languageJS" id="toJSbutton550"><img src="css/img/logoJS.svg">JavaScript</div>
-                    <div class="option noSubSelect run" id="runButton550"><img src="css/img/playButton.svg">Run</div>
-                    <div class="option noSubSelect" id="saveButton550"><img src="css/img/saveButton.svg">Save</div>
-                    <div class="option noSubSelect" id="zipButton550"><img src="css/img/downloadButton.svg">Download
+                    <div class="option noSubSelect languageTS" id="toTSbuttonMobile"><img src="css/img/logoTS.svg">TypeScript</div>
+                    <div class="option noSubSelect languageJS" id="toJSbuttonMobile"><img src="css/img/logoJS.svg">JavaScript</div>
+                    <div class="option noSubSelect run" id="runButtonMobile"><img src="css/img/playButton.svg">Run</div>
+                    <div class="option noSubSelect" id="saveButtonMobile"><img src="css/img/saveButton.svg">Save</div>
+                    <div class="option noSubSelect" id="zipButtonMobile"><img src="css/img/downloadButton.svg">Download
                     </div>
-                    <div class="option noSubSelect" id="newButton550"><img src="css/img/newButton.svg">New</div>
-                    <div class="option noSubSelect" id="clearButton550"><img src="css/img/clearButton.svg">Clear</div>
-                    <div class="option noSubSelect" id="debugButton550"><img src="css/img/inspectorButton.svg">Inspector
+                    <div class="option noSubSelect" id="newButtonMobile"><img src="css/img/newButton.svg">New</div>
+                    <div class="option noSubSelect" id="clearButtonMobile"><img src="css/img/clearButton.svg">Clear</div>
+                    <div class="option noSubSelect" id="debugButtonMobile"><img src="css/img/inspectorButton.svg">Inspector
                     </div>
                     <div class="option subSelect"><img src="css/img/optionsButton.svg">Theme
                         <div class="toDisplaySub">
-                            <div class="option selected" id="darkTheme550">Dark</div>
-                            <div class="option" id="lightTheme550">Light</div>
+                            <div class="option selected" id="darkThemeMobile">Dark</div>
+                            <div class="option" id="lightThemeMobile">Light</div>
                         </div>
                     </div>
                     <div class="option subSelect"><img src="css/img/optionsButton.svg">Font size
@@ -307,17 +232,17 @@
                             <div class="option" onclick="settingsPG.setFontSize(22);">22</div>
                         </div>
                     </div>
-                    <div style="display: none;" class="option noSubSelect" id="safemodeToggle550">Safe mode
+                    <div style="display: none;" class="option noSubSelect" id="safemodeToggleMobile">Safe mode
                         <i class="fa fa-square" aria-hidden="true"></i>
                     </div>
-                    <div style="display: none;" class="option checked noSubSelect" id="editorButton550">Editor
+                    <div style="display: none;" class="option checked noSubSelect" id="editorButtonMobile">Editor
                         <i class="fa fa-check-square" aria-hidden="true"></i>
                     </div>
-                    <div style="display: none;" class="option nosubselect" id="fullscreenButton550" style="display: none">Fullscreen</div>
-                    <div style="display: none;" class="option nosubselect" id="editorFullscreenButton550" style="display: none">Editor
+                    <div style="display: none;" class="option nosubselect" id="fullscreenButtonMobile" style="display: none">Fullscreen</div>
+                    <div style="display: none;" class="option nosubselect" id="editorFullscreenButtonMobile" style="display: none">Editor
                         Fullscreen</div>
-                    <div class="option nosubselect" id="formatButton550"><img src="css/img/optionsButton.svg">Format code</div>
-                    <div style="display: none;" class="option nosubselect" id="minimapToggle550">Minimap
+                    <div class="option nosubselect" id="formatButtonMobile"><img src="css/img/optionsButton.svg">Format code</div>
+                    <div style="display: none;" class="option nosubselect" id="minimapToggleMobile">Minimap
                         <i class="fa fa-square" aria-hidden="true"></i>
                     </div>
                     <div class="option subSelect" id="qrCodeHover" onmouseover="showQRCode();"><img src="css/img/optionsButton.svg">QR Code Link
@@ -325,7 +250,7 @@
                             <div class="option" id="qrCodeImage">QR Code Image</div>
                         </div>
                     </div>
-                    <div class="option nosubselect" id="metadataButton550"><img
+                    <div class="option nosubselect" id="metadataButtonMobile"><img
                             src="css/img/metadataButton.svg">Metadata</div>
                     <div class="option nosubselect"><img class="examplesButton"
                             src="css/img/examplesButton.svg">Examples</div>
@@ -352,13 +277,13 @@
             </div>
             <div class="categoryTitle">
                 <img class="logo" src="css/img/logo_v4.svg">
-                <div class="version"><span class="versionSub" id="mainTitle550"></span></div>
+                <div class="version"><span class="versionSub" id="mainTitleMobile"></span></div>
             </div>
         </div>
 
         <div class="category right">
             <div class="button select" style="display: none;">
-                <span id="currentVersion550">v.</span>
+                <span id="currentVersionMobile">v.</span>
                 <div class="toDisplay currentVersionDisplay">
                     <div class="option" onclick="setVersion('4.0');">4.0</div>
                     <div class="option" onclick="setVersion('3.0');">3.0</div>

Playground/indexStable.html

@@ -15,7 +15,7 @@
     <link rel="stylesheet" href="https://use.typekit.net/cta4xsb.css" />
     <link rel="stylesheet" href="css/index.css" />
     <link rel="stylesheet" href="css/index710.css" />
-    <link rel="stylesheet" href="css/index550.css" />
+    <link rel="stylesheet" href="css/indexMobile.css" />
 
     <link rel="manifest" href="https://www.babylonjs.com/img/favicon/manifest.json">
     <meta name="msapplication-TileColor" content="#ffffff">
@@ -130,29 +130,29 @@
     </div>
 
     <!-- Mid-size screens -->
-    <div class="navbar navBar920 languageJS">
+    <div class="navbar navBar1024 languageJS">
         <div class="categoryTitle">
             <img class="logo" src="css/img/logo_v4.svg">
-            <div class="version"><span class="versionSub" id="mainTitle920"></span></div>
+            <div class="version"><span class="versionSub" id="mainTitle1024"></span></div>
         </div>
 
         <div class="category languageJS" id="JStoTSbar">
-            <div class="buttonJStoTS languageTS" id="toTSbutton920">TS</div>
-            <div class="buttonJStoTS languageJS" id="toJSbutton920">JS</div>
+            <div class="buttonJStoTS languageTS" id="toTSbutton1024">TS</div>
+            <div class="buttonJStoTS languageJS" id="toJSbutton1024">JS</div>
             <div class="buttonSpaceKiller"></div>
-            <div class="button run" id="runButton920"><img src="css/img/playButton.svg"></div>
-            <div class="button" id="saveButton920"><img src="css/img/saveButton.svg"></div>
-            <div class="button removeOnPhone" id="zipButton920"><img src="css/img/downloadButton.svg"></div>
-            <div class="button" id="newButton920"><img src="css/img/newButton.svg"></div>
-            <div class="button removeOnPhone" id="clearButton920"><img src="css/img/clearButton.svg"></div>
+            <div class="button run" id="runButton1024"><img src="css/img/playButton.svg"></div>
+            <div class="button" id="saveButton1024"><img src="css/img/saveButton.svg"></div>
+            <div class="button removeOnPhone" id="zipButton1024"><img src="css/img/downloadButton.svg"></div>
+            <div class="button" id="newButton1024"><img src="css/img/newButton.svg"></div>
+            <div class="button removeOnPhone" id="clearButton1024"><img src="css/img/clearButton.svg"></div>
 
             <div class="button select"><img src="css/img/optionsButton.svg">
                 <div class="toDisplay">
                     <div class="option subSelect">Theme <i class="fa fa-chevron-right" aria-hidden="true"></i>
 
                         <div class="toDisplaySub">
-                            <div class="option selected" id="darkTheme920">Dark</div>
-                            <div class="option" id="lightTheme920">Light</div>
+                            <div class="option selected" id="darkTheme1024">Dark</div>
+                            <div class="option" id="lightTheme1024">Light</div>
                         </div>
                     </div>
                     <div class="option subSelect">Font size <i class="fa fa-chevron-right" aria-hidden="true"></i>
@@ -165,16 +165,16 @@
                             <div class="option" onclick="setFontSize(22);">22</div>
                         </div>
                     </div>
-                    <div class="option noSubSelect" id="safemodeToggle920">Safe mode
+                    <div class="option noSubSelect" id="safemodeToggle1024">Safe mode
                         <i class="fa fa-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option checked noSubSelect" id="editorButton920">Editor
+                    <div class="option checked noSubSelect" id="editorButton1024">Editor
                         <i class="fa fa-check-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option noSubSelect" id="fullscreenButton920">Fullscreen</div>
-                    <div class="option noSubSelect" id="editorFullscreenButton920">Editor Fullscreen</div>
-                    <div class="option noSubSelect" id="formatButton920">Format code</div>
-                    <div class="option noSubSelect" id="minimapToggle920">Minimap
+                    <div class="option noSubSelect" id="fullscreenButton1024">Fullscreen</div>
+                    <div class="option noSubSelect" id="editorFullscreenButton1024">Editor Fullscreen</div>
+                    <div class="option noSubSelect" id="formatButton1024">Format code</div>
+                    <div class="option noSubSelect" id="minimapToggle1024">Minimap
                         <i class="fa fa-square" aria-hidden="true"></i>
                     </div>
                     <div class="option subSelect" id="qrCodeHover" onmouseover="showQRCode();">QR Code Link <i class="fa fa-chevron-right" aria-hidden="true"></i>
@@ -182,17 +182,17 @@
                             <div class="option" id="qrCodeImage">QR Code Image</div>
                         </div>
                     </div>
-                    <div class="option uncheck noSubSelect" id="debugButton920">Inspector
+                    <div class="option uncheck noSubSelect" id="debugButton1024">Inspector
                         <i class="fa fa-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option noSubSelect" id="metadataButton920">Metadata</div>
+                    <div class="option noSubSelect" id="metadataButton1024">Metadata</div>
                 </div>
             </div>
         </div>
 
         <div class="category right">
             <div class="button select" style="display: none;">
-                <span id="currentVersion920">v.</span>
+                <span id="currentVersion1024">v.</span>
                 <div class="toDisplay currentVersionDisplay">
                     <div class="option" onclick="setVersion('4.0');">4.0</div>
                     <div class="option" onclick="setVersion('3.0');">3.0</div>
@@ -276,28 +276,28 @@
     </div>
 
     <!-- Mobile -->
-    <div class="navbar navBar550 languageJS">
+    <div class="navbar navBarMobile languageJS">
         <div class="categoryTitle">
             <img class="logo" src="css/img/logo_v4.svg">
-            <div class="version"><span class="versionSub" id="mainTitle550"></span></div>
+            <div class="version"><span class="versionSub" id="mainTitleMobile"></span></div>
         </div>
 
         <div class="category languageJS" id="JStoTSbar">
-            <div class="buttonJStoTS languageTS" id="toTSbutton550">TS</div>
-            <div class="buttonJStoTS languageJS" id="toJSbutton550">JS</div>
+            <div class="buttonJStoTS languageTS" id="toTSbuttonMobile">TS</div>
+            <div class="buttonJStoTS languageJS" id="toJSbuttonMobile">JS</div>
             <div class="buttonSpaceKiller"></div>
-            <div class="button run" id="runButton550"><img src="css/img/playButton.svg"></div>
-            <div class="button" id="saveButton550"><img src="css/img/saveButton.svg"></div>
-            <div class="button removeOnPhone" id="zipButton550"><img src="css/img/downloadButton.svg"></div>
-            <div class="button" id="newButton550"><img src="css/img/newButton.svg"></div>
-            <div class="button removeOnPhone" id="clearButton550"><img src="css/img/clearButton.svg"></div>
+            <div class="button run" id="runButtonMobile"><img src="css/img/playButton.svg"></div>
+            <div class="button" id="saveButtonMobile"><img src="css/img/saveButton.svg"></div>
+            <div class="button removeOnPhone" id="zipButtonMobile"><img src="css/img/downloadButton.svg"></div>
+            <div class="button" id="newButtonMobile"><img src="css/img/newButton.svg"></div>
+            <div class="button removeOnPhone" id="clearButtonMobile"><img src="css/img/clearButton.svg"></div>
 
             <div class="button select"><img src="css/img/optionsButton.svg">
                 <div class="toDisplay">
                     <div class="option subSelect">Theme <i class="fa fa-chevron-right" aria-hidden="true"></i>
                         <div class="toDisplaySub">
-                            <div class="option selected" id="darkTheme550">Dark</div>
-                            <div class="option" id="lightTheme550">Light</div>
+                            <div class="option selected" id="darkThemeMobile">Dark</div>
+                            <div class="option" id="lightThemeMobile">Light</div>
                         </div>
                     </div>
                     <div class="option subSelect">Font size <i class="fa fa-chevron-right" aria-hidden="true"></i>
@@ -310,16 +310,16 @@
                             <div class="option" onclick="setFontSize(22);">22</div>
                         </div>
                     </div>
-                    <div class="option noSubSelect" id="safemodeToggle550">Safe mode
+                    <div class="option noSubSelect" id="safemodeToggleMobile">Safe mode
                         <i class="fa fa-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option checked noSubSelect" id="editorButton550">Editor
+                    <div class="option checked noSubSelect" id="editorButtonMobile">Editor
                         <i class="fa fa-check-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option nosubselect" id="fullscreenButton550" style="display: none">Fullscreen</div>
-                    <div class="option nosubselect" id="editorFullscreenButton550" style="display: none">Editor Fullscreen</div>
-                    <div class="option nosubselect" id="formatButton550">Format code</div>
-                    <div class="option nosubselect" id="minimapToggle550">Minimap
+                    <div class="option nosubselect" id="fullscreenButtonMobile" style="display: none">Fullscreen</div>
+                    <div class="option nosubselect" id="editorFullscreenButtonMobile" style="display: none">Editor Fullscreen</div>
+                    <div class="option nosubselect" id="formatButtonMobile">Format code</div>
+                    <div class="option nosubselect" id="minimapToggleMobile">Minimap
                         <i class="fa fa-square" aria-hidden="true"></i>
                     </div>
                     <div class="option subSelect" id="qrCodeHover" onmouseover="showQRCode();">QR Code Link <i class="fa fa-chevron-right" aria-hidden="true"></i>
@@ -327,10 +327,10 @@
                             <div class="option" id="qrCodeImage">QR Code Image</div>
                         </div>
                     </div>
-                    <div class="option uncheck noSubSelect" id="debugButton550">Inspector
+                    <div class="option uncheck noSubSelect" id="debugButtonMobile">Inspector
                         <i class="fa fa-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option nosubselect" id="metadataButton550">Metadata</div>
+                    <div class="option nosubselect" id="metadataButtonMobile">Metadata</div>
                     <div class="option subSelect">Links / Tools <i class="fa fa-chevron-right" aria-hidden="true"></i>
                         <div class="toDisplaySub displayFooterLinks">
                             <div class="option link">
@@ -356,7 +356,7 @@
 
         <div class="category right">
             <div class="button select" style="display: none;">
-                <span id="currentVersion550">v.</span>
+                <span id="currentVersionMobile">v.</span>
                 <div class="toDisplay currentVersionDisplay">
                     <div class="option" onclick="setVersion('4.0');">4.0</div>
                     <div class="option" onclick="setVersion('3.0');">3.0</div>

Playground/js/examples.js

@@ -70,7 +70,7 @@ class Examples {
     /**
      * Function to display the examples menu
      */
-    displayExamples = function() {
+    displayExamples() {
         this.isExamplesDisplayed = true;
         document.getElementById("fpsLabel").style.display = "none";
         document.getElementById("exampleList").style.display = "block";
@@ -84,7 +84,7 @@ class Examples {
     /**
      * Function to hide the examples menu
      */
-    hideExamples = function() {
+    hideExamples() {
         this.isExamplesDisplayed = false;
         document.getElementById("fpsLabel").style.display = "block";
         document.getElementById("exampleList").style.display = "none";

Playground/js/index.js

@@ -7,7 +7,7 @@ menuPG = new MenuPG();
 /**
  * Apply things to the differents menu sizes
  */
-var multipleSize = [1280, 920, 710, 550];
+var multipleSize = [1280, 1024, 'Mobile'];
 var setToMultipleID = function (id, thingToDo, param) {
     multipleSize.forEach(function (size) {
         if (thingToDo == "innerHTML") {

Playground/js/menuPG.js

@@ -9,31 +9,53 @@ class MenuPG {
         this.allSubItems = document.querySelectorAll('.toDisplaySub');
         this.allSubSelect = document.querySelectorAll('.subSelect');
         this.allNoSubSelect = document.querySelectorAll('.noSubSelect');
-        
+
         this.jsEditorElement = document.getElementById('jsEditor');
         this.canvasZoneElement = document.getElementById('canvasZone');
         this.switchWrapperCode = document.getElementById('switchWrapperCode');
         this.switchWrapperCanvas = document.getElementById('switchWrapperCanvas');
         this.fpsLabelElement = document.getElementById('fpsLabel');
-        this.navBar550 = document.getElementsByClassName('navBar550')[0];
-        
+        this.navBarMobile = document.getElementsByClassName('navBarMobile')[0];
+
+        // Check if mobile version
+        this.isMobileVersion = false;
+        if (this.navBarMobile.offsetHeight > 0) this.isMobileVersion = true;
+        window.onresize = function () {
+            if (!this.isMobileVersion && this.navBarMobile.offsetHeight > 0) {
+                this.isMobileVersion = true;
+                this.resizeBigCanvas();
+            }
+            else if (this.isMobileVersion && this.navBarMobile.offsetHeight == 0) {
+                this.isMobileVersion = false;
+                this.resizeSplitted();
+            }
+        }.bind(this);
+
+        // Click on BJS logo redirection to BJS homepage
+        let logos = document.getElementsByClassName('logo');
+        for (var i = 0; i < logos.length; i++) {
+            logos[i].addEventListener('click', function () {
+                window.open("https://babylonjs.com", "_target");
+            });
+        }
+
         // On click anywhere, remove displayed options
         window.addEventListener('click', this.removeallOptions);
 
         // In mobile mode, resize JSEditor and canvas
         this.switchWrapperCode.addEventListener('click', this.resizeBigJsEditor.bind(this));
         this.switchWrapperCanvas.addEventListener('click', this.resizeBigCanvas.bind(this));
-        document.getElementById('runButton550').addEventListener('click', this.resizeBigCanvas.bind(this));
-        
+        document.getElementById('runButtonMobile').addEventListener('click', this.resizeBigCanvas.bind(this));
+
         // Code editor by default.
         // TO DO - Check why it doesn't work.
-        if(this.navBar550.offsetHeight > 0) this.resizeBigJsEditor();
-        
+        if (this.navBarMobile.offsetHeight > 0) this.resizeBigJsEditor();
+
         // Handle click on select elements
         for (var index = 0; index < this.allSelect.length; index++) {
             this.allSelect[index].addEventListener('click', this.displayMenu.bind(this));
         }
-        
+
         // Handle mouseover / click on subSelect
         for (var index = 0; index < this.allSubSelect.length; index++) {
             var ss = this.allSubSelect[index];
@@ -44,7 +66,7 @@ class MenuPG {
             var ss = this.allNoSubSelect[index];
             ss.addEventListener('mouseenter', this.removeAllSubItems.bind(this));
         }
-        
+
         // Examples must remove all the other menus
         var examplesButton = document.getElementsByClassName("examplesButton");
         for (var i = 0; i < examplesButton.length; i++) {
@@ -55,7 +77,7 @@ class MenuPG {
     /**
      * Display children menu of the caller
      */
-    displayMenu = function (evt) {
+    displayMenu(evt) {
         if (evt.target.nodeName != "IMG") {
             evt.preventDefault();
             evt.stopPropagation();
@@ -85,27 +107,46 @@ class MenuPG {
     /**
      * Display children subMenu of the caller
      */
-    displaySubitems = function (evt) {
+    displaySubitems(evt) {
         // If it's in mobile mode, avoid the "mouseenter" bug
-        if(evt.type == "mouseenter" && this.navBar550.offsetHeight > 0) return;
+        if (evt.type == "mouseenter" && this.navBarMobile.offsetHeight > 0) return;
         this.removeAllSubItems();
-    
+
         var toDisplay = evt.target.querySelector('.toDisplaySub');
-        if (toDisplay) toDisplay.style.display = 'block';
+        if (toDisplay) {
+            toDisplay.style.display = 'block';
+
+            if (document.getElementsByClassName('navBarMobile')[0].offsetHeight > 0) {
+
+                var topBarHeight = 40;
+                var height = toDisplay.children.length * 33;
+                var parentTop = toDisplay.parentNode.getBoundingClientRect().top;
+                if ((height + parentTop) <= window.innerHeight) {
+                    toDisplay.style.top = parentTop + "px";
+                }
+                else {
+                    toDisplay.style.top = window.innerHeight - height + "px";
+                }
+            }
+        }
 
         evt.preventDefault();
         evt.stopPropagation();
     };
-    // Handle click on subOptions
-    clickOptionSub = function(evt) {
-        if(!this.navBar550.offsetHeight > 0) return; // If is not in mobile, this doesnt apply
-        if(!this.classList) return;
-    
-        if (this.classList.contains('link')) {
-            window.open(this.querySelector('a').href, '_new');
+    /**
+     * Handle click on subOptions
+     */
+    clickOptionSub(evt) {
+        var target = evt.target;
+        if (evt.target.tagName == "A") target = evt.target.parentNode;
+        if (!document.getElementsByClassName('navBarMobile')[0].offsetHeight > 0) return; // If is not in mobile, this doesnt apply
+        if (!target.classList) return;
+
+        if (target.classList.contains('link')) {
+            window.open(target.querySelector('a').href, '_new');
         }
-        if (!this.classList.contains('subSelect') && this.parentNode.style.display == 'block') {
-            this.parentNode.style.display = 'none'
+        if (!target.classList.contains('subSelect') && target.parentNode.style.display == 'block') {
+            target.parentNode.style.display = 'none'
         }
 
         evt.preventDefault();
@@ -115,7 +156,7 @@ class MenuPG {
     /**
      * Remove displayed subItems
      */
-    removeAllSubItems = function () {
+    removeAllSubItems() {
         for (var index = 0; index < this.allSubItems.length; index++) {
             this.allSubItems[index].style.display = 'none';
         }
@@ -123,9 +164,9 @@ class MenuPG {
     /**
      * Remove displayed options
      */
-    removeAllOptions = function () {
+    removeAllOptions() {
         this.removeAllSubItems();
-    
+
         for (var index = 0; index < this.allToDisplay.length; index++) {
             var a = this.allToDisplay[index];
             if (a.style.display == 'block') {
@@ -143,27 +184,44 @@ class MenuPG {
     /**
      * Hide the canvas and display JS editor
      */
-    resizeBigJsEditor = function() {
-        if(this.navBar550.offsetHeight > 0) {
+    resizeBigJsEditor() {
+        if (this.navBarMobile.offsetHeight > 0) {
             this.removeAllOptions();
             this.canvasZoneElement.style.width = '0';
             this.switchWrapperCode.style.display = 'none';
             this.fpsLabelElement.style.display = 'none';
             this.jsEditorElement.style.width = '100%';
+            this.jsEditorElement.style.display = 'block';
+            if (document.getElementsByClassName('gutter-horizontal').length > 0) document.getElementsByClassName('gutter-horizontal')[0].style.display = 'none';
             this.switchWrapperCanvas.style.display = 'block';
         }
     };
     /**
      * Hide the JS editor and display the canvas
      */
-    resizeBigCanvas = function() {
-        if(this.navBar550.offsetHeight > 0) {
+    resizeBigCanvas() {
+        if (this.navBarMobile.offsetHeight > 0) {
             this.removeAllOptions();
             this.jsEditorElement.style.width = '0';
+            this.jsEditorElement.style.display = 'none';
+            document.getElementsByClassName('gutter-horizontal')[0].style.display = 'none';
             this.switchWrapperCanvas.style.display = 'none';
             this.canvasZoneElement.style.width = '100%';
             this.switchWrapperCode.style.display = 'block';
             this.fpsLabelElement.style.display = 'block';
         }
     };
+    /**
+     * When someone resize from mobile to large screen version
+     */
+    resizeSplitted() {
+        this.removeAllOptions();
+        this.jsEditorElement.style.width = '50%';
+        this.jsEditorElement.style.display = 'block';
+        document.getElementsByClassName('gutter-horizontal')[0].style.display = 'block';
+        this.switchWrapperCanvas.style.display = 'block';
+        this.canvasZoneElement.style.width = '50%';
+        this.switchWrapperCode.style.display = 'block';
+        this.fpsLabelElement.style.display = 'block';
+    }
 };

Playground/js/monacoCreator.js

@@ -38,7 +38,7 @@ class MonacoCreator {
     /**
      * Load the Monaco Node module.
      */
-    loadMonaco = function () {
+    loadMonaco() {
         var xhr = new XMLHttpRequest();
 
         xhr.open('GET', "babylon.d.txt", true);
@@ -65,7 +65,7 @@ class MonacoCreator {
     /**
      * Function to (re)create the editor
      */
-    createMonacoEditor = function() {
+    createMonacoEditor() {
         var oldCode = "";
         if(this.jsEditor) {
             oldCode = this.jsEditor.getValue();

Playground/js/settingsPG.js

@@ -47,20 +47,20 @@ class SettingsPG {
 
     get ScriptLanguage() {
         return this.scriptLanguage;
-    }
+    };
     set ScriptLanguage(value) {
-        localStorage.setItem("bjs-playground-scriptLanguage", "TS");
+        localStorage.setItem("bjs-playground-scriptLanguage", value);
         this.scriptLanguage = value;
-    }
+    };
     get DefaultScene() {
         return this.defaultScene;
-    }
+    };
 
 
     /**
      * Change font size
      */
-    setFontSize = function (size) {
+    setFontSize(size) {
         this.fontSize = size;
         this.monacoCreator.jsEditor.updateOptions({ fontSize: size });
         var array = document.getElementsByClassName("displayFontSize");
@@ -76,7 +76,7 @@ class SettingsPG {
     /**
      * Toggle Typescript / Javascript language
      */
-    setScriptLanguage = function () {
+    setScriptLanguage() {
         for (var index = 0; index < this.elementForscriptLanguage.length; index++) {
             var obj = this.elementForscriptLanguage[index];
             var domObjArr = document.querySelectorAll(obj);
@@ -97,7 +97,7 @@ class SettingsPG {
     /**
      * Set the theme (dark / light)
      */
-    setTheme = function (theme) {
+    setTheme(theme) {
         localStorage.setItem("bjs-playground-theme", theme);
         // Get the Monaco theme name.
         // Change the selected button style
@@ -127,7 +127,7 @@ class SettingsPG {
             }
         }
     };
-    restoreTheme = function(monacoCreator) {
+    restoreTheme(monacoCreator) {
         this.setTheme(this.vsTheme, monacoCreator);
     };
 };

Playground/js/utils.js

@@ -6,7 +6,7 @@ class Utils {
     }
 
     // TO DO - Comment this
-    markDirty = function () {
+    markDirty() {
         if (monacoCreator.BlockEditorChange) return;
 
         // setToMultipleID("currentScript", "innerHTML", "Custom");
@@ -20,7 +20,7 @@ class Utils {
      * @param {String} errorMessage 
      * @param {String} errorEvent 
      */
-    showError = function(errorMessage, errorEvent) {
+    showError(errorMessage, errorEvent) {
         var errorContent =
             '<div class="alert alert-error"><button type="button" class="close" data-dismiss="alert">&times;</button>';
         if (errorEvent) {

Playground/todo.md

@@ -0,0 +1,23 @@
+**Mobile**
+
+- OK : Mobile version does not apply when I reduce the size of my desktop window
+- OK : We should not see anything (not even the splitbar when code panel is hidden
+- OK : Hambuger menu disapears sometimes
+- OK : No color for JS and TS
+- OK : Sub menus do not appear at the right place (in front of the main menu)
+- OK : No highlight state when clicking on a menu
+- Can't repro : fps is overlapping the header
+
+**Desktop**
+
+- ?? : Clicking on TS / JS does not change the color of the active one
+- No version selector
+- OK : Font sub menu on the right (not on the left)
+- OK : Babylonjs logo should take us to bjs homepage when clicked
+
+**Overall**
+
+- OK : No drop shadows on FPS and on main bar (no drop shadow at all actually)
+- Type face is incorrect (should be semi-condensed acumin. They are defined in the redlines)
+- OK : Should switch to mobile version at 1024px width
+- OK : Auto resize when from mobile to screen and reserved