jacobh2
76b1e712b9
Works through every numbered item in NextSteps260913.md section 3, plus the three known verification issues in section 4.1. Surface what the backend already computed: - 3.1 render surplus_advice in PlanResults, mirroring the shortfall remedies - 3.2 surface VacationBalance.is_assumed so assumed statutory years are visible - 3.3 age-4 expiry given the proposed plan, via a new Age4Projection reusing the existing _age4_projections arithmetic (Dashboard stat verified, not rebuilt) Calendar cluster (one pass over the holiday data): - new GET /api/calendar/days exposing roda dagar, klamdagar and day overrides, paginated four years at a time - 3.4 shade roda dagar/klamdagar, with R/K badges so colour is not the only signal - 3.6 click-to-override behind an explicit mode toggle, leaving drag multi-select intact - 3.7 click month/year to advance - 3.8 per-year red-days list in Settings, statutory days plus overrides i18n: - 3.5 five backend-generated Swedish surfaces converted to message_key + data, following the tips_service pattern; old string fields replaced, not kept Flexible wishes (3.9): - PLANNING_ENGINE_SPEC section 10: window_mode, candidate search, cost function, deterministic tie-break, two-pass ordering, test matrix rows 15-24 - backend: entity, migration 006, _FULL_SCHEMA sync, repository, allocator - frontend: season-preset toggle in WishEditor, unplaced outcome rendering Fixes (4.1): - pin typecheck to the local tsc rather than npx resolving a newer TypeScript - ignore generated coverage/ and dist/ in the ESLint flat config - fix the flaky usePlanApply test properly, with waitFor rather than a retry Tests: backend 361 -> 404, frontend 540 -> 704. Coverage 89.47% -> 96.52% lines. Not yet verified in a browser. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01RXMhc9nT6sNz1SL4j8dznL
248 lines
4.3 KiB
CSS
248 lines
4.3 KiB
CSS
/* S7 - Responsive & Accessibility */
|
|
|
|
/* Mobile - Small screens (max 640px) */
|
|
@media (max-width: 640px) {
|
|
/* Sticky header with less padding */
|
|
.header {
|
|
padding: var(--sp-3) var(--sp-4);
|
|
}
|
|
|
|
.header__top {
|
|
margin-bottom: var(--sp-3);
|
|
}
|
|
|
|
.header__nav {
|
|
gap: var(--sp-2);
|
|
}
|
|
|
|
.header__nav-link {
|
|
padding: var(--sp-2) var(--sp-3);
|
|
font-size: var(--fs-sm);
|
|
}
|
|
|
|
.header__title {
|
|
font-size: var(--fs-base);
|
|
}
|
|
|
|
.header__identity {
|
|
gap: var(--sp-2);
|
|
font-size: var(--fs-sm);
|
|
}
|
|
|
|
/* Main content */
|
|
[data-testid='layout-main'] {
|
|
padding: var(--sp-4);
|
|
}
|
|
|
|
.dashboard__section,
|
|
.settings-page__section,
|
|
.calendar__section,
|
|
.tips-page__section {
|
|
padding: var(--sp-4);
|
|
margin-bottom: var(--sp-4);
|
|
}
|
|
|
|
/* Metrics - single column */
|
|
.overview-metrics__list {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
/* Forms - full width */
|
|
.form-group input,
|
|
.form-group select,
|
|
.form-group textarea {
|
|
max-width: none;
|
|
width: 100%;
|
|
}
|
|
|
|
.form-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.form-grid .form-group input,
|
|
.form-grid .form-group select {
|
|
max-width: none;
|
|
}
|
|
|
|
/* Tables */
|
|
.days-breakdown__table,
|
|
.parental-leave-breakdown__table,
|
|
.vacation-days-table {
|
|
font-size: var(--fs-sm);
|
|
}
|
|
|
|
.days-breakdown__table th,
|
|
.days-breakdown__table td,
|
|
.parental-leave-breakdown__table th,
|
|
.parental-leave-breakdown__table td,
|
|
.vacation-days-table th,
|
|
.vacation-days-table td {
|
|
padding: var(--sp-2) var(--sp-3);
|
|
}
|
|
|
|
.vacation-days-table__input {
|
|
width: 70px;
|
|
}
|
|
|
|
/* Modals */
|
|
.qrcode-modal {
|
|
width: 95%;
|
|
padding: var(--sp-4);
|
|
max-height: 95vh;
|
|
}
|
|
|
|
.qrcode-modal__qr-image {
|
|
max-width: 250px;
|
|
}
|
|
|
|
.qrcode-modal__button-group {
|
|
flex-direction: column-reverse;
|
|
}
|
|
|
|
.qrcode-modal__button {
|
|
width: 100%;
|
|
}
|
|
|
|
/* Footer */
|
|
footer {
|
|
padding: var(--sp-4);
|
|
font-size: var(--fs-sm);
|
|
}
|
|
|
|
/* Button group */
|
|
.modal__footer {
|
|
flex-direction: column-reverse;
|
|
}
|
|
|
|
.modal__footer button {
|
|
width: 100%;
|
|
}
|
|
|
|
/* Remove max-width on modal content */
|
|
.modal-content {
|
|
width: 95%;
|
|
padding: var(--sp-4);
|
|
max-height: 95vh;
|
|
}
|
|
|
|
/* Lists */
|
|
.dashboard__break-item {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: var(--sp-2);
|
|
}
|
|
|
|
/* Loading spinner */
|
|
.loading-spinner {
|
|
padding: var(--sp-5);
|
|
min-height: 200px;
|
|
}
|
|
|
|
.loading-spinner__icon {
|
|
font-size: 36px;
|
|
}
|
|
|
|
/* Progress chart */
|
|
.progress-chart__stats {
|
|
flex-direction: column;
|
|
gap: var(--sp-2);
|
|
}
|
|
|
|
/* Calendar responsiveness */
|
|
.calendar__grid {
|
|
font-size: var(--fs-sm);
|
|
}
|
|
|
|
.calendar__weekday,
|
|
.calendar-day {
|
|
padding: var(--sp-2);
|
|
}
|
|
|
|
.calendar-day__number {
|
|
font-size: var(--fs-sm);
|
|
}
|
|
}
|
|
|
|
/* Tablet - Medium screens (641px to 1024px) */
|
|
@media (min-width: 641px) and (max-width: 1024px) {
|
|
.overview-metrics__list {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
|
|
.form-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
|
|
[data-testid='layout-main'] {
|
|
padding: var(--sp-4);
|
|
}
|
|
}
|
|
|
|
/* Accessibility - Reduced Motion */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.01ms !important;
|
|
scroll-behavior: auto !important;
|
|
}
|
|
|
|
.loading-spinner__icon {
|
|
animation: none;
|
|
}
|
|
|
|
.progress-chart__fill {
|
|
transition: none;
|
|
}
|
|
|
|
.header__nav-link,
|
|
.header__logout-button,
|
|
.header__child-select,
|
|
input,
|
|
select,
|
|
textarea,
|
|
button {
|
|
transition: none;
|
|
}
|
|
}
|
|
|
|
/* High Contrast Mode */
|
|
@media (prefers-contrast: more) {
|
|
:root {
|
|
--c-text: #000;
|
|
--c-accent: #1f4d2b;
|
|
--c-border: #333;
|
|
}
|
|
|
|
button:focus-visible,
|
|
a:focus-visible,
|
|
input:focus-visible,
|
|
select:focus-visible,
|
|
textarea:focus-visible {
|
|
outline-width: 3px;
|
|
}
|
|
}
|
|
|
|
/* Color Scheme Preference - Dark Mode (future-proofing) */
|
|
@media (prefers-color-scheme: dark) {
|
|
/* Currently not implemented, but prepared */
|
|
}
|
|
|
|
/* Keyboard Navigation */
|
|
:focus-visible {
|
|
outline: 2px solid var(--c-accent);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* High Contrast Focus */
|
|
button:focus-visible,
|
|
a:focus-visible,
|
|
input:focus-visible,
|
|
select:focus-visible,
|
|
textarea:focus-visible {
|
|
outline: 2px solid var(--c-accent);
|
|
outline-offset: 2px;
|
|
}
|