Merge

templates/display.html

@@ -58,9 +58,23 @@
     }
 
     displaylist list > a {
-        border: 2px solid black;
         padding: 1em;
     }
+
+    displaylist fallback {
+        padding: 1em;
+    }
+
+    list:not(:empty) + fallback {
+        display: none;
+    }
+
+    fallback {
+        display: grid;
+
+        place-content: center;
+        text-align: center;
+    }
 </style>
 {% endblock %}
 
@@ -68,6 +82,12 @@
 <displaylist hidden>
     <scrollcontainer>
         <list></list>
+        <fallback>
+            <span>
+                There is no displays available.<br>
+                Create new displays in edit mode.
+            </span>
+        </fallback>
     </scrollcontainer>
 </displaylist>
 <display></display>
@@ -78,7 +98,6 @@
 
     socket.on("connect", () => {
         socket.emit("display", {action: "list"});
-        //socket.emit("connect", {data: "ฅ^•ﻌ•^ฅ"});
     });
 
     socket.on("display", (json) => {
@@ -102,8 +121,6 @@
     });*/
 
     function onDisplayList(list) {
-        console.log(list);
-
         function add(item) {
             let displayOption = document.createElement("a");
             displayOption.innerText = item;

templates/edit.html

@@ -10,10 +10,6 @@
         socket.emit("display", {action: "list"}, ack = (list) => onDisplayListReceive(list));
     });
 
-    socket.on("msg", (data) => {
-        console.log(data);
-    });
-
     function onDisplayListReceive(list) {
         clearDisplayList();
 

templates/main.html

@@ -4,6 +4,7 @@
 <style>
     body {
         font-size: 5vw;
+        color: #EAEAEA;
     }
 
     main {
@@ -19,22 +20,23 @@
         place-content: center;
         place-items: center;
 
-        border: 2px solid black;
+        border: 2px solid #333;
 
-        color: white;
+        color: #919191;
         text-decoration: none;
 
         background-color: transparent;
 
-        transition: .2s ease background-color;
+        transition: .2s ease background-color, .2s ease color;
     }
 
     main a:hover, main a:focus {
-        background-color: #333;
+        background-color: #000;
+        color: #EAEAEA;
     }
 
     main a:active {
-        background-color: #555;
+        background-color: #333;
     }
 </style>
 {% endblock %}