Compare commits
2 Commits
1c807c2af4
...
82a5e4be62
Author | SHA1 | Date | |
---|---|---|---|
82a5e4be62 | |||
ffe93407c4 |
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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 %}
|
|
@ -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 %}
|
||||
|
|
Loading…
Reference in New Issue
Block a user