Skip to content

Commit 7efaf88

Browse files
SimplicityGuyclaude
SimplicityGuy
and
claude
committed
fix: unify UI patterns across dashboard and explore services
Standardize spacing, spinners, dividers, and shared CSS classes between the dashboard and explore services for a consistent look and feel. - Add missing @Keyframes spin and .animate-spin CSS for admin spinners - Replace all "Loading..." text with animated purple spinners - Add dataset loading spinner to extraction analysis version selector - Standardize all section header dividers to mb-6 border-b pb-4 - Fix admin page vertical offset caused by hidden login form in space-y-8 - Remove extra DLQ list spacing, add mt-2 to range selectors - Add admin.html/admin.js to Tailwind content config for class generation - Unify card class names (.card/.dashboard-card aliased in both services) - Align stat-card styling (inner-bg, 10px radius, 1rem padding) - Add shared badge classes and .animate-spin to explore CSS - Add missing .spinner class for explore loading overlays - Add theme-aware select/dropdown styling to explore Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
1 parent 986744c commit 7efaf88

5 files changed

Lines changed: 80 additions & 35 deletions

File tree

‎dashboard/static/admin.html‎

Lines changed: 31 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@
5353
font-family: 'Inter', sans-serif;
5454
-webkit-font-smoothing: antialiased;
5555
}
56-
.dashboard-card {
56+
.dashboard-card, .card {
5757
background-color: var(--card-bg);
5858
border: 1px solid var(--border-color);
5959
border-radius: 12px;
@@ -171,6 +171,8 @@
171171
color: var(--text-high);
172172
padding: 0.25rem 0.5rem;
173173
}
174+
@keyframes spin { to { transform: rotate(360deg); } }
175+
.animate-spin { animation: spin 1s linear infinite; }
174176
</style>
175177
<script>
176178
// Apply theme before first paint to prevent flash
@@ -183,7 +185,7 @@
183185
</script>
184186
</head>
185187
<body class="p-8">
186-
<div class="max-w-[1440px] mx-auto space-y-8">
188+
<div class="max-w-[1440px] mx-auto">
187189

188190
<!-- ================================================================
189191
LOGIN FORM
@@ -222,10 +224,10 @@ <h2 class="text-xl font-semibold">Discogsography Admin</h2>
222224
<!-- ================================================================
223225
ADMIN PANEL
224226
================================================================ -->
225-
<div id="admin-view" style="display:none">
227+
<div id="admin-view" class="space-y-8" style="display:none">
226228

227229
<!-- Header -->
228-
<header class="flex items-center justify-between mb-12">
230+
<header class="flex items-center justify-between mb-6">
229231
<div class="flex items-center space-x-5">
230232
<!-- Logo -->
231233
<div aria-label="Discogsography logo">
@@ -313,7 +315,7 @@ <h1 class="text-xl font-semibold tracking-tight">Discogsography Admin</h1>
313315

314316
<!-- Extraction Control -->
315317
<section class="dashboard-card p-6">
316-
<div class="flex items-center justify-between mb-4">
318+
<div class="flex items-center justify-between mb-6 border-b b-theme pb-4">
317319
<h3 class="text-sm font-semibold flex items-center gap-2">
318320
<span class="material-symbols-outlined text-sm t-dim">rocket_launch</span> Extraction Control
319321
</h3>
@@ -334,7 +336,7 @@ <h3 class="text-sm font-semibold flex items-center gap-2">
334336

335337
<!-- Extraction History -->
336338
<section class="dashboard-card p-6">
337-
<div class="flex items-center justify-between mb-4 border-b b-theme pb-4">
339+
<div class="flex items-center justify-between mb-6 border-b b-theme pb-4">
338340
<h3 class="text-sm font-semibold flex items-center gap-2">
339341
<span class="material-symbols-outlined text-sm t-dim">history</span> Extraction History
340342
</h3>
@@ -364,12 +366,12 @@ <h3 class="text-sm font-semibold flex items-center gap-2">
364366
<div id="tab-dlq" class="space-y-6" style="display:none">
365367

366368
<section class="dashboard-card p-6">
367-
<div class="flex items-center justify-between mb-4 border-b b-theme pb-4">
369+
<div class="flex items-center justify-between mb-6 border-b b-theme pb-4">
368370
<h3 class="text-sm font-semibold flex items-center gap-2">
369371
<span class="material-symbols-outlined text-sm t-dim">delete_sweep</span> Dead Letter Queue Management
370372
</h3>
371373
</div>
372-
<div class="space-y-3" id="dlq-list"></div>
374+
<div id="dlq-list"></div>
373375
</section>
374376

375377
</div><!-- /tab-dlq -->
@@ -380,12 +382,12 @@ <h3 class="text-sm font-semibold flex items-center gap-2">
380382
<div id="tab-users" class="space-y-6" style="display:none">
381383

382384
<section class="dashboard-card p-6">
383-
<div class="flex items-center justify-between mb-4 border-b b-theme pb-4">
385+
<div class="flex items-center justify-between mb-6 border-b b-theme pb-4">
384386
<h3 class="text-sm font-semibold flex items-center gap-2">
385387
<span class="material-symbols-outlined text-sm t-dim">group</span> User Activity
386388
</h3>
387389
<div class="flex items-center gap-3">
388-
<span id="users-loading" class="text-xs t-muted" style="display:none">Loading...</span>
390+
<span id="users-loading" class="material-symbols-outlined text-sm animate-spin" style="display:none;color:var(--purple-accent)">progress_activity</span>
389391
<span id="users-error" class="text-xs text-amber-500 flex items-center gap-1" style="display:none">
390392
<span class="material-symbols-outlined text-xs">warning</span> <span id="users-error-msg"></span>
391393
</span>
@@ -469,12 +471,12 @@ <h3 class="text-sm font-semibold flex items-center gap-2">
469471
<div id="tab-storage" class="space-y-6" style="display:none">
470472

471473
<section class="dashboard-card p-6">
472-
<div class="flex items-center justify-between mb-4 border-b b-theme pb-4">
474+
<div class="flex items-center justify-between mb-6 border-b b-theme pb-4">
473475
<h3 class="text-sm font-semibold flex items-center gap-2">
474476
<span class="material-symbols-outlined text-sm t-dim">database</span> Storage Utilization
475477
</h3>
476478
<div class="flex items-center gap-3">
477-
<span id="storage-loading" class="text-xs t-muted" style="display:none">Loading...</span>
479+
<span id="storage-loading" class="material-symbols-outlined text-sm animate-spin" style="display:none;color:var(--purple-accent)">progress_activity</span>
478480
<span id="storage-error" class="text-xs text-amber-500 flex items-center gap-1" style="display:none">
479481
<span class="material-symbols-outlined text-xs">warning</span> <span id="storage-error-msg"></span>
480482
</span>
@@ -620,13 +622,13 @@ <h3 class="text-sm font-semibold flex items-center gap-2">
620622
<div id="tab-queue-trends" class="space-y-6" style="display:none">
621623

622624
<section class="dashboard-card p-6">
623-
<div class="flex items-center justify-between mb-4 border-b b-theme pb-4">
625+
<div class="flex items-center justify-between mb-6 border-b b-theme pb-4">
624626
<h3 class="text-sm font-semibold flex items-center gap-2">
625627
<span class="material-symbols-outlined text-sm t-dim">show_chart</span> Queue Trends
626628
</h3>
627629
<div class="flex items-center gap-3">
628630
<span class="text-[10px] t-muted">Auto-refresh 60s</span>
629-
<span id="qt-loading" class="text-xs t-muted" style="display:none">Loading...</span>
631+
<span id="qt-loading" class="material-symbols-outlined text-sm animate-spin" style="display:none;color:var(--purple-accent)">progress_activity</span>
630632
<span id="qt-error" class="text-xs text-amber-500 flex items-center gap-1" style="display:none">
631633
<span class="material-symbols-outlined text-xs">warning</span> <span id="qt-error-msg"></span>
632634
</span>
@@ -637,7 +639,7 @@ <h3 class="text-sm font-semibold flex items-center gap-2">
637639
</div>
638640

639641
<!-- Range selector -->
640-
<div class="flex items-center gap-2 mb-6">
642+
<div class="flex items-center gap-2 mt-2 mb-6">
641643
<span class="text-[10px] font-bold uppercase tracking-wider t-muted mr-2">Range</span>
642644
<button class="range-btn text-[10px] px-2.5 py-1 rounded font-bold uppercase tracking-wider transition-colors" data-range="1h" data-tab-range="queue-trends">1h</button>
643645
<button class="range-btn text-[10px] px-2.5 py-1 rounded font-bold uppercase tracking-wider transition-colors" data-range="6h" data-tab-range="queue-trends">6h</button>
@@ -678,13 +680,13 @@ <h3 class="text-sm font-semibold flex items-center gap-2">
678680
<div id="tab-system-health" class="space-y-6" style="display:none">
679681

680682
<section class="dashboard-card p-6">
681-
<div class="flex items-center justify-between mb-4 border-b b-theme pb-4">
683+
<div class="flex items-center justify-between mb-6 border-b b-theme pb-4">
682684
<h3 class="text-sm font-semibold flex items-center gap-2">
683685
<span class="material-symbols-outlined text-sm t-dim">monitor_heart</span> System Health
684686
</h3>
685687
<div class="flex items-center gap-3">
686688
<span class="text-[10px] t-muted">Auto-refresh 60s</span>
687-
<span id="sh-loading" class="text-xs t-muted" style="display:none">Loading...</span>
689+
<span id="sh-loading" class="material-symbols-outlined text-sm animate-spin" style="display:none;color:var(--purple-accent)">progress_activity</span>
688690
<span id="sh-error" class="text-xs text-amber-500 flex items-center gap-1" style="display:none">
689691
<span class="material-symbols-outlined text-xs">warning</span> <span id="sh-error-msg"></span>
690692
</span>
@@ -695,7 +697,7 @@ <h3 class="text-sm font-semibold flex items-center gap-2">
695697
</div>
696698

697699
<!-- Range selector -->
698-
<div class="flex items-center gap-2 mb-6">
700+
<div class="flex items-center gap-2 mt-2 mb-6">
699701
<span class="text-[10px] font-bold uppercase tracking-wider t-muted mr-2">Range</span>
700702
<button class="range-btn text-[10px] px-2.5 py-1 rounded font-bold uppercase tracking-wider transition-colors" data-range="1h" data-tab-range="system-health">1h</button>
701703
<button class="range-btn text-[10px] px-2.5 py-1 rounded font-bold uppercase tracking-wider transition-colors" data-range="6h" data-tab-range="system-health">6h</button>
@@ -753,7 +755,7 @@ <h3 class="text-sm font-semibold flex items-center gap-2">
753755
<!-- Audit Log Tab -->
754756
<div id="tab-audit-log" class="space-y-6" style="display:none">
755757
<section class="dashboard-card p-6">
756-
<div class="flex items-center justify-between mb-4 border-b b-theme pb-4">
758+
<div class="flex items-center justify-between mb-6 border-b b-theme pb-4">
757759
<h3 class="text-sm font-semibold flex items-center gap-2">
758760
<span class="material-symbols-outlined text-sm t-dim">history</span> Admin Audit Log
759761
</h3>
@@ -766,7 +768,7 @@ <h3 class="text-sm font-semibold flex items-center gap-2">
766768
<option value="dlq.purge">DLQ Purge</option>
767769
</select>
768770
<span class="text-[10px] t-muted">Auto-refresh 60s</span>
769-
<span id="al-loading" class="text-xs t-muted" style="display:none">Loading...</span>
771+
<span id="al-loading" class="material-symbols-outlined text-sm animate-spin" style="display:none;color:var(--purple-accent)">progress_activity</span>
770772
<span id="al-error" class="text-xs text-amber-500 flex items-center gap-1" style="display:none">
771773
<span class="material-symbols-outlined text-xs">warning</span>
772774
<span id="al-error-msg"></span>
@@ -830,6 +832,7 @@ <h3 class="text-sm font-semibold flex items-center gap-2">
830832
<option value="">— select —</option>
831833
</select>
832834
<span id="ea-source-badge" class="text-[10px] px-2 py-0.5 rounded uppercase font-bold badge-idle" style="display:none">source</span>
835+
<span id="ea-loading-spinner" class="material-symbols-outlined text-sm animate-spin" style="display:none;color:var(--purple-accent)">progress_activity</span>
833836
<button id="ea-refresh-btn" class="text-xs font-bold uppercase tracking-wider t-dim flex items-center gap-1">
834837
<span class="material-symbols-outlined text-sm">refresh</span> Refresh
835838
</button>
@@ -842,7 +845,7 @@ <h3 class="text-sm font-semibold flex items-center gap-2">
842845

843846
<!-- Pipeline status cards -->
844847
<section class="dashboard-card p-6 space-y-4">
845-
<h3 class="text-sm font-semibold flex items-center gap-2 border-b b-theme pb-3">
848+
<h3 class="text-sm font-semibold flex items-center gap-2 border-b b-theme pb-4">
846849
<span class="material-symbols-outlined text-sm t-dim">account_tree</span> Pipeline Status
847850
</h3>
848851
<div id="ea-pipeline-cards" class="flex flex-wrap gap-3">
@@ -852,7 +855,7 @@ <h3 class="text-sm font-semibold flex items-center gap-2 border-b b-theme pb-3">
852855

853856
<!-- Violation summary cards (per entity type) -->
854857
<section class="dashboard-card p-6 space-y-4">
855-
<h3 class="text-sm font-semibold flex items-center gap-2 border-b b-theme pb-3">
858+
<h3 class="text-sm font-semibold flex items-center gap-2 border-b b-theme pb-4">
856859
<span class="material-symbols-outlined text-sm t-dim">warning</span> Violations by Entity
857860
</h3>
858861
<div id="ea-entity-cards" class="flex flex-wrap gap-3">
@@ -862,7 +865,7 @@ <h3 class="text-sm font-semibold flex items-center gap-2 border-b b-theme pb-3">
862865

863866
<!-- Rule breakdown table -->
864867
<section class="dashboard-card p-6 space-y-4">
865-
<div class="flex items-center justify-between border-b b-theme pb-3">
868+
<div class="flex items-center justify-between border-b b-theme pb-4">
866869
<h3 class="text-sm font-semibold flex items-center gap-2">
867870
<span class="material-symbols-outlined text-sm t-dim">rule</span> Rule Breakdown
868871
</h3>
@@ -893,7 +896,7 @@ <h3 class="text-sm font-semibold flex items-center gap-2">
893896

894897
<!-- Violations detail table (shown when View is clicked) -->
895898
<section id="ea-violations-detail" class="dashboard-card p-6 space-y-4" style="display:none">
896-
<div class="flex items-center justify-between border-b b-theme pb-3">
899+
<div class="flex items-center justify-between border-b b-theme pb-4">
897900
<h3 class="text-sm font-semibold flex items-center gap-2">
898901
<span class="material-symbols-outlined text-sm t-dim">list_alt</span>
899902
Violations — <span id="ea-vd-rule" class="mono t-dim text-xs"></span>
@@ -946,7 +949,7 @@ <h3 class="text-sm font-semibold flex items-center gap-2">
946949
<!-- ── Sub-view: Version Comparison ────────────────────── -->
947950
<div id="ea-view-compare" style="display:none">
948951
<section class="dashboard-card p-6 space-y-4">
949-
<h3 class="text-sm font-semibold flex items-center gap-2 border-b b-theme pb-3">
952+
<h3 class="text-sm font-semibold flex items-center gap-2 border-b b-theme pb-4">
950953
<span class="material-symbols-outlined text-sm t-dim">compare_arrows</span> Version Comparison
951954
</h3>
952955
<div class="flex flex-wrap items-end gap-4">
@@ -987,7 +990,7 @@ <h3 class="text-sm font-semibold flex items-center gap-2 border-b b-theme pb-3">
987990
<!-- ── Sub-view: Prompt Generator ──────────────────────── -->
988991
<div id="ea-view-prompt" style="display:none">
989992
<section class="dashboard-card p-6 space-y-4">
990-
<div class="flex items-center justify-between border-b b-theme pb-3">
993+
<div class="flex items-center justify-between border-b b-theme pb-4">
991994
<h3 class="text-sm font-semibold flex items-center gap-2">
992995
<span class="material-symbols-outlined text-sm t-dim">smart_toy</span> AI Prompt Generator
993996
</h3>
@@ -1018,7 +1021,7 @@ <h3 class="text-sm font-semibold flex items-center gap-2">
10181021
============================================================ -->
10191022
<div id="ea-modal" class="fixed inset-0 z-50 flex items-center justify-center p-6" style="display:none; background:rgba(0,0,0,0.5)">
10201023
<div class="dashboard-card p-6 w-full max-w-5xl max-h-[90vh] flex flex-col gap-4 overflow-hidden">
1021-
<div class="flex items-center justify-between border-b b-theme pb-3 flex-shrink-0">
1024+
<div class="flex items-center justify-between border-b b-theme pb-4 flex-shrink-0">
10221025
<h3 class="text-sm font-semibold flex items-center gap-2">
10231026
<span class="material-symbols-outlined text-sm t-dim">data_object</span>
10241027
Record Detail — <span id="ea-modal-record-id" class="mono t-dim text-xs"></span>
@@ -1028,7 +1031,7 @@ <h3 class="text-sm font-semibold flex items-center gap-2">
10281031
</button>
10291032
</div>
10301033
<!-- Violations (always visible, compact) -->
1031-
<div class="flex-shrink-0 space-y-2 border-b b-theme pb-3">
1034+
<div class="flex-shrink-0 space-y-2 border-b b-theme pb-4">
10321035
<p class="text-[10px] font-bold uppercase tracking-wider t-muted">Violations</p>
10331036
<ul id="ea-modal-violations" class="space-y-1 text-xs max-h-32 overflow-y-auto"></ul>
10341037
</div>

‎dashboard/static/admin.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1723,6 +1723,9 @@ class AdminDashboard {
17231723
// Reset parsing errors cache for new version
17241724
this._eaParsingErrors = null;
17251725

1726+
const spinner = document.getElementById('ea-loading-spinner');
1727+
if (spinner) spinner.style.display = '';
1728+
17261729
// Fetch summary and parsing errors in parallel
17271730
try {
17281731
const [summaryResp, errorsResp] = await Promise.all([
@@ -1750,6 +1753,8 @@ class AdminDashboard {
17501753
}
17511754
} catch {
17521755
// Silently fail
1756+
} finally {
1757+
if (spinner) spinner.style.display = 'none';
17531758
}
17541759
}
17551760

‎dashboard/static/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@
5050
font-family: 'Inter', sans-serif;
5151
-webkit-font-smoothing: antialiased;
5252
}
53-
.dashboard-card {
53+
.dashboard-card, .card {
5454
background-color: var(--card-bg);
5555
border: 1px solid var(--border-color);
5656
border-radius: 12px;

‎dashboard/tailwind.config.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/** @type {import('tailwindcss').Config} */
22
module.exports = {
33
darkMode: "class",
4-
content: ["./static/index.html", "./static/dashboard.js"],
4+
content: ["./static/index.html", "./static/dashboard.js", "./static/admin.html", "./static/admin.js"],
55
plugins: [require("@tailwindcss/forms")],
66
};

0 commit comments

Comments
 (0)