Merge pull request #8576 from sebavan/master

yet another one

Playground/index.js

@@ -79,6 +79,12 @@ let checkBabylonVersionAsync= function () {
 }
 
 checkBabylonVersionAsync().then(() => {
+    if (typeof BABYLONDEVTOOLS !== 'undefined') {
+        var hostElement = document.getElementById("host-element");
+        BABYLON.Playground.Show(hostElement);
+        return;
+    }
+
     loadScriptAsync("/dist/babylon.playground.js").then(() => {
         var hostElement = document.getElementById("host-element");
         BABYLON.Playground.Show(hostElement);

Playground/src/scss/examples.scss

@@ -1,4 +1,4 @@
-#examples {    
+#examples {
     grid-row: 2;
     grid-column: 3;
     position: absolute;
@@ -9,6 +9,7 @@
     transform: translateX(380px);
     opacity: 0;
     transition: all 0.2s ease;
+    height: calc(100% - 90px);
 
     &.visible {
         transform: translateX(0);
@@ -18,7 +19,7 @@
     width: 380px;
     display: grid;
     grid-template-columns: 100%;
-    grid-template-rows: 60px 60px calc(100% - 120px);
+    grid-template-rows: 60px 60px 1fr;
     overflow: hidden;
 
     #examples-header {
@@ -62,7 +63,6 @@
         grid-row: 3;
         grid-column: 1;
         user-select: none;
-        height: calc(100vh - 210px);
 
         .example-category { 
             .example-category-title { 
@@ -129,9 +129,6 @@
 @media screen and (max-width: 1024px) {
     #examples {
         top: 40px;
-
-        #examples-list {
-            height: calc(100vh - 195px);
-        }
+        height: calc(100% - 75px);
     }
 }

Playground/src/scss/main.scss

@@ -8,7 +8,7 @@
     font-weight: normal;    
     display: grid;
     grid-template-columns: auto 1fr;
-    grid-template-rows: 55px 1fr 35px;
+    grid-template-rows: 55px calc(100% - 90px) 35px;
 }
 
 #pg-root-frame {
@@ -46,7 +46,7 @@
     grid-row: 2;
     grid-column: 1 / 3;
     overflow: hidden;
-    height: calc(100vh - 90px);
+    height: 100%;
 
     .pg-split-part {
         width: 100%;
@@ -84,10 +84,6 @@
 
 @media screen and (max-width: 1024px) {
     #pg-root {
-        grid-template-rows: 40px 1fr 35px;
-    }
-
-    #pg-split {
-        height: calc(100vh - 75px);
+        grid-template-rows: 40px calc(100% - 75px) 35px;
     }
 }