Compare commits

...

2 Commits

Author SHA1 Message Date
82a5e4be62 Theme 2019-12-26 21:59:42 +01:00
ffe93407c4 Fallback msg 2019-12-26 19:54:46 +01:00
3 changed files with 176 additions and 21 deletions

View File

@ -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;
}

View File

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

View File

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