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 {
|
.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 {
|
||||||
|
}
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
@@ -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>
|
|
||||||
<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>
|
||||||
<a class="dashboard-tile" th:href="@{'/view/' + ${channel} + '/admin'}">
|
<a th:href="@{'/view/' + ${channel} + '/admin'}">
|
||||||
<span class="tile-icon">Admin</span>
|
<i class="fa-solid fa-layer-group"></i>
|
||||||
<span class="tile-title">Open admin console</span>
|
<span>Admin Console</span>
|
||||||
<span class="tile-subtitle">Manage assets, scripts, and layout.</span>
|
|
||||||
</a>
|
</a>
|
||||||
<a class="dashboard-tile" th:if="${isSystemAdmin}" href="/settings">
|
<a th:href="@{'/view/' + ${channel} + '/audit'}">
|
||||||
<span class="tile-icon">App</span>
|
<i class="fa-solid fa-user-shield"></i>
|
||||||
<span class="tile-title">Application settings</span>
|
<span>Audit Log</span>
|
||||||
<span class="tile-subtitle">Configure server-wide preferences.</span>
|
</a>
|
||||||
|
<a th:if="${isSystemAdmin}" href="/settings">
|
||||||
|
<i class="fa-solid fa-gear"></i>
|
||||||
|
<span>Application Settings</span>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
|
||||||
</section>
|
</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>
|
||||||
|
</div>
|
||||||
<input id="allow-channel-emotes" type="checkbox" checked />
|
<input id="allow-channel-emotes" type="checkbox" checked />
|
||||||
</div>
|
|
||||||
<span class="tile-subtitle">Allow script assets to use this channel's Twitch emotes.</span>
|
|
||||||
</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>
|
||||||
|
<span class="desc">Allow script assets to use this channel's 7TV emotes.</span>
|
||||||
|
</div>
|
||||||
<input id="allow-7tv-emotes" type="checkbox" checked />
|
<input id="allow-7tv-emotes" type="checkbox" checked />
|
||||||
</div>
|
|
||||||
<span class="tile-subtitle">Allow script assets to use this channel's 7TV emotes.</span>
|
|
||||||
</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>
|
||||||
|
|||||||
Reference in New Issue
Block a user