xpltdco/media-rip
1
0
Fork 0
mirror of https://github.com/xpltdco/media-rip.git synced 2026-04-02 18:43:59 -06:00
Code Issues Projects Releases Packages Wiki Activity Actions

Mobile header full-width + live theme preview on save

Browse source 
Header: remove max-width constraint on mobile so header background
spans the full viewport width.

Theme: updateAdminConfig now applies the new theme immediately if
the user's current mode matches the changed side (e.g. changing
dark theme while in dark mode updates live, without page reload
or dark→light→dark toggle).
This commit is contained in:
xpltd 2026-03-22 17:10:59 -05:00
parent 9cfa9818f9
commit 4870157dbd
2 changed files with 18 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
frontend/src/components/AppHeader.vue
View file

@ -27,6 +27,7 @@ function goHome(): void {
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 100; z-index: 100;
width: 100%;
height: var(--header-height); height: var(--header-height);
background: var(--color-surface); background: var(--color-surface);
border-bottom: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border);
@ -44,6 +45,12 @@ function goHome(): void {
align-items: center; align-items: center;
} }
@media (max-width: 767px) {
.header-content {
max-width: none;
}
}
.header-title { .header-title {
font-size: var(--font-size-xl); font-size: var(--font-size-xl);
font-weight: 700; font-weight: 700;

12
frontend/src/stores/theme.ts
View file

@ -115,12 +115,22 @@ export const useThemeStore = defineStore('theme', () => {
} }
/** /**
* Update admin theme config (called after saving settings). * Update admin theme config and apply if current mode matches.
* Called after saving settings — gives live preview without page reload.
*/ */
function updateAdminConfig(darkTheme: string, lightTheme: string, defaultMode: 'dark' | 'light'): void { function updateAdminConfig(darkTheme: string, lightTheme: string, defaultMode: 'dark' | 'light'): void {
adminDarkTheme.value = darkTheme adminDarkTheme.value = darkTheme
adminLightTheme.value = lightTheme adminLightTheme.value = lightTheme
adminDefaultMode.value = defaultMode adminDefaultMode.value = defaultMode
// Apply the new theme if user's current mode matches the changed side
if (currentMode.value === 'dark') {
currentTheme.value = darkTheme
_apply(darkTheme)
} else {
currentTheme.value = lightTheme
_apply(lightTheme)
}
} }
/** /**