football2801
a302ac09b4
CI / test (push) Has been cancelled
Lets users opt into the new atmospheric design without affecting users on v1.
Adds a beta-flag toggle in Settings → Design. Server-side preference persists
across devices; a cookie mirrors it so unauthenticated Twig pages do correct
first-paint without an extra DB roundtrip.
Backend:
- User.designVersion column (nullable VARCHAR(10); null defaults to 'v1')
- Migration Version20260515120000
- PATCH /api/user/design endpoint accepting 'v1'|'v2', sets wevisto_design cookie
- SpaController injects data-design on <html> + refreshes the cookie on every
SPA load (keeps cross-device pref in sync)
- Twig templates (base, login, register, help, setup, token-*) read the
cookie via {{ app.request.cookies.get('wevisto_design')|default('v1') }}
so login/setup pages also respect the user's design choice
Frontend:
- design-v2.scss — opt-in overlay scoped under [data-design="v2"]. Overrides
--color-* tokens to dusk variants per theme (warm-craft → amber, ocean-dusk
stays, etc.), adds harbor photo backdrop via body::before with theme tint
via body::after. Glass-card blur on existing surfaces. v1 untouched.
- harbor.jpg shipped as a public asset (270KB, single-fetch, cached)
- User type gains designVersion ('v1' | 'v2')
- SettingsView toggle (Original / Atmospheric) calls the API, updates the
data-design attribute optimistically, reverts on failure
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2 lines
6.1 KiB
CSS
2 lines
6.1 KiB
CSS
.settings[data-v-b97700d6]{padding:var(--space-4) var(--space-4) calc(var(--bottom-nav-height) + var(--space-6));max-width:480px;margin:0 auto}@media (width>=960px){.settings[data-v-b97700d6]{max-width:720px;padding-top:var(--space-8);padding-bottom:var(--space-8)}}.settings__title[data-v-b97700d6]{font-size:var(--text-xl);margin-bottom:var(--space-6);font-weight:700}.settings__section[data-v-b97700d6]{margin-bottom:var(--space-6)}.settings__section-title[data-v-b97700d6]{font-size:var(--text-sm);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:var(--space-3);font-weight:700}.settings__row[data-v-b97700d6]{padding:var(--space-3) 0;border-bottom:1px solid var(--color-border);font-size:var(--text-base);justify-content:space-between;align-items:center;display:flex}.settings__row-label[data-v-b97700d6]{color:var(--color-text-muted)}.settings__row-value[data-v-b97700d6]{font-weight:600}.settings__logout[data-v-b97700d6]{min-height:var(--touch-min);padding:var(--space-3) 0;color:var(--color-destructive);font-weight:600;font-size:var(--text-base);align-items:center;text-decoration:none;display:flex}.settings__action-link[data-v-b97700d6]{width:100%;min-height:var(--touch-min);padding:var(--space-3) 0;border:none;border-bottom:1px solid var(--color-border);color:var(--color-primary);font-weight:600;font-size:var(--text-base);cursor:pointer;text-align:left;background:0 0;align-items:center;font-family:inherit;display:flex}.settings__hint[data-v-b97700d6]{color:var(--color-text-muted);font-size:var(--text-sm);margin-bottom:var(--space-3);line-height:1.4}.settings__install[data-v-b97700d6]{width:100%;min-height:var(--touch-min);background:var(--color-primary);color:var(--color-on-primary);border-radius:var(--radius-pill,9999px);font-size:var(--text-base);cursor:pointer;border:none;justify-content:center;align-items:center;font-weight:700;display:flex}.install-modal[data-v-b97700d6]{padding:var(--space-4);z-index:100;background:#00000080;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.install-modal__card[data-v-b97700d6]{background:var(--color-surface);color:var(--color-text);border-radius:var(--radius-lg,16px);padding:var(--space-5);width:100%;max-width:380px;position:relative;box-shadow:0 20px 60px #00000040}.install-modal__close[data-v-b97700d6]{top:var(--space-2);right:var(--space-3);color:var(--color-text-muted);cursor:pointer;padding:var(--space-1) var(--space-2);background:0 0;border:none;font-size:1.75rem;line-height:1;position:absolute}.install-modal__title[data-v-b97700d6]{font-size:var(--text-lg);margin-bottom:var(--space-3);padding-right:var(--space-5);font-weight:700}.install-modal__steps[data-v-b97700d6]{margin:0 0 var(--space-3) var(--space-4);padding:0;line-height:1.5}.install-modal__steps li[data-v-b97700d6]{margin-bottom:var(--space-2)}.install-modal__footer[data-v-b97700d6]{color:var(--color-text-muted);font-size:var(--text-sm);margin-top:var(--space-3);border-top:1px solid var(--color-border);padding-top:var(--space-3);line-height:1.4}.pw-form[data-v-b97700d6]{gap:var(--space-3);margin-top:var(--space-2);flex-direction:column;display:flex}.pw-form__field[data-v-b97700d6]{flex-direction:column;gap:4px;display:flex}.pw-form__label[data-v-b97700d6]{font-size:var(--text-sm);color:var(--color-text-muted);font-weight:600}.pw-form__input[data-v-b97700d6]{min-height:var(--touch-min);padding:0 var(--space-3);border:1.5px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text);font-family:inherit;font-size:16px}.pw-form__input[data-v-b97700d6]:focus{outline:2px solid var(--color-primary);outline-offset:2px}.pw-form__input[aria-invalid=true][data-v-b97700d6]{border-color:var(--color-destructive,#c0392b)}.pw-form__hint[data-v-b97700d6]{font-size:var(--text-xs);color:var(--color-text-muted)}.pw-form__error[data-v-b97700d6]{font-size:var(--text-sm);color:var(--color-destructive,#c0392b)}.pw-form__success[data-v-b97700d6]{font-size:var(--text-sm);color:var(--color-success,#2e7d32);font-weight:600}.theme-grid[data-v-b97700d6]{gap:var(--space-3);grid-template-columns:repeat(3,1fr);display:grid}.theme-swatch[data-v-b97700d6]{align-items:center;gap:var(--space-2);padding:var(--space-3);background:var(--swatch-bg);border-radius:var(--radius-md);cursor:pointer;transition:border-color var(--duration-fast);min-height:var(--touch-min);border:2px solid #0000;flex-direction:column;display:flex;position:relative}.theme-swatch--active[data-v-b97700d6]{border-color:var(--swatch-primary)}.theme-swatch__preview[data-v-b97700d6]{border-radius:var(--radius-sm);background:var(--swatch-bg);border:1px solid color-mix(in srgb, var(--swatch-text) 15%, transparent);flex-direction:column;justify-content:center;gap:4px;width:100%;height:36px;padding:0 6px;display:flex}.theme-swatch__bar[data-v-b97700d6]{background:var(--swatch-primary);border-radius:3px;width:60%;height:6px;display:block}.theme-swatch__dot[data-v-b97700d6]{background:var(--swatch-text);opacity:.4;border-radius:2px;width:80%;height:4px;display:block}.theme-swatch__label[data-v-b97700d6]{font-size:var(--text-xs);color:var(--color-text);text-align:center;font-weight:600;line-height:1.2}.theme-swatch__check[data-v-b97700d6]{top:var(--space-1);right:var(--space-2);font-size:var(--text-sm);color:var(--swatch-primary);font-weight:700;position:absolute}.design-toggle[data-v-b97700d6]{gap:var(--space-2);grid-template-columns:1fr 1fr;display:grid}.design-toggle__opt[data-v-b97700d6]{background:var(--color-surface);border:2px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);cursor:pointer;text-align:left;color:var(--color-text);transition:border-color var(--duration-fast), background var(--duration-fast);font-family:inherit}.design-toggle__opt[data-v-b97700d6]:hover{border-color:var(--color-primary)}.design-toggle__opt--active[data-v-b97700d6]{border-color:var(--color-primary);background:var(--color-surface-2)}.design-toggle__label[data-v-b97700d6]{font-size:var(--text-base);margin-bottom:2px;font-weight:800;display:block}.design-toggle__sub[data-v-b97700d6]{font-size:var(--text-xs);color:var(--color-text-muted);display:block}
|