diff options
Diffstat (limited to 'static')
| -rw-r--r-- | static/app.js | 10 | ||||
| -rw-r--r-- | static/deck.css | 22 | ||||
| -rw-r--r-- | static/index.html | 5 |
3 files changed, 35 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> |