fixed floating checkboxes

.gitignore

@@ -0,0 +1 @@
+deploy.sh

ts3-viewer/index.php

@@ -107,6 +107,7 @@
         el.appendChild(cnt);
         
         let label = document.createElement('label');
+        label.classList.add("name");
         label.htmlFor = `cb_${tree.channelId}`;
         el.appendChild(label);
 
@@ -125,13 +126,14 @@
       if(tree.events.length > 0)
         inp.nextSibling.textContent = tree.events[tree.events.length-1][2] != 0 ? tree.events[tree.events.length-1][2] : '';
 
-      inp.nextSibling.nextSibling.innerHTML = formatHeadings(tree.name);
+      inp.nextSibling.nextSibling.innerHTML = "";
+      inp.nextSibling.nextSibling.appendChild(formatHeadings(tree.name));
 
       let prevLi = {};
       let showSpacer = false;
       for(const channel of tree.children) {
         if(channel.clientCount == 0) {
-          showSpacer = formatHeadings(channel.name, false).length == 1;
+          showSpacer = tree.id == 0;
           continue;
         }
         let li = document.getElementById(`li_${channel.channelId}`);
@@ -145,7 +147,13 @@
             ul.appendChild(li);
         }
         if(showSpacer) {
-          li.classList.add("spacer");
+          let spacer = document.getElementById(`li_spacer_${channel.channelId}`);
+          if(!spacer) {
+            spacer = document.createElement('li');
+            spacer.classList.add("spacer");
+            spacer.id = `li_spacer_${channel.channelId}`;
+            ul.insertBefore(spacer, li);
+          }
           showSpacer = false;
         }
         prevLi = li;
@@ -153,21 +161,33 @@
       }
     }
     function formatHeadings(str, html = true) {
-      const res = /(?:\[(.)spacer[^\]]*\])?(.*)/.exec(str);
+      const res = /(?:\[(.?)spacer[^\]]*\])?(.*)/.exec(str);
       if(!html)
         return res[2];
+
+      var div = document.createElement("div");
+      div.classList.add("channel");
+      var span = document.createElement("span");
       switch(res[1]) {
         case '*':
-          return `<div class='channel'>${res[2].repeat(50)}</div>`;
+          res[2] = res[2].repeat(50);
+          break;
         case 'l':
-          return `<div class='channel' align='left'>${res[2]}</div>`;
+          div.classList.add("left");
+          break;
         case 'c':
-          return `<div class='channel' align='center'>${res[2]}</div>`;
+          div.classList.add("center");
+          break;
         case 'r':
-          return `<div class='channel' align='right'>${res[2]}</div>`;
+          div.classList.add("right");
+          break;
         default:
-          return `<div class='channel'>${res[2]}</div>`;
+          div.classList.add("normal");
+          break;
       }
+      span.textContent = res[2];
+      div.appendChild(span);
+      return div;
     }
 
     var plots = {};

ts3-viewer/stylesheet.css

@@ -2,6 +2,7 @@ body {
   font-family: Arial;
   margin: 0;
 }
+/* page layout */
 .wrapper {
 	display: grid;
 	grid-template-areas:
@@ -23,36 +24,123 @@ body {
 }
 #tree {
 	grid-area: tree;
-	clear: both;
   margin-left: 10px;
 }
-#tree li {
-  width: 100%;
+#settings {
+	grid-area: settings;
+  margin-right: 10px;
 }
+
+/* texts and spacers */
 #tree li.spacer {
-	margin-top: 20px;
+  padding-top: 20px;
 }
-#tree li.spacer > label .channel {
-	font-weight: bold;
+#tree .channel.header {
+  font-weight: bold;
 }
 
-#tree label .channel {
-	width: 100%;
+
+/* counts and checkboxes */
+#tree, #tree li {
+  display: grid;
+  grid-template-columns: auto 20px 20px;
+  align-content: start;
 }
-ul {
-	list-style-type: none;
-	padding-left: 10px;
-	border-top: dotted 1px grey;
-	border-left: solid 1px grey;
+#tree .name {
+  grid-row: 1/2;
+  grid-column: 1/2;
 }
-
 #tree .count {
-	float: right;
+  grid-row: 1/2;
+  grid-column: 2/3;
+  justify-self: end;
+  width: 100%;
 }
 #tree .checkbox {
-	float: right;
-	clear: right;
+  grid-row: 1/2;
+	grid-column: 3/4;
+}
+#tree ul {
+  grid-row: 2/3;
+  grid-column: 1/4;
+}
+
+/*tree borders */
+#tree ul {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  position: relative;
+}
+#tree li {
+  border-left: 2px solid #000;
+  margin-left: 1em;
+}
+#tree .name {
+  padding-left: 1em;
+  position: relative;
+}
+#tree li .name::before {
+  content:'';
+  position: absolute;
+  top: 0;
+  left: -2px;
+  bottom: 50%;
+  width: 100%;
+  border: 2px solid #000;
+  border-top: 0 none transparent;
+  border-right: 0 none transparent;
+  z-index: -10;
 }
+#tree .channel {
+  position: relative;
+  background-color: white;
+  font-weight: bold;
+}
+#tree .channel:first-child {
+  margin-left: 5px;
+}
+#tree .channel.normal {
+  font-weight: normal;
+}
+
+#tree .channel > span{
+  background-color: white;
+  padding: 0 5px;
+}
+#tree .channel.center {
+  background-color: transparent;
+  text-align: center;
+}
+#tree .channel.center > span::before {
+  content: '';
+  position: absolute;
+  height: 19px;
+  left: 50%;
+  right: 0;
+  background-color: white;
+  z-index: -1;
+}
+
+#tree .channel.right {
+  background-color: transparent;
+  text-align: right;
+}
+
+#tree ul > li:first-child::before {
+  content: '';
+  position: absolute;
+  top: calc(-0.5em - 3px);
+  height: 19px;
+  left: 1em;
+  border-left: 2px solid #000;
+}
+
+#tree ul > li:last-child {
+  border-left: 2px solid transparent;
+}
+
+/* graphs */
 #graphs {
 	grid-area: graphs;
 	display: flex;
@@ -82,8 +170,3 @@ ul {
 	height: 100%;
 	font-size: 14px;
 }
-
-#settings {
-	grid-area: settings;
-  margin-right: 10px;
-}