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

Update dashboard styling

Browse Source
This commit is contained in:
Andreas Krühlmann
2026-01-13 22:37:33 +01:00
parent 6fc0651a8f
commit f8e992029a
2 changed files with 113 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -682,9 +682,9 @@ button:disabled:hover {
.panel-actions {
display: flex;
flex-direction: row;
gap: 20px;
padding: 20px;
flex-direction: column;
gap: 12px;
padding: 12px 0 4px;
}
.preview-grid {
@@ -874,15 +874,87 @@ button:disabled:hover {
.user-pill {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 4px;
align-items: center;
justify-content: flex-end;
gap: 16px;
padding: 10px 12px;
border-radius: 12px;
background: rgba(124, 58, 237, 0.1);
border: 1px solid rgba(124, 58, 237, 0.2);
}
.user-pill-copy {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 4px;
}
.user-logout {
margin: 0;
}
.user-logout .ghost {
border-color: rgba(148, 163, 184, 0.4);
color: #e2e8f0;
}
.user-logout .ghost:hover:not(:disabled) {
border-color: rgba(196, 181, 253, 0.6);
color: #f8fafc;
}
.dashboard-action {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
border-radius: 12px;
background: rgba(124, 58, 237, 0.08);
border: 1px solid rgba(124, 58, 237, 0.2);
color: #e2e8f0;
text-decoration: none;
transition:
background 120ms ease,
border-color 120ms ease,
transform 120ms ease;
}
.dashboard-action:hover {
background: rgba(124, 58, 237, 0.16);
border-color: rgba(124, 58, 237, 0.35);
transform: translateY(-1px);
}
.dashboard-action-icon {
min-width: 44px;
height: 44px;
border-radius: 10px;
display: grid;
place-items: center;
background: rgba(124, 58, 237, 0.18);
color: #c4b5fd;
font-weight: 700;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.dashboard-action-copy {
display: flex;
flex-direction: column;
gap: 4px;
}
.dashboard-action-copy strong {
font-size: 15px;
}
.dashboard-action-copy small {
color: #cbd5e1;
font-size: 12px;
}
.user-display {
font-weight: 700;
color: #e2e8f0;

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

@@ -19,8 +19,13 @@
</div>
</div>
<div class="user-pill">
<span class="eyebrow subtle">Signed in as</span>
<span class="user-display" th:text="${username}">user</span>
<div class="user-pill-copy">
<span class="eyebrow subtle">Signed in as</span>
<span class="user-display" th:text="${username}">user</span>
</div>
<form class="user-logout" th:action="@{/logout}" method="post">
<button class="ghost" type="submit">Logout</button>
</form>
</div>
</header>
@@ -29,13 +34,34 @@
<h3>Shortcuts</h3>
<p class="muted">Jump into your overlay</p>
<div class="panel-actions">
<a class="button block" th:href="@{'/view/' + ${channel} + '/broadcast'}">Open broadcast overlay</a>
<a class="button ghost block" th:href="@{'/view/' + ${channel} + '/admin'}">Open admin console</a>
<a class="button ghost block" th:if="${isSystemAdmin}" href="/settings">Application settings</a>
<a class="button ghost block" href="/channels">Browse channels</a>
<form class="block" th:action="@{/logout}" method="post">
<button class="secondary block" type="submit">Logout</button>
</form>
<a class="dashboard-action" th:href="@{'/view/' + ${channel} + '/broadcast'}">
<span class="dashboard-action-icon">Live</span>
<span class="dashboard-action-copy">
<strong>Open broadcast overlay</strong>
<small>Launch your live overlay view.</small>
</span>
</a>
<a class="dashboard-action" th:href="@{'/view/' + ${channel} + '/admin'}">
<span class="dashboard-action-icon">Admin</span>
<span class="dashboard-action-copy">
<strong>Open admin console</strong>
<small>Manage assets, scripts, and layout.</small>
</span>
</a>
<a class="dashboard-action" th:if="${isSystemAdmin}" href="/settings">
<span class="dashboard-action-icon">App</span>
<span class="dashboard-action-copy">
<strong>Application settings</strong>
<small>Configure server-wide preferences.</small>
</span>
</a>
<a class="dashboard-action" href="/channels">
<span class="dashboard-action-icon">Browse</span>
<span class="dashboard-action-copy">
<strong>Browse channels</strong>
<small>Find other overlays you manage.</small>
</span>
</a>
</div>
</section>