diff options
| -rw-r--r-- | static/app.js | 10 | ||||
| -rw-r--r-- | static/deck.css | 22 | ||||
| -rw-r--r-- | static/index.html | 5 | ||||
| -rw-r--r-- | tests/test_frontend.py | 1 |
4 files changed, 36 insertions, 2 deletions
diff --git a/static/app.js b/static/app.js index ce3ec62..d125d69 100644 --- a/static/app.js +++ b/static/app.js @@ -186,6 +186,16 @@ async function boot() { showTab(tabs[saved] ? saved : "Dashboard"); } +const fullscreenButton = document.getElementById("fullscreen"); +fullscreenButton?.addEventListener("click", async () => { + try { + if (document.fullscreenElement) await document.exitFullscreen(); + else await document.documentElement.requestFullscreen(); + } catch { + // the browser refused; nothing to do + } +}); + document.addEventListener("visibilitychange", () => { if (document.visibilityState === "visible") refreshers.forEach((fn) => fn()); }); diff --git a/static/deck.css b/static/deck.css index 90500ba..5bd8a5d 100644 --- a/static/deck.css +++ b/static/deck.css @@ -16,7 +16,27 @@ body { overflow: hidden; } -.tabs { flex: none; display: flex; gap: 6px; padding: 8px 14px 0; } +.topbar { + flex: none; + display: flex; + align-items: center; + gap: 8px; + padding: 8px 14px 0; +} +.tabs { flex: 1; display: flex; gap: 6px; min-width: 0; } +.fs { + flex: none; + font: inherit; + font-size: 18px; + line-height: 1; + color: var(--udt-subtext0); + background: transparent; + border: 1px solid transparent; + border-radius: 10px; + padding: 6px 12px; + cursor: pointer; +} +.fs:hover { background: var(--udt-surface1); color: var(--udt-text); } .tabs button { font: inherit; color: var(--udt-subtext0); diff --git a/static/index.html b/static/index.html index 24cdf77..958580f 100644 --- a/static/index.html +++ b/static/index.html @@ -14,7 +14,10 @@ <title>deck-it</title> </head> <body> -<nav id="tabs" class="tabs"></nav> +<header class="topbar"> + <nav id="tabs" class="tabs"></nav> + <button id="fullscreen" class="fs" aria-label="Toggle fullscreen">⛶</button> +</header> <div id="tab-body"></div> <script src="vendor/gridstack/gridstack-all.js"></script> <script type="module" src="app.js"></script> diff --git a/tests/test_frontend.py b/tests/test_frontend.py index 8c8fdb8..d86468d 100644 --- a/tests/test_frontend.py +++ b/tests/test_frontend.py @@ -85,6 +85,7 @@ class Frontend(unittest.TestCase): def test_tabbed_shell(self): self.assertIn(b'id="tabs"', self.get("/")[1]) self.assertIn(b'id="tab-body"', self.get("/")[1]) + self.assertIn(b'id="fullscreen"', self.get("/")[1]) app = self.get("/app.js")[1] for part in (b"deckit.tab", b"ensureTab", b"showTab"): self.assertIn(part, app) |