Skip to content

Full-width desktop layout, improved light/dark mode theming across all pages #1309

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
pethers merged 16 commits into from
Mar 20, 2026
Merged

Full-width desktop layout, improved light/dark mode theming across all pages #1309

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
0fa7e11
Initial plan
Copilot Mar 20, 2026
74e1ed1
Initial plan for CSS light/dark mode and full-width desktop improvements
Copilot Mar 20, 2026
479d15e
feat: make desktop layout full-width, improve light and dark mode sty…
Copilot Mar 20, 2026
e152082
fix: address code review - restore body padding, cap card grid widths…
Copilot Mar 20, 2026
90ee740
feat: comprehensive CSS review - improved spacing, theme transitions,…
Copilot Mar 20, 2026
d856b38
fix: address code review - simplify transition selector, add metric-c…
Copilot Mar 20, 2026
fc7cb1e
fix: wrap theme transitions in prefers-reduced-motion and include tra…
Copilot Mar 20, 2026
76fdddc
Merge branch 'main' into copilot/improve-css-light-dark-mode
pethers Mar 20, 2026
fa2adae
fix: scope theme transitions to .theme-transition class, simplify bod…
Copilot Mar 20, 2026
218721f
fix: guard theme-transition timer against rapid clicks, add tests
Copilot Mar 20, 2026
efbebca
refactor: clean up theme-transition tests (remove unused helper, var→…
Copilot Mar 20, 2026
33e75a8
fix: resolve no-useless-assignment lint error in theme-toggle tests
Copilot Mar 20, 2026
ff4fa00
Merge branch 'main' into copilot/improve-css-light-dark-mode
pethers Mar 20, 2026
45ec8fa
test: strengthen theme-transition toggle coverage and timer assertions
Copilot Mar 20, 2026
03ba07b
test: harden theme-transition timer cleanup in toggle tests
Copilot Mar 20, 2026
96bb42f
Merge branch 'main' into copilot/improve-css-light-dark-mode
pethers Mar 20, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,3 +66,4 @@ scripts/__pycache__/
/sitemap*
dashboard-initial.png
api/
current-*.png
37 changes: 29 additions & 8 deletions dashboard/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

/* Dashboard Container */
.cia-dashboard {
max-width: 1400px;
max-width: 100%;
margin: 0 auto;
padding: var(--spacing-md);
}
Expand Down Expand Up @@ -64,7 +64,7 @@
.rankings-section,
.heatmap-section,
.network-section {
margin: var(--spacing-3xl) 0;
margin: var(--spacing-xl) 0;
padding: var(--spacing-xl);
background: var(--card-bg);
border-radius: var(--border-radius-lg);
Expand All @@ -74,20 +74,20 @@
.section-heading {
font-size: var(--h2-size);
color: var(--primary-color);
margin-bottom: var(--spacing-lg);
margin-bottom: var(--spacing-md);
border-bottom: 2px solid var(--border-color);
padding-bottom: var(--spacing-sm);
}

.section-description {
color: var(--text-secondary);
margin-bottom: var(--spacing-lg);
margin-bottom: var(--spacing-md);
font-size: var(--font-size-base);
}

/* Metrics Grid */
.metrics-grid {
margin: var(--spacing-2xl) 0;
margin: var(--spacing-lg) 0;
padding: var(--spacing-xl);
background: var(--card-bg);
border-radius: var(--border-radius-lg);
Expand All @@ -108,7 +108,7 @@
border-radius: var(--border-radius);
text-align: center;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.metric-card:hover {
Expand Down Expand Up @@ -791,6 +791,7 @@ html[data-theme="dark"] .metrics-grid {
background: var(--card-bg);
border: 1px solid var(--card-border, var(--border-color));
box-shadow: 0 0 12px rgba(0, 204, 102, 0.15);
border-radius: var(--border-radius-lg, 12px);
}

html[data-theme="dark"] .section-heading {
Expand All @@ -799,13 +800,21 @@ html[data-theme="dark"] .section-heading {
}

html[data-theme="dark"] .metric-card {
background: linear-gradient(135deg, rgba(0, 204, 102, 0.2) 0%, rgba(0, 187, 119, 0.2) 100%);
background: linear-gradient(135deg, rgba(0, 204, 102, 0.15) 0%, rgba(0, 187, 119, 0.15) 100%);
border: 1px solid rgba(0, 204, 102, 0.3);
box-shadow: 0 2px 8px rgba(0, 204, 102, 0.1);
}

html[data-theme="dark"] .metric-card:hover {
border-color: rgba(0, 204, 102, 0.5);
box-shadow: 0 4px 16px rgba(0, 204, 102, 0.2);
transform: translateY(-2px);
}

html[data-theme="dark"] .chart-container {
background: rgba(0, 26, 26, 0.6);
border: 1px solid rgba(0, 204, 102, 0.15);
border-radius: var(--border-radius, 8px);
}

html[data-theme="dark"] .risk-alerts {
Expand All @@ -821,13 +830,25 @@ html[data-theme="light"] .network-section,
html[data-theme="light"] .metrics-grid {
background: var(--card-bg);
box-shadow: var(--card-shadow-resting);
border: 1px solid var(--card-border, #dee2e6);
border: 1px solid var(--card-border, rgba(0, 0, 0, 0.08));
border-radius: var(--border-radius-lg, 12px);
}

html[data-theme="light"] .chart-container {
background: var(--bg-color);
border-radius: var(--border-radius, 8px);
}

html[data-theme="light"] .metric-card {
background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
box-shadow: 0 2px 8px rgba(0, 102, 51, 0.15);
}

html[data-theme="light"] .metric-card:hover {
box-shadow: 0 4px 16px rgba(0, 102, 51, 0.25);
transform: translateY(-2px);
}

html[data-theme="light"] .section-heading {
color: var(--primary-color);
}
9 changes: 9 additions & 0 deletions js/theme-toggle.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
var STORAGE_KEY = 'riksdagsmonitor-theme';
var DARK = 'dark';
var LIGHT = 'light';
var _transitionTimer = null;

var button = document.getElementById('theme-toggle');
if (!button) {
Expand Down Expand Up @@ -67,11 +68,19 @@

button.addEventListener('click', function () {
currentTheme = currentTheme === DARK ? LIGHT : DARK;
document.documentElement.classList.add('theme-transition');
applyTheme(currentTheme, button);
try {
window.localStorage.setItem(STORAGE_KEY, currentTheme);
} catch (_e) {
// Ignore storage errors
}
// Remove transition class after animations complete; clear any pending timer
// to avoid races when the user clicks rapidly.
if (_transitionTimer) { clearTimeout(_transitionTimer); }
_transitionTimer = setTimeout(function () {
document.documentElement.classList.remove('theme-transition');
_transitionTimer = null;
}, 350);
});
}());
9 changes: 9 additions & 0 deletions public/js/theme-toggle.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@
const STORAGE_KEY = 'riksdagsmonitor-theme';
const DARK = 'dark';
const LIGHT = 'light';
let _transitionTimer = null;

/* ── Helpers ──────────────────────────────────────────────────────────── */

Expand Down Expand Up @@ -77,8 +78,16 @@
function toggle() {
const current = document.documentElement.getAttribute('data-theme') || LIGHT;
const next = current === DARK ? LIGHT : DARK;
document.documentElement.classList.add('theme-transition');
applyTheme(next);
updateButton(next);
Comment on lines +81 to 83
Copy link

Copilot AI Mar 20, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

New theme-toggle behavior adds/removes the .theme-transition class, but the existing Vitest coverage for theme toggling doesn’t assert this. Add tests (e.g., with fake timers) to verify the class is added on toggle and removed after the expected delay.

Copilot generated this review using guidance from repository custom instructions.
// Remove transition class after animations complete; clear any pending timer
// to avoid races when the user clicks rapidly.
if (_transitionTimer) { clearTimeout(_transitionTimer); }
_transitionTimer = setTimeout(function () {
document.documentElement.classList.remove('theme-transition');
_transitionTimer = null;
}, 350);
}

/* ── Boot ─────────────────────────────────────────────────────────────── */
Expand Down
Loading
Loading