PG - Added subitems and media query for phones

Playground/css/index.css

@@ -140,6 +140,10 @@ body {
 .navbar .select {
     position: relative;
 }
+
+.navbar .select .subSelect {
+    position: relative; 
+}
 .navbar .select:after {
     font-family: 'FontAwesome', sans-serif;
     content: "\00a0 \00a0 \00a0 \f078";
@@ -153,6 +157,17 @@ body {
     min-width: 100%;
     display: none;
 }
+
+.navbar .select .subSelect .toDisplaySub {
+    border: 1px solid #7283a0;
+    position: absolute;
+    z-index: 10;
+    left: 100%;
+    top: 0;
+    min-width: 100%;
+    display: none;
+}
+
 .navbar .select .toDisplay .option {
     font-size: 0.9em;
     height: 35px;
@@ -441,7 +456,7 @@ body {
         display: none !important;
     }
 }
-@media (max-width: 1375px) {
+@media (max-width: 1475px) {
     .desktopOnly {
         display: none !important;
     }
@@ -456,4 +471,12 @@ body {
     .version {
         display : none !important;
     }
+}
+@media (max-width: 660px) {
+    .removeOnPhone {
+        display : none !important;
+    }
+    .category {
+        margin:0 !important;
+    }
 }

Playground/index.html

@@ -72,17 +72,18 @@
 
         <div class="category">
             <div class="button" id="newButton">New<i class="fa fa-file" aria-hidden="true"></i></div>
-            <div class="button" id="clearButton">Clear<i class="fa fa-trash" aria-hidden="true"></i></div>
+            <div class="button removeOnPhone" id="clearButton">Clear<i class="fa fa-trash" aria-hidden="true"></i></div>
         </div>
 
         <div class="category">
             <div class="button" id="saveButton">Save <i class="fa fa-floppy-o" aria-hidden="true"></i></div>
-            <div class="button" id="zipButton">Zip<i class="fa fa-download" aria-hidden="true"></i></div>
+            <div class="button removeOnPhone" id="zipButton">Zip<i class="fa fa-download" aria-hidden="true"></i></div>
         </div>
 
 
-        <div class="category desktopOnly">
-            <div class="button select"><span id="currentFontSize">Font: 14</span>
+        <!--<div class="category desktopOnly">-->
+
+        <!--<div class="button select"><span id="currentFontSize">Font: 14</span>
                 <div class="toDisplay">
                     <div class="option" onclick="setFontSize(12);">12</div>
                     <div class="option" onclick="setFontSize(14);">14</div>
@@ -91,26 +92,43 @@
                     <div class="option" onclick="setFontSize(20);">20</div>
                     <div class="option" onclick="setFontSize(22);">22</div>
                 </div>
-            </div>
-            <div class="button select">Theme
+            </div>-->
+
+        <!--<div class="button select">Theme
                 <div class="toDisplay">
                     <div class="option" id="darkTheme">Dark</div>
                     <div class="option" id="lightTheme">Light</div>
                 </div>
-            </div>
-        </div>
+            </div>-->
+        <!--</div>-->
         <div class="category desktopTabletOnly">
             <div class="button select">Settings
                 <div class="toDisplay">
+                    <div class="option subSelect">Theme <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub">
+                            <div class="option" id="darkTheme">Dark</div>
+                            <div class="option" id="lightTheme">Light</div>
+                        </div>
+                    </div>
+                    <div class="option subSelect"><span id="currentFontSize">Font: 14</span><i class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub">
+                            <div class="option" onclick="setFontSize(12);">12</div>
+                            <div class="option" onclick="setFontSize(14);">14</div>
+                            <div class="option" onclick="setFontSize(16);">16</div>
+                            <div class="option" onclick="setFontSize(18);">18</div>
+                            <div class="option" onclick="setFontSize(20);">20</div>
+                            <div class="option" onclick="setFontSize(22);">22</div>
+                        </div>
+                    </div>
                     <div class="option" id='safemodeToggle'>Safe mode <i class="fa fa-square-o" aria-hidden="true"></i></div>
                     <div class="option checked" id="editorButton">Editor <i class="fa fa-check-square" aria-hidden="true"></i>
                     </div>
                     <div class="option" id="fullscreenButton">Fullscreen</div>
-                    <div class="option" id="metadataButton">Metadata</div>
                 </div>
             </div>
 
             <div class="button check uncheck" id="debugButton">Debug layer</div>
+            <div class="button" id="metadataButton">Metadata</div>
         </div>
 
 
@@ -151,7 +169,7 @@
         <div class="links">
             <div class='link'><a target='_new' href="https://www.netlify.com/">Deployed by Netlify</a></div>
             <div class='link'> <a target='_new' href="http://www.html5gamedevs.com/forum/16-babylonjs/">Forum</a></div>
-            <div class='link'><a target='_new' href="https://www.babylonjs.com/sandbox">Sandbox</a></div>            
+            <div class='link'><a target='_new' href="https://www.babylonjs.com/sandbox">Sandbox</a></div>
             <div class='link'><a target='_new' href="https://doc.babylonjs.com">Documentation</a></div>
             <div class='link'><a target='_new' href="https://doc.babylonjs.com/playground">Search</a></div>
         </div>
@@ -185,4 +203,4 @@
     <script src="js/index.js"></script>
 </body>
 
-</html>
+</html>

Playground/js/actions.js

@@ -28,7 +28,7 @@
     for (var index = 0; index < allSelect.length; index++) {
         var s = allSelect[index];
         // Get child called to display
-        s.addEventListener('click', function (e) {
+        var displayItems = function (e) {
             var toDisplay = this.querySelector('.toDisplay');
             if (toDisplay) {
                 if (toDisplay.style.display == 'block') {
@@ -49,7 +49,36 @@
             }
             e.preventDefault();
             e.stopPropagation();
-        });
+        }
+        s.addEventListener('click', displayItems);
+
+        // Handle mouseover on subSelect
+        var allSubItems = document.querySelectorAll('.toDisplaySub');
+        var removeAllSubItems = function () {
+            for (var index = 0; index < allSubItems.length; index++) {
+                var tds = allSubItems[index];
+                if (tds.style.display == 'block') {
+                    tds.style.display = 'none';
+                }
+            }
+        }
+
+        var allSubSelect = document.querySelectorAll('.subSelect');
+        for (var index = 0; index < allSubSelect.length; index++) {
+            var ss = allSubSelect[index];
+            ss.addEventListener('mouseenter', function () {
+                var toDisplay = this.querySelector('.toDisplaySub');
+                if (toDisplay) {
+                    if (toDisplay.style.display == 'block') {
+                        toDisplay.style.display = 'none';
+                    } else {
+                        removeAllSubItems();
+                        toDisplay.style.display = 'block';
+                    }
+                }
+            })
+
+        }
     }
 
     document.querySelector('#safemodeToggle').addEventListener('click', function () {

Playground/package.json

@@ -10,5 +10,8 @@
   "license": "(Apache-2.0)",
   "devDependencies": {
     "monaco-editor": "^0.7.0"
+  },
+  "scripts": {
+    "test": "browser-sync start --server --files **/* --no-inject-changes --startPath index.html"
   }
 }