Request click for floating actions buttons and add fullscreen toggle for better mobile use

This commit is contained in:
Ethanell 2021-03-09 10:53:10 +01:00
parent d831b3f835
commit 90545d82fe
2 changed files with 18 additions and 3 deletions

View file

@ -45,6 +45,14 @@ socket.on("setSlot", data => {
setSlot(data.name, data.data, ...data.position) setSlot(data.name, data.data, ...data.position)
}); });
document.getElementById("fullScreen").addEventListener("click", ev => {
ev.stopPropagation();
if (!document.fullscreenElement)
document.documentElement.requestFullscreen();
else if (document.exitFullscreen)
document.exitFullscreen();
});
deckSelect.addEventListener("change", ev => { deckSelect.addEventListener("change", ev => {
ev.stopPropagation(); ev.stopPropagation();
socket.emit("getDeck", deckSelect.value); socket.emit("getDeck", deckSelect.value);
@ -74,4 +82,5 @@ function setSlot(name, data, x, y) {
document.addEventListener("DOMContentLoaded", () => { document.addEventListener("DOMContentLoaded", () => {
M.AutoInit(); M.AutoInit();
M.FloatingActionButton.init(document.querySelector(".fixed-action-btn"), {hoverEnabled: false})
}); });

View file

@ -4,13 +4,19 @@ block content
h1.center OpenDeck h1.center OpenDeck
.container#deck .container#deck
.fixed-action-btn .fixed-action-btn.no-autoinit
a(href="#modal").btn-floating.btn-large.green.modal-trigger a.btn-floating.btn-large.green
i.large.material-icons toc i.large.material-icons menu
ul ul
li li
a(href="/settings").btn-floating.red a(href="/settings").btn-floating.red
i.material-icons settings i.material-icons settings
li
a(href="#modal").btn-floating.blue.modal-trigger
i.material-icons toc
li
a#fullScreen.btn-floating.yellow
i.material-icons fullscreen
#modal.modal #modal.modal
.modal-content .modal-content