Nicolas
e8ac2d1629
- Bouton "Commencer a cuisiner" dans l'en-tete du planning, actif seulement quand la semaine affichee contient >= 1 recette ; navigue vers /cuisiner?date=<semaine>. - Page CookingSessionPage (/cuisiner) : consomme GET /cooking-session, rend les phases (mise en place / cuisson / dressage), les taches mutualisees avec badge "Mutualise" + ingredients/ustensiles resolus, et la bande "Pendant ce temps" pour les cuissons de fond. Semaine lue depuis ?date=, WeekNavigator en fallback ; recalcul a chaque visite (comme la liste de courses). - Logique pure extraite dans cooking-session.ts (composition des libelles, formatage des quantites). - i18n : bloc cookingSession.* + planning.startCooking. - apiClient.getCookingPlanForWeek. - Tests Cypress : cooking-session-page.cy.ts (layout, 3 cas), cooking-session .feature (parcours planning -> /cuisiner), assertions bouton dans planning-page.cy.ts ; step generique "button should be disabled" mutualise. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
164 lines
3.8 KiB
SCSS
164 lines
3.8 KiB
SCSS
// =============================================================================
|
|
// Styles specific to CookingSessionPage — colocated next to
|
|
// CookingSessionPage.tsx since nothing else uses these classes. Same page
|
|
// shell/status conventions as shopping-list-page.scss
|
|
// (`__header`/`__status`); below it, a vertical stack of phase sections
|
|
// each holding a "meanwhile" band and a list of task cards.
|
|
// =============================================================================
|
|
|
|
.cooking-session-page {
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
&__header {
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
gap: var(--space-md);
|
|
margin-bottom: var(--space-sm);
|
|
}
|
|
|
|
&__subtitle {
|
|
flex-shrink: 0;
|
|
margin: 0 0 var(--space-lg);
|
|
color: var(--color-text-muted);
|
|
font-size: var(--font-size-md);
|
|
}
|
|
|
|
&__status {
|
|
color: var(--color-text-muted);
|
|
font-size: var(--font-size-md);
|
|
}
|
|
|
|
&__status--error {
|
|
color: var(--color-error);
|
|
}
|
|
}
|
|
|
|
// --- Scrollable plan body --------------------------------------------------
|
|
.cooking-session {
|
|
flex: 1;
|
|
min-height: 0;
|
|
overflow: auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-lg);
|
|
|
|
// Recipe legend — one chip per planned recipe/portion pairing.
|
|
&__legend {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--space-xs);
|
|
}
|
|
|
|
&__legend-item {
|
|
padding: 0.15rem var(--space-sm);
|
|
border-radius: var(--radius-pill);
|
|
background: var(--color-surface);
|
|
box-shadow: var(--shadow-sm);
|
|
font-size: var(--font-size-sm);
|
|
color: var(--color-text);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
}
|
|
|
|
// --- One phase ----------------------------------------------------------------
|
|
.cooking-phase {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-sm);
|
|
|
|
&__title {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: var(--space-sm);
|
|
margin: 0;
|
|
font-size: var(--font-size-md);
|
|
}
|
|
|
|
&__index {
|
|
font-weight: 700;
|
|
color: var(--color-text);
|
|
}
|
|
|
|
&__kind {
|
|
font-size: var(--font-size-sm);
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.04em;
|
|
color: var(--color-text-muted);
|
|
}
|
|
|
|
// "Pendant ce temps" — passive cooks still running from earlier phases.
|
|
&__background {
|
|
border-left: 3px solid var(--color-border);
|
|
padding: var(--space-xs) var(--space-md);
|
|
color: var(--color-text-muted);
|
|
font-size: var(--font-size-sm);
|
|
|
|
&-title {
|
|
display: block;
|
|
font-weight: 600;
|
|
margin-bottom: 0.15rem;
|
|
}
|
|
|
|
ul {
|
|
margin: 0;
|
|
padding-left: var(--space-md);
|
|
}
|
|
}
|
|
|
|
&__tasks {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-sm);
|
|
}
|
|
}
|
|
|
|
// --- One task card ----------------------------------------------------------
|
|
.cooking-task {
|
|
background: var(--color-surface);
|
|
border-radius: var(--radius-md);
|
|
box-shadow: var(--shadow-sm);
|
|
padding: var(--space-sm) var(--space-md);
|
|
|
|
// A pooled prep task is the headline feature of this page — give it a
|
|
// subtle accent border so it stands out from plain recipe steps.
|
|
&--merged-prep {
|
|
border-left: 3px solid var(--color-accent);
|
|
}
|
|
|
|
&__headline {
|
|
margin: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: var(--space-xs);
|
|
font-weight: 600;
|
|
color: var(--color-text);
|
|
}
|
|
|
|
&__badge {
|
|
padding: 0.05rem var(--space-xs);
|
|
border-radius: var(--radius-pill);
|
|
background: var(--color-accent);
|
|
color: var(--color-surface);
|
|
font-size: var(--font-size-xs);
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.03em;
|
|
}
|
|
|
|
&__recipes,
|
|
&__utensils {
|
|
margin: 0.2rem 0 0;
|
|
font-size: var(--font-size-sm);
|
|
color: var(--color-text-muted);
|
|
}
|
|
}
|