Theme

templates/display.html

@@ -3,6 +3,10 @@
 {% block extend_head %}
 <script src="{{ url_for('static', filename='js/socket.io.js') }}"></script>
 <style>
+    body {
+        color: #EAEAEA;
+    }
+
     display:before {
         content: attr(title);
     }
@@ -49,9 +53,24 @@
     }
 
     displaylist list > a {
-        border: 2px solid black;
+        border: 2px solid #333;
         padding: 1em;
     }
+
+    displaylist fallback {
+        padding: 1em;
+    }
+
+    list:not(:empty) + fallback {
+        display: none;
+    }
+
+    fallback {
+        display: grid;
+
+        place-content: center;
+        text-align: center;
+    }
 </style>
 {% endblock %}
 
@@ -59,6 +78,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>
@@ -69,7 +94,6 @@
 
     socket.on("connect", () => {
         socket.emit("display", {action: "list"});
-        //socket.emit("connect", {data: "ฅ^•ﻌ•^ฅ"});
     });
 
     socket.on("display", (json) => {
@@ -93,8 +117,6 @@
     });*/
 
     function onDisplayList(list) {
-        console.log(list);
-
         function add(item) {
             let displayOption = document.createElement("a");
             displayOption.innerText = item;
@@ -105,9 +127,6 @@
         for (item in list) {
             add(item);
         }
-        add("+");
-        add("+");
-        add("+");
 
         displayList.hidden = false;
     }

templates/edit.html

@@ -2,19 +2,153 @@
 
 {% block extend_head %}
 <script src="{{ url_for('static', filename='js/socket.io.js') }}"></script>
-<script>
+<style>
-    const socket = io();
+    body {
+        color: #EAEAEA;
+    }
 
-    socket.on("connect", () => {
+    display:before {
-        //socket.emit("connect", {data: "ฅ^•ﻌ•^ฅ"});
+        content: attr(title);
-    });
+    }
 
-    socket.on("msg", (data) => {
+    displaylist:before {
-        console.log(data);
+        content: "Displays";
-    });
+
-</script>
+        background-color: #333;
+        padding: 1em;
+    }
+
+    displaylist {
+        display: grid;
+        grid-template-rows: auto 1fr;
+
+        position: fixed;
+        top: 0;
+        left: 0;
+        height: 100%;
+        width: 100%;
+
+        background-color: #242424;
+
+        transition: transform .2s ease, opacity .2s ease;
+        transform: scale(1);
+        opacity: 1;
+    }
+
+    displaylist[hidden], displaylist:focus {
+        transform: scale(.96);
+        opacity: 0;
+    }
+
+    scrollcontainer {
+        display: block;
+        overflow: auto;
+    }
+
+    displaylist list {
+        display: grid;
+        gap: 1em;
+
+        padding: 1em;
+    }
+
+    displaylist list > a {
+        border: 2px solid #333;
+        padding: 1em;
+    }
+
+    displaylist fallback {
+        padding: 1em;
+    }
+
+    list:not(:empty) + fallback {
+        display: none;
+    }
+
+    fallback {
+        display: grid;
+
+        place-content: center;
+        text-align: center;
+
+        gap: 1em;
+    }
+
+    button {
+        display: grid;
+        place-content: center;
+        place-items: center;
+        
+        cursor: pointer;
+
+        border: 2px solid #333;
+
+        color: #919191;
+
+        background-color: transparent;
+
+        padding: 1em;
+
+        transition: .2s ease background-color, .2s ease color;
+    }
+
+    button:hover, button:focus {
+        background-color: #000;
+        color: #EAEAEA;
+    }
+</style>
 {% endblock %}
 
 {% block content %}
+<displaylist hidden>
+    <scrollcontainer>
+        <list></list>
+        <fallback>
+            <span>
+                There is no running displays.<br>
+                Create new display to continue.
+            </span>
+            <button>
+                <i class="fas fa-plus fa-2x"></i>
+                <span>New display</span>
+            </button>
+        </fallback>
+    </scrollcontainer>
+</displaylist>
+<display></display>
+<script>
+    const displayList = document.getElementsByTagName("displaylist")[0];
+    const display = document.getElementsByTagName("display")[0];
+    const socket = io();
 
+    socket.on("connect", () => {
+        socket.emit("display", {action: "list"});
+    });
+
+    socket.on("display", (json) => {
+        switch(json.action) {
+            default:
+                console.warn("Unknown data: " + json);
+                break;
+            case "list":
+                onDisplayList(json.value);
+                break;
+        }
+    });
+
+    function onDisplayList(list) {
+        function add(item) {
+            let displayOption = document.createElement("a");
+            displayOption.innerText = item;
+            displayList.getElementsByTagName("list")[0].appendChild(displayOption);
+        }
+
+        displayList.getElementsByTagName("list")[0].innerHTML = "";
+        for (item in list) {
+            add(item);
+        }
+
+        displayList.hidden = false;
+    }
+</script>
 {% endblock %}

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 %}