danvics/soulsync
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Merge pull request #737 from Nezreka/refactor/ui-page-shell

Browse source 
Refactor/UI page shell
This commit is contained in:
BoulderBadgeDad 2026-05-29 08:56:26 -07:00 committed by GitHub
commit 70249cade4
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 167 additions and 178 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
webui/index.html
View file

@ -311,7 +311,7 @@
<!-- Dashboard Page -->
<div class="page" id="dashboard-page">
<div class="dashboard-container">
<div class="page-shell dashboard-container">
<div class="dashboard-header">
<div class="header-text">
<h2 class="header-title"><img src="/static/dashboard.png" class="page-header-icon" alt=""><span>System Dashboard</span></h2>
@ -976,6 +976,7 @@
<!-- Main container for the Sync page -->
<div class="page" id="sync-page">
<div class="page-shell">
<!-- Header -->
<div class="sync-header">
<div class="sync-header-row">
@ -2059,6 +2060,7 @@
</div>
</div>
</div>
</div>
</div>
<!-- Search Page -->
@ -2280,7 +2282,7 @@
<div class="page" id="automations-page">
<!-- List View -->
<div class="automations-list-view" id="automations-list-view">
<div class="automations-container">
<div class="page-shell automations-container">
<div class="dashboard-header">
<div class="header-text">
<h2 class="header-title"><img src="/static/automation.png" class="page-header-icon" alt=""><span>Automations</span></h2>
@ -3632,7 +3634,7 @@
<!-- Playlist Explorer Page -->
<div class="page" id="playlist-explorer-page">
<div class="explorer-container">
<div class="page-shell explorer-container">
<!-- Header (compact) -->
<div class="dashboard-header" style="margin-bottom: 12px;">
<div class="header-text">
@ -3735,6 +3737,7 @@
<!-- Settings Page -->
<div class="page" id="settings-page">
<div class="page-shell">
<div class="dashboard-header">
<div class="header-text">
<h2 class="header-title"><img src="/static/settings.png" class="page-header-icon" alt=""><span>Settings</span></h2>
@ -6200,6 +6203,7 @@
<button class="save-button" id="save-settings">Save Settings</button>
</div>
</div>
</div>
</div>
<!-- Hydrabase Page (Dev Mode Only) -->
@ -6322,7 +6326,7 @@
TOOLS PAGE
═══════════════════════════════════════════════════════════════════ -->
<div class="page" id="tools-page">
<div class="tools-page-container">
<div class="page-shell tools-page-container">
<div class="tools-page-header">
<div class="tools-page-header-left">
<h2 class="tools-page-title">
@ -6779,7 +6783,7 @@
WATCHLIST PAGE
═══════════════════════════════════════════════════════════════════ -->
<div class="page" id="watchlist-page">
<div class="watchlist-page-container">
<div class="page-shell watchlist-page-container">
<!-- Header -->
<div class="watchlist-page-header">
<div class="watchlist-page-header-left">
@ -6895,7 +6899,7 @@
WISHLIST PAGE
═══════════════════════════════════════════════════════════════════ -->
<div class="page" id="wishlist-page">
<div class="wishlist-page-container">
<div class="page-shell wishlist-page-container">
<!-- Header -->
<div class="wishlist-page-header">
<div class="wishlist-page-header-left">
@ -7288,15 +7292,15 @@
<div class="add-to-wishlist-modal-footer">
<div class="wishlist-modal-actions">
<button class="wishlist-modal-btn wishlist-modal-btn-secondary"
<button class="btn btn--secondary"
onclick="closeAddToWishlistModal()">
Close
</button>
<button class="wishlist-modal-btn wishlist-modal-btn-download" id="wishlist-download-now-btn"
<button class="btn btn--download" id="wishlist-download-now-btn"
onclick="handleWishlistDownloadNow()">
Download Now
</button>
<button class="wishlist-modal-btn wishlist-modal-btn-primary" id="confirm-add-to-wishlist-btn">
<button class="btn btn--primary" id="confirm-add-to-wishlist-btn">
Add to Wishlist
</button>
</div>
@ -7465,11 +7469,11 @@
<div class="watchlist-artist-config-footer">
<div class="config-modal-actions">
<button class="config-modal-btn config-modal-btn-secondary"
<button class="btn btn--secondary"
onclick="closeWatchlistArtistConfigModal()">
Cancel
</button>
<button class="config-modal-btn config-modal-btn-primary" id="save-artist-config-btn">
<button class="btn btn--primary" id="save-artist-config-btn">
Save Preferences
</button>
</div>
@ -7649,11 +7653,11 @@
<div class="watchlist-artist-config-footer">
<div class="config-modal-actions">
<button class="config-modal-btn config-modal-btn-secondary"
<button class="btn btn--secondary"
onclick="closeWatchlistGlobalSettingsModal()">
Cancel
</button>
<button class="config-modal-btn config-modal-btn-primary" id="save-global-config-btn"
<button class="btn btn--primary" id="save-global-config-btn"
onclick="saveWatchlistGlobalConfig()">
Save Global Settings
</button>

315
webui/static/style.css
View file

@ -7990,13 +7990,136 @@ body.helper-mode-active #dashboard-activity-feed:hover {
/* ======================================================= */
/* Main Dashboard Layout */
.dashboard-container {
display: flex;
flex-direction: column;
gap: 25px;
/* Spacing between sections */
padding: 28px 24px 30px 24px;
/* ── Shared button primitive ────────────────────────────────────────
The canonical button design system. New markup (and the React pages)
should use `.btn` + a modifier; existing per-page button classes are being
migrated onto it family by family. Values reflect the dominant existing
look (accent-gradient primary, translucent ghost, semantic danger/warning).
Filter "pills" / tab buttons are a separate primitive (see .tab below). */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 24px;
border-radius: 12px;
font-size: 14px;
font-weight: 600;
font-family: inherit;
line-height: 1;
cursor: pointer;
border: none;
outline: none;
transition: all 0.2s ease;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn--primary {
background: linear-gradient(135deg, rgb(var(--accent-rgb)), rgb(var(--accent-light-rgb)));
color: #000;
font-weight: 700;
box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.3);
}
.btn--primary:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(var(--accent-rgb), 0.4);
}
.btn--primary:active:not(:disabled) { transform: translateY(0); }
.btn--secondary {
background: rgba(255, 255, 255, 0.08);
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.15);
}
.btn--secondary:hover:not(:disabled) {
background: rgba(255, 255, 255, 0.12);
border-color: rgba(255, 255, 255, 0.25);
}
.btn--danger {
background: linear-gradient(135deg, #dc2626, #ef4444);
color: #fff;
font-weight: 700;
box-shadow: 0 4px 16px rgba(220, 38, 38, 0.3);
}
.btn--danger:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(220, 38, 38, 0.4);
}
/* Spotify-green download CTA (intentional brand color). */
.btn--download {
background: linear-gradient(135deg, #1db954, #1ed760);
color: #fff;
border: 1px solid rgba(29, 185, 84, 0.3);
}
.btn--download:hover:not(:disabled) {
background: linear-gradient(135deg, #1ed760, #1db954);
transform: translateY(-1px);
box-shadow: 0 8px 24px rgba(29, 185, 84, 0.4);
}
/* Shared loading state (JS toggles `.loading`). */
.btn.loading {
background: rgba(255, 193, 7, 0.9);
color: #000;
animation: pulse-loading 1.5s infinite;
cursor: not-allowed;
}
/* ── Shared tab / filter-pill primitive ─────────────────────────────
Canonical pill tab (the bordered rounded-pill filter look). New markup and
the React pages should use `.tab` + `.tab.active`. Existing per-page pill
classes (watchlist-filter-btn, discog-filter, adl-pill, …) are deliberately
left in place — they're JS-coupled and visually divergent, so they should be
migrated only when visually verifiable / in React, not blind. */
.tab {
padding: 6px 16px;
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(255, 255, 255, 0.05);
color: rgba(255, 255, 255, 0.5);
font-size: 13px;
font-weight: 600;
font-family: inherit;
cursor: pointer;
transition: all 0.2s ease;
}
.tab:hover:not(.active) { color: rgba(255, 255, 255, 0.8); }
.tab.active {
color: #fff;
border-color: rgba(var(--accent-rgb), 0.5);
background: rgba(var(--accent-rgb), 0.15);
}
/* ── Shared card primitive ──────────────────────────────────────────
Canonical "glass" content card (the dashboard service/stat card look). New
markup and the React pages should use `.card`. Existing per-feature card
classes are left in place; migrate when visually verifiable / in React. */
.card {
padding: 20px 22px;
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.06);
background: rgba(18, 18, 22, 0.9);
backdrop-filter: blur(12px);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15);
transition: all 0.2s ease;
}
.card:hover {
transform: translateY(-2px);
border-color: rgba(var(--accent-rgb), 0.3);
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
/* ── Shared page shell ──────────────────────────────────────────────
The canonical page card (the dashboard / stats look). Adopted by the
dashboard, tools, watchlist and wishlist pages — and intended for reuse
by the React pages too (same class name). Page-specific extras (flex
layout, position) stay on the per-page class. */
.page-shell {
padding: 28px 24px 30px;
/* Semi-transparent to let page particles show through */
background: linear-gradient(135deg,
rgba(20, 20, 20, 0.55) 0%,
@ -8005,7 +8128,6 @@ body.helper-mode-active #dashboard-activity-feed:hover {
border: 1px solid rgba(255, 255, 255, 0.08);
border-top: 1px solid rgba(255, 255, 255, 0.12);
margin: 20px;
/* Soft floating shadow */
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.3),
@ -8013,6 +8135,13 @@ body.helper-mode-active #dashboard-activity-feed:hover {
inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.dashboard-container {
display: flex;
flex-direction: column;
gap: 25px;
/* Spacing between sections; card styling comes from .page-shell */
}
.dashboard-section {
display: flex;
flex-direction: column;
@ -20874,48 +21003,7 @@ body.helper-mode-active #dashboard-activity-feed:hover {
justify-content: flex-end;
}
.config-modal-btn {
padding: 12px 28px;
border-radius: 12px;
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
border: none;
outline: none;
}
.config-modal-btn-primary {
background: linear-gradient(135deg, rgb(var(--accent-light-rgb)), rgb(var(--accent-rgb)));
color: #000;
box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.3);
}
.config-modal-btn-primary:hover {
background: linear-gradient(135deg, #1fdf64, rgb(var(--accent-light-rgb)));
box-shadow: 0 6px 20px rgba(var(--accent-rgb), 0.4);
transform: translateY(-1px);
}
.config-modal-btn-primary:active {
transform: translateY(0);
}
.config-modal-btn-primary:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.config-modal-btn-secondary {
background: rgba(255, 255, 255, 0.08);
color: #ffffff;
border: 1px solid rgba(255, 255, 255, 0.15);
}
.config-modal-btn-secondary:hover {
background: rgba(255, 255, 255, 0.12);
border-color: rgba(255, 255, 255, 0.25);
}
/* .config-modal-btn* migrated to the shared .btn / .btn--primary / .btn--secondary primitive. */
/* Linked Provider Artist */
/* Per-source linked rows */
@ -21153,7 +21241,7 @@ body.helper-mode-active #dashboard-activity-feed:hover {
flex-direction: column-reverse;
}
.config-modal-btn {
.config-modal-actions .btn {
width: 100%;
}
}
@ -25677,10 +25765,11 @@ body.helper-mode-active #dashboard-activity-feed:hover {
=============================== */
.library-container {
/* outer gutter comes from .page (40px) — shared across the full-width
exception pages so spacing is intentional, not accidental */
height: 100%;
display: flex;
flex-direction: column;
padding: 20px;
gap: 20px;
}
@ -28129,78 +28218,8 @@ div.artist-hero-badge {
gap: 12px;
}
.wishlist-modal-btn {
padding: 12px 24px;
border: none;
border-radius: 12px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
min-width: 120px;
}
.wishlist-modal-btn-secondary {
background: rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.wishlist-modal-btn-secondary:hover {
background: rgba(255, 255, 255, 0.2);
color: #ffffff;
border-color: rgba(255, 255, 255, 0.3);
}
.wishlist-modal-btn-download {
background: linear-gradient(135deg, #1db954, #1ed760);
color: #ffffff;
border: 1px solid rgba(29, 185, 84, 0.3);
}
.wishlist-modal-btn-download:hover {
background: linear-gradient(135deg, #1ed760, #1db954);
transform: translateY(-1px);
box-shadow: 0 8px 24px rgba(29, 185, 84, 0.4);
}
.wishlist-modal-btn-download:active {
transform: translateY(0);
box-shadow: 0 4px 12px rgba(29, 185, 84, 0.3);
}
.wishlist-modal-btn-primary {
background: linear-gradient(135deg, rgb(var(--accent-rgb)) 0%, rgb(var(--accent-light-rgb)) 100%);
color: #ffffff;
border: 1px solid rgba(var(--accent-rgb), 0.3);
}
.wishlist-modal-btn-primary:hover {
background: linear-gradient(135deg, rgb(var(--accent-light-rgb)) 0%, #22e167 100%);
transform: translateY(-1px);
box-shadow: 0 8px 24px rgba(var(--accent-rgb), 0.4);
}
.wishlist-modal-btn-primary:active {
transform: translateY(0);
box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.3);
}
/* Loading State */
.wishlist-modal-btn-primary.loading {
background: rgba(255, 193, 7, 0.9);
color: #000000;
animation: pulse-loading 1.5s infinite;
cursor: not-allowed;
}
.wishlist-modal-btn-primary:disabled {
background: rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.4);
cursor: not-allowed;
transform: none;
box-shadow: none;
}
/* .wishlist-modal-btn* migrated to the shared .btn primitive
(.btn--primary / .btn--secondary / .btn--download / .btn.loading). */
/* Animation for modal appearance */
@keyframes wishlistModalFadeIn {
@ -28287,7 +28306,7 @@ div.artist-hero-badge {
gap: 12px;
}
.wishlist-modal-btn {
.wishlist-modal-actions .btn {
width: 100%;
}
}
@ -43832,7 +43851,7 @@ body.downloads-disabled [onclick*="DownloadMissing"]:not([onclick*="close"]) {
AUTOMATIONS PAGE
=========================== */
.automations-container { padding: 20px 24px; }
/* .automations-container: card styling from .page-shell */
.automations-list { display: flex; flex-direction: column; gap: 0; }
#automations-list-view { padding-bottom: 10vh; }
@ -54445,7 +54464,7 @@ tr.tag-diff-same {
================================================================================== */
.explorer-container {
padding: 24px 32px;
/* card styling from .page-shell; keep full-height flex layout */
display: flex;
flex-direction: column;
min-height: 100%;
@ -58135,9 +58154,10 @@ body.reduce-effects *::after {
}
.adl-layout {
/* outer gutter comes from .page (40px) — consistent with the other
full-width exception pages (library, etc.) */
display: flex;
gap: 0;
padding: 28px 32px;
max-width: 1440px;
}
@ -59446,20 +59466,7 @@ body.reduce-effects *::after {
TOOLS PAGE
═══════════════════════════════════════════════════════════════════ */
.tools-page-container {
padding: 28px 24px 30px;
margin: 20px;
background: linear-gradient(135deg,
rgba(20, 20, 20, 0.55) 0%,
rgba(12, 12, 12, 0.62) 100%);
border-radius: 24px;
border: 1px solid rgba(255, 255, 255, 0.08);
border-top: 1px solid rgba(255, 255, 255, 0.12);
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.3),
0 4px 16px rgba(0, 0, 0, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
/* .tools-page-container: card styling now from .page-shell (no extras). */
.tools-page-header {
padding: 20px 24px 18px;
@ -59632,18 +59639,7 @@ body.reduce-effects *::after {
═══════════════════════════════════════════════════════════════════ */
.watchlist-page-container {
padding: 28px 24px 30px;
margin: 20px;
background: linear-gradient(135deg,
rgba(20, 20, 20, 0.55) 0%,
rgba(12, 12, 12, 0.62) 100%);
border-radius: 24px;
border: 1px solid rgba(255, 255, 255, 0.08);
border-top: 1px solid rgba(255, 255, 255, 0.12);
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.3),
0 4px 16px rgba(0, 0, 0, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
/* card styling from .page-shell; keep page-specific positioning */
position: relative;
}
@ -60044,18 +60040,7 @@ body.reduce-effects *::after {
═══════════════════════════════════════════════════════════════════ */
.wishlist-page-container {
padding: 28px 24px 30px;
margin: 20px;
background: linear-gradient(135deg,
rgba(20, 20, 20, 0.55) 0%,
rgba(12, 12, 12, 0.62) 100%);
border-radius: 24px;
border: 1px solid rgba(255, 255, 255, 0.08);
border-top: 1px solid rgba(255, 255, 255, 0.12);
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.3),
0 4px 16px rgba(0, 0, 0, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
/* card styling from .page-shell; keep page-specific positioning */
position: relative;
}