Compare commits

..

No commits in common. "82a5e4be620cb5f377ac5236a4bf4db6692e1b66" and "1c807c2af4a37d53075ee3b66c1a7f1a95d6fef5" have entirely different histories.

3 changed files with 19 additions and 174 deletions

View File

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

View File

@ -2,153 +2,19 @@
{% block extend_head %} {% block extend_head %}
<script src="{{ url_for('static', filename='js/socket.io.js') }}"></script> <script src="{{ url_for('static', filename='js/socket.io.js') }}"></script>
<style>
body {
color: #EAEAEA;
}
display:before {
content: attr(title);
}
displaylist:before {
content: "Displays";
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> <script>
const displayList = document.getElementsByTagName("displaylist")[0];
const display = document.getElementsByTagName("display")[0];
const socket = io(); const socket = io();
socket.on("connect", () => { socket.on("connect", () => {
socket.emit("display", {action: "list"}); //socket.emit("connect", {data: "ฅ^•ﻌ•^ฅ"});
}); });
socket.on("display", (json) => { socket.on("msg", (data) => {
switch(json.action) { console.log(data);
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> </script>
{% endblock %} {% endblock %}
{% block content %}
{% endblock %}

View File

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