feat: made Controller.svelte a bit more responsive

This commit is contained in:
Laureηt 2021-12-14 14:33:27 +01:00
parent 29a363fc2c
commit 5638d605c8
No known key found for this signature in database
GPG key ID: D88C6B294FD40994
2 changed files with 73 additions and 38 deletions

View file

@ -7,11 +7,11 @@
websocket = new WebSocket('ws://localhost:6789/');
});
let passwordInput = document.querySelector('#password-text');
let divLogin = document.querySelector('#login');
let divDashboard = document.querySelector('#dashboard');
let stateList = document.querySelector('#stateList');
let saveButton = document.getElementById('save');
let passwordInput = document.querySelector('#password-text') as HTMLElement;
let divLogin = document.querySelector('#login') as HTMLElement;
let divDashboard = document.querySelector('#dashboard') as HTMLElement;
let stateList = document.querySelector('#stateList') as HTMLElement;
let saveButton = document.getElementById('save') as HTMLElement;
saveButton.onclick = function (event) {
websocket.send(JSON.stringify({ admin: 'save' }));
@ -43,7 +43,7 @@
const sendCreds = () => () => {
if (websocket) {
let message = JSON.stringify({ auth: passwordInput.value });
let message = JSON.stringify({ auth: (<HTMLInputElement>passwordInput).value });
websocket.send(message);
websocket.addEventListener('message', authSuccess);
}

View file

@ -74,29 +74,36 @@
</table>
<style lang="scss">
td {
text-align: center;
@media (orientation: landscape) {
button {
width: 10vh;
height: 10vh;
}
#start,
#select,
#l,
#r {
button {
width: 20vh;
}
}
#r,
#l {
padding-bottom: 10vh;
}
#right {
padding-right: 15vh;
}
}
@media (orientation: portrait) {
button {
width: 10vw;
height: 10vw;
}
}
#a,
#b {
button {
border-radius: 50%;
}
}
#left,
#right,
#up,
#down {
button {
border-radius: 10%;
}
}
#start,
#select,
@ -104,7 +111,6 @@
#r {
button {
width: 20vw;
border-radius: 25%;
}
}
@ -112,11 +118,40 @@
#l {
padding-bottom: 10vw;
}
#r {
text-align: right;
}
#right {
padding-right: 15vw;
}
}
td {
text-align: center;
&#r {
text-align: right;
}
&#start,
&#select,
&#l,
&#r {
button {
border-radius: 25%;
}
}
&#left,
&#right,
&#up,
&#down {
button {
border-radius: 10%;
}
}
&#a,
&#b {
button {
border-radius: 50%;
}
}
}
</style>