From a8c4c97294f984ebd337b34ce46218222eb2ca38 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andreas=20Kr=C3=BChlmann?= Date: Thu, 22 Jan 2026 21:43:51 +0100 Subject: [PATCH] Restructure dashboard --- src/main/resources/static/css/styles.css | 69 ++++++++++++++- src/main/resources/static/js/dashboard.js | 1 + src/main/resources/templates/dashboard.html | 95 ++++++++++----------- 3 files changed, 115 insertions(+), 50 deletions(-) diff --git a/src/main/resources/static/css/styles.css b/src/main/resources/static/css/styles.css index ab14151..dacbe0b 100644 --- a/src/main/resources/static/css/styles.css +++ b/src/main/resources/static/css/styles.css @@ -890,7 +890,6 @@ button:disabled:hover { .dashboard-grid { display: grid; gap: 20px; - grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); align-items: start; } @@ -984,6 +983,47 @@ button:disabled:hover { gap: 4px; } +.large-dashboard-tiles { + display: flex; + justify-content: space-evenly +} + +.large-dashboard-tiles a { + width: 200px; + height: 200px; + display: flex; + flex-direction: column; + gap: 8px; + padding: 16px; + border-radius: 12px; + border: 1px solid rgba(148, 163, 184, 0.35); + background: rgba(15, 23, 42, 0.75); + color: #e2e8f0; + text-decoration: none; + min-height: 140px; + transition: + border-color 0.2s ease, + background-color 0.2s ease, + transform 0.2s ease; + justify-content: space-evenly; + align-items: center; +} + +.large-dashboard-tiles a:hover, +.large-dashboard-tiles a:focus-visible { + border-color: rgba(226, 232, 240, 0.7); + background: rgba(30, 41, 59, 0.8); + transform: translateY(-1px); +} + +.large-dashboard-tiles a i { + font-size: 72px; +} + +.large-dashboard-tiles a span { + font-size: 18px; +} + .dashboard-action-copy strong { font-size: 15px; } @@ -2480,3 +2520,30 @@ button:disabled:hover { background: rgba(30, 41, 59, 0.4); color: #cbd5e1; } + +.control-list { + display: flex; + flex-direction: column; + gap: 8px; + max-height: 250px; + overflow-y: auto; + margin-top: 8px; +} + +.control-list .control { + padding: 12px; + display: grid; + grid-template-columns: 1fr auto; + background-color: #0f172a; + border: 1px solid #1f2937; + border-radius: 8px; +} + +.control-list .control .title-block { + display: flex; + flex-direction: column; + gap: 8px; +} + +.control-list .control input { +} diff --git a/src/main/resources/static/js/dashboard.js b/src/main/resources/static/js/dashboard.js index 1eb478c..c109730 100644 --- a/src/main/resources/static/js/dashboard.js +++ b/src/main/resources/static/js/dashboard.js @@ -275,6 +275,7 @@ async function fetchScriptSettings() { } async function saveScriptSettings() { + saveCanvasSettings() const allowChannelEmotesForAssets = elements.allowChannelEmotes?.checked ?? true; const allowSevenTvEmotesForAssets = elements.allowSevenTvEmotes?.checked ?? true; const allowScriptChatAccess = elements.allowScriptChat?.checked ?? true; diff --git a/src/main/resources/templates/dashboard.html b/src/main/resources/templates/dashboard.html index 20d9261..faefdc1 100644 --- a/src/main/resources/templates/dashboard.html +++ b/src/main/resources/templates/dashboard.html @@ -7,6 +7,13 @@ +
@@ -30,30 +37,26 @@ -
-
-

Navigation

-

Shortcuts

-

Jump into your overlay

-
- - Live - Open broadcast overlay - Launch your live overlay view. - - - Admin - Open admin console - Manage assets, scripts, and layout. - - - App - Application settings - Configure server-wide preferences. - -
-
+
+ + + Broadcast Overlay + + + + Admin Console + + + + Audit Log + + + + Application Settings + +
+

Settings

Overlay dimensions

@@ -68,42 +71,36 @@
-
- - -
- -
-

Script privacy

-

Script asset access

-

Control what data scripts can access in your channel.

-
-