mirror of
https://github.com/imgfloat/server.git
synced 2026-02-05 03:39:26 +00:00
Restructure dashboard
This commit is contained in:
@@ -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 {
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -7,6 +7,13 @@
|
||||
<meta name="_csrf_header" th:content="${_csrf.headerName}" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<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>
|
||||
<body class="dashboard-body" th:classappend="${isStaging} ? ' has-staging-banner' : ''">
|
||||
<div th:insert="~{fragments/staging :: banner}"></div>
|
||||
@@ -30,30 +37,26 @@
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="dashboard-grid">
|
||||
<section class="card">
|
||||
<p class="eyebrow">Navigation</p>
|
||||
<h3>Shortcuts</h3>
|
||||
<p class="muted">Jump into your overlay</p>
|
||||
<div class="dashboard-tile-grid">
|
||||
<a class="dashboard-tile" th:href="@{'/view/' + ${channel} + '/broadcast'}">
|
||||
<span class="tile-icon">Live</span>
|
||||
<span class="tile-title">Open broadcast overlay</span>
|
||||
<span class="tile-subtitle">Launch your live overlay view.</span>
|
||||
</a>
|
||||
<a class="dashboard-tile" th:href="@{'/view/' + ${channel} + '/admin'}">
|
||||
<span class="tile-icon">Admin</span>
|
||||
<span class="tile-title">Open admin console</span>
|
||||
<span class="tile-subtitle">Manage assets, scripts, and layout.</span>
|
||||
</a>
|
||||
<a class="dashboard-tile" th:if="${isSystemAdmin}" href="/settings">
|
||||
<span class="tile-icon">App</span>
|
||||
<span class="tile-title">Application settings</span>
|
||||
<span class="tile-subtitle">Configure server-wide preferences.</span>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
<section class="large-dashboard-tiles">
|
||||
<a th:href="@{'/view/' + ${channel} + '/broadcast'}">
|
||||
<i class="fa-solid fa-tower-broadcast"></i>
|
||||
<span>Broadcast Overlay</span>
|
||||
</a>
|
||||
<a th:href="@{'/view/' + ${channel} + '/admin'}">
|
||||
<i class="fa-solid fa-layer-group"></i>
|
||||
<span>Admin Console</span>
|
||||
</a>
|
||||
<a th:href="@{'/view/' + ${channel} + '/audit'}">
|
||||
<i class="fa-solid fa-user-shield"></i>
|
||||
<span>Audit Log</span>
|
||||
</a>
|
||||
<a th:if="${isSystemAdmin}" href="/settings">
|
||||
<i class="fa-solid fa-gear"></i>
|
||||
<span>Application Settings</span>
|
||||
</a>
|
||||
</section>
|
||||
|
||||
<div class="dashboard-grid">
|
||||
<section class="card">
|
||||
<p class="eyebrow">Settings</p>
|
||||
<h3>Overlay dimensions</h3>
|
||||
@@ -68,42 +71,36 @@
|
||||
<input id="canvas-height" type="number" min="100" step="10" />
|
||||
</label>
|
||||
</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">
|
||||
<p class="eyebrow">Script privacy</p>
|
||||
<h3>Script asset access</h3>
|
||||
<p class="muted">Control what data scripts can access in your channel.</p>
|
||||
<div class="dashboard-tile-grid">
|
||||
<label class="dashboard-tile dashboard-toggle-tile">
|
||||
<div class="tile-row">
|
||||
<span class="tile-title">Twitch emotes</span>
|
||||
<input id="allow-channel-emotes" type="checkbox" checked />
|
||||
<h3>Integrations</h3>
|
||||
<p class="muted">Set access policy for script assets.</p>
|
||||
|
||||
<div class="control-list">
|
||||
<label class="control">
|
||||
<div class="title-block">
|
||||
<p class="eyebrow">Twitch emotes</p>
|
||||
<span class="desc">Allow script assets to use this channel's Twitch emotes.</span>
|
||||
</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 class="dashboard-tile dashboard-toggle-tile">
|
||||
<div class="tile-row">
|
||||
<span class="tile-title">7TV emotes</span>
|
||||
<input id="allow-7tv-emotes" type="checkbox" checked />
|
||||
<label class="control">
|
||||
<div class="title-block">
|
||||
<p class="eyebrow">7TV emotes</p>
|
||||
<span class="desc">Allow script assets to use this channel's 7TV emotes.</span>
|
||||
</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 class="dashboard-tile dashboard-toggle-tile">
|
||||
<div class="tile-row">
|
||||
<span class="tile-title">Chat access</span>
|
||||
<input id="allow-script-chat" type="checkbox" checked />
|
||||
<label class="control">
|
||||
<div class="title-block">
|
||||
<p class="eyebrow">Chat access</p>
|
||||
<span class="desc">Allow script assets to access this channel's Twitch chat log.</span>
|
||||
</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>
|
||||
</div>
|
||||
<div class="control-actions">
|
||||
<button id="save-script-settings-btn" type="button" onclick="saveScriptSettings()">
|
||||
Save script settings
|
||||
Save settings
|
||||
</button>
|
||||
<span id="script-settings-status" class="muted" role="status" aria-live="polite"></span>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user