added layout for mobile

ts3-viewer/index.php

@@ -208,10 +208,17 @@
       }
 
       if(!document.getElementById(`cb_${tree.channelId}`).checked) {
-        placeholder.parentNode.style.display = 'none';
+        placeholder.parentNode.style.border = 'none';
+        $(placeholder.parentNode).animate({height: 0, padding: 0, margin: 0, opacity: 0});
         return;
       } else {
-        placeholder.parentNode.style.display = 'block';
+        placeholder.parentNode.style.border = '1px solid #ddd';
+        $(placeholder.parentNode).show(100).animate({
+          height: "400px",
+          padding: "20px 15px 15px 15px",
+          margin: "0 auto 30px auto",
+          opacity: 1
+        });
       }
       let series = [];
       function iterChilds(tree, prefix="") {

ts3-viewer/stylesheet.css

@@ -6,11 +6,11 @@ body {
 .wrapper {
 	display: grid;
 	grid-template-areas:
-		"header header"
-		"tree settings"
-		"tree graphs";
-	grid-template-columns: 400px auto;
-	grid-template-rows: auto 50px auto;
+    "header"
+    "settings"
+		"graphs"
+		"tree";
+
 	width: 100%;
 	grid-gap: 30px;
 }
@@ -24,11 +24,11 @@ body {
 }
 #tree {
 	grid-area: tree;
-  margin-left: 10px;
+  margin: 0 10px;
 }
 #settings {
 	grid-area: settings;
-  margin-right: 10px;
+  margin: 0 10px;
 }
 
 /* texts and spacers */
@@ -147,16 +147,14 @@ body {
 	flex-wrap: wrap;
 	align-content: flex-start;
 	align-items: stretch;
-  margin-right: 10px;
 }
 .demo-container {
 	box-sizing: border-box;
-	min-width: 850px;
-	min-height: 400px;
+	min-width: 100%;
 	max-width: 100vw;
-	max-height: 100vh;
+	height: 400px;
 	padding: 20px 15px 15px 15px;
-	margin: 15px auto 30px auto;
+	margin: 0 auto 30px auto;
 	border: 1px solid #ddd;
 	background: #fff;
 	background: linear-gradient(#f6f6f6 0, #fff 50px);
@@ -170,3 +168,26 @@ body {
 	height: 100%;
 	font-size: 14px;
 }
+
+@media (min-width: 600px) {
+  .wrapper {
+    grid-template-areas: 
+		"header header"
+		"tree settings"
+		"tree graphs";
+    grid-template-columns: 400px auto;
+	  grid-template-rows: auto 50px auto;
+  }
+  .demo-container {
+	  min-width: 850px;
+  }
+  #tree {
+    margin-left: 10px;
+  }
+  #settings {
+    margin-right: 10px;
+  }
+  #graphs {
+    margin-right: 10px;
+  }
+}