Compare commits
No commits in common. "82a5e4be620cb5f377ac5236a4bf4db6692e1b66" and "1c807c2af4a37d53075ee3b66c1a7f1a95d6fef5" have entirely different histories.
82a5e4be62
...
1c807c2af4
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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 %}
|
|
@ -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 %}
|
||||||
|
|
Loading…
Reference in New Issue
Block a user