feat(11-03): Alpine.js theme + i18n stores in base.html with top-right controls
- Add Alpine.store('theme') for Light/Dark/System cycling with localStorage persistence
- Add Alpine.store('i18n') with FR/EN translations for all static UI strings
- Add topbar with theme toggle button (:aria-label, @click cycle) and lang button
- Wrap main content in .main-wrapper + .topbar for layout structure
- Add .main-wrapper, .topbar, .topbar-controls styles to app.css
- Add test_theme_toggle_present integration test
- Fix test_dashboard_shows_recent_printers assertion (string now in i18n JS too)
This commit is contained in:
@@ -91,6 +91,36 @@ nav.sidebar li {
|
||||
border-left-color: var(--pico-primary, #1a73e8);
|
||||
}
|
||||
|
||||
/* Main wrapper: fills remaining space beside sidebar, stacks topbar + content */
|
||||
.main-wrapper {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Topbar: holds top-right controls */
|
||||
.topbar {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
padding: 0.5rem 1rem;
|
||||
border-bottom: 1px solid var(--pico-muted-border-color, #e0e0e0);
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.topbar-controls {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.topbar-controls button {
|
||||
padding: 0.3rem 0.6rem;
|
||||
font-size: 0.85rem;
|
||||
min-width: 2.2rem;
|
||||
}
|
||||
|
||||
/* Main content */
|
||||
.main-content {
|
||||
flex: 1 1 auto;
|
||||
|
||||
Reference in New Issue
Block a user