imgfloat/server
1
0
Fork 0
mirror of https://github.com/imgfloat/server.git synced 2026-02-05 03:39:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Restructure dashboard

Browse Source
This commit is contained in:
Andreas Krühlmann
2026-01-22 21:43:51 +01:00
parent a46091f8cc
commit a8c4c97294
3 changed files with 115 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
src/main/resources/static/css/styles.css
View File

@@ -890,7 +890,6 @@ button:disabled:hover {
.dashboard-grid { .dashboard-grid {
display: grid; display: grid;
gap: 20px; gap: 20px;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
align-items: start; align-items: start;
} }
@@ -984,6 +983,47 @@ button:disabled:hover {
gap: 4px; 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 { .dashboard-action-copy strong {
font-size: 15px; font-size: 15px;
} }
@@ -2480,3 +2520,30 @@ button:disabled:hover {
background: rgba(30, 41, 59, 0.4); background: rgba(30, 41, 59, 0.4);
color: #cbd5e1; 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 {
}

1
src/main/resources/static/js/dashboard.js
View File

@@ -275,6 +275,7 @@ async function fetchScriptSettings() {
} }
async function saveScriptSettings() { async function saveScriptSettings() {
saveCanvasSettings()
const allowChannelEmotesForAssets = elements.allowChannelEmotes?.checked ?? true; const allowChannelEmotesForAssets = elements.allowChannelEmotes?.checked ?? true;
const allowSevenTvEmotesForAssets = elements.allowSevenTvEmotes?.checked ?? true; const allowSevenTvEmotesForAssets = elements.allowSevenTvEmotes?.checked ?? true;
const allowScriptChatAccess = elements.allowScriptChat?.checked ?? true; const allowScriptChatAccess = elements.allowScriptChat?.checked ?? true;

95
src/main/resources/templates/dashboard.html
View File

@@ -7,6 +7,13 @@
<meta name="_csrf_header" th:content="${_csrf.headerName}" /> <meta name="_csrf_header" th:content="${_csrf.headerName}" />
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
<link rel="stylesheet" href="/css/styles.css" /> <link rel="stylesheet" href="/css/styles.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
</head> </head>
<body class="dashboard-body" th:classappend="${isStaging} ? ' has-staging-banner' : ''"> <body class="dashboard-body" th:classappend="${isStaging} ? ' has-staging-banner' : ''">
<div th:insert="~{fragments/staging :: banner}"></div> <div th:insert="~{fragments/staging :: banner}"></div>
@@ -30,30 +37,26 @@
</div> </div>
</header> </header>
<div class="dashboard-grid"> <section class="large-dashboard-tiles">
<section class="card"> <a th:href="@{'/view/' + ${channel} + '/broadcast'}">
<p class="eyebrow">Navigation</p> <i class="fa-solid fa-tower-broadcast"></i>
<h3>Shortcuts</h3> <span>Broadcast Overlay</span>
<p class="muted">Jump into your overlay</p> </a>
<div class="dashboard-tile-grid"> <a th:href="@{'/view/' + ${channel} + '/admin'}">
<a class="dashboard-tile" th:href="@{'/view/' + ${channel} + '/broadcast'}"> <i class="fa-solid fa-layer-group"></i>
<span class="tile-icon">Live</span> <span>Admin Console</span>
<span class="tile-title">Open broadcast overlay</span> </a>
<span class="tile-subtitle">Launch your live overlay view.</span> <a th:href="@{'/view/' + ${channel} + '/audit'}">
</a> <i class="fa-solid fa-user-shield"></i>
<a class="dashboard-tile" th:href="@{'/view/' + ${channel} + '/admin'}"> <span>Audit Log</span>
<span class="tile-icon">Admin</span> </a>
<span class="tile-title">Open admin console</span> <a th:if="${isSystemAdmin}" href="/settings">
<span class="tile-subtitle">Manage assets, scripts, and layout.</span> <i class="fa-solid fa-gear"></i>
</a> <span>Application Settings</span>
<a class="dashboard-tile" th:if="${isSystemAdmin}" href="/settings"> </a>
<span class="tile-icon">App</span> </section>
<span class="tile-title">Application settings</span>
<span class="tile-subtitle">Configure server-wide preferences.</span>
</a>
</div>
</section>
<div class="dashboard-grid">
<section class="card"> <section class="card">
<p class="eyebrow">Settings</p> <p class="eyebrow">Settings</p>
<h3>Overlay dimensions</h3> <h3>Overlay dimensions</h3>
@@ -68,42 +71,36 @@
<input id="canvas-height" type="number" min="100" step="10" /> <input id="canvas-height" type="number" min="100" step="10" />
</label> </label>
</div> </div>
<div class="control-actions">
<button id="save-canvas-btn" type="button" onclick="saveCanvasSettings()">Save canvas size</button>
<span id="canvas-status" class="muted" role="status" aria-live="polite"></span>
</div>
</section>
<section class="card"> <h3>Integrations</h3>
<p class="eyebrow">Script privacy</p> <p class="muted">Set access policy for script assets.</p>
<h3>Script asset access</h3>
<p class="muted">Control what data scripts can access in your channel.</p> <div class="control-list">
<div class="dashboard-tile-grid"> <label class="control">
<label class="dashboard-tile dashboard-toggle-tile"> <div class="title-block">
<div class="tile-row"> <p class="eyebrow">Twitch emotes</p>
<span class="tile-title">Twitch emotes</span> <span class="desc">Allow script assets to use this channel's Twitch emotes.</span>
<input id="allow-channel-emotes" type="checkbox" checked />
</div> </div>
<span class="tile-subtitle">Allow script assets to use this channel's Twitch emotes.</span> <input id="allow-channel-emotes" type="checkbox" checked />
</label> </label>
<label class="dashboard-tile dashboard-toggle-tile"> <label class="control">
<div class="tile-row"> <div class="title-block">
<span class="tile-title">7TV emotes</span> <p class="eyebrow">7TV emotes</p>
<input id="allow-7tv-emotes" type="checkbox" checked /> <span class="desc">Allow script assets to use this channel's 7TV emotes.</span>
</div> </div>
<span class="tile-subtitle">Allow script assets to use this channel's 7TV emotes.</span> <input id="allow-7tv-emotes" type="checkbox" checked />
</label> </label>
<label class="dashboard-tile dashboard-toggle-tile"> <label class="control">
<div class="tile-row"> <div class="title-block">
<span class="tile-title">Chat access</span> <p class="eyebrow">Chat access</p>
<input id="allow-script-chat" type="checkbox" checked /> <span class="desc">Allow script assets to access this channel's Twitch chat log.</span>
</div> </div>
<span class="tile-subtitle">Allow script assets to access this channel's Twitch chat log.</span> <input id="allow-script-chat" type="checkbox" checked />
</label> </label>
</div> </div>
<div class="control-actions"> <div class="control-actions">
<button id="save-script-settings-btn" type="button" onclick="saveScriptSettings()"> <button id="save-script-settings-btn" type="button" onclick="saveScriptSettings()">
Save script settings Save settings
</button> </button>
<span id="script-settings-status" class="muted" role="status" aria-live="polite"></span> <span id="script-settings-status" class="muted" role="status" aria-live="polite"></span>
</div> </div>