Nicolas
1bc9304cdc
Dernière PR (4/4) du chantier « gestion des restes » (issue #34). `@dnd-kit/core` (+ `@dnd-kit/utilities`) — première et seule utilisation de DnD de l'app. `PlanningPage` monte un `<DndContext>` (Mouse + Touch + Keyboard sensors, distance d'activation 5px pour ne pas voler le clic « Jeter ») autour de la grille et du panier. - `LeftoversBasket` : chaque ligne a une poignée `⠿` `useDraggable` — le nœud draggable est la poignée elle-même (petite), pas toute la `<li>`, pour qu'une détection de collision au pointeur (`pointerWithin`, repli `closestCenter` pour le clavier) résolve proprement vers la seule case sous le curseur. `data` porte `sourceItemId`/`recipeName`/`available`. - `MealCell` : `useDroppable` (`data: { date, weekDay, meal }`), surbrillance `--drop-over` au survol. Un item « restes » (`sourceItem !== null`) porte un badge ♻️ sur sa pastille. - Au drop, `onDragEnd` ouvre `LeftoverAssignDialog` (quantité, défaut = disponible, plafonné) → `POST /planning/items/leftover` (`apiClient.assignLeftover`) → nouvel item patché dans `planning.items`. Tests : `planning-leftovers.feature` (Gherkin) — parcours complet drag → confirmation quantité → pastille ♻️ visible → compteur du panier à jour ; + jet d'un reste depuis le panier. Le drag est piloté par événements souris bruts (mousedown poignée → mousemove ×2 → mouseup cible). Vérifié localement : 2/2, et aucune régression sur `leftovers-basket.cy.ts` / `planning-page.cy.ts` / `planning.feature`. i18n : `planning.leftovers.*` (badge, poignée, dialogue). Docs : `frontend-architecture.md`. Closes #34 Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
266 lines
6.9 KiB
SCSS
266 lines
6.9 KiB
SCSS
// =============================================================================
|
|
// Styles specific to PlanningPage — colocated next to PlanningPage.tsx since
|
|
// nothing else uses these classes. Ported from the reviewed HTML mockup
|
|
// (see the plan file / PR description) onto the app's real design tokens —
|
|
// no light/dark duplication needed here, unlike the standalone mockup:
|
|
// every `var(--color-*)` below already resolves per-theme globally (see
|
|
// styles/_theme.scss).
|
|
// =============================================================================
|
|
|
|
// `.app-content` (AppLayout.scss) already stretches to the full viewport
|
|
// height (flex item of `.app-layout`, itself `min-height: 100vh` — the
|
|
// same stretch the sidebar relies on to pin its footer at the bottom).
|
|
// `.planning-page` just needs to fill that box and lay out as a column so
|
|
// `.planning-grid-wrapper` can grow to fill whatever's left under the
|
|
// header, instead of the grid being only as tall as its content.
|
|
.planning-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-lg);
|
|
}
|
|
|
|
&__status {
|
|
color: var(--color-text-muted);
|
|
font-size: var(--font-size-md);
|
|
}
|
|
|
|
&__status--error {
|
|
color: var(--color-error);
|
|
}
|
|
|
|
// "Commencer à cuisiner" — same solid-primary treatment as the recipe
|
|
// picker's confirm button (features/planning/recipe-picker-dialog.scss).
|
|
&__cook-btn {
|
|
background: var(--color-primary);
|
|
color: var(--color-surface);
|
|
border: none;
|
|
border-radius: var(--radius-base);
|
|
padding: var(--space-sm) var(--space-md);
|
|
font-family: var(--font-body);
|
|
font-size: var(--font-size-sm);
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
background: var(--color-primary-hover);
|
|
}
|
|
|
|
&:disabled {
|
|
opacity: 0.6;
|
|
cursor: not-allowed;
|
|
}
|
|
}
|
|
}
|
|
|
|
// --- The grid itself --------------------------------------------------------
|
|
// (Week navigator + calendar popover styles now live in
|
|
// features/planning/week-navigator.scss, imported by WeekNavigator.tsx
|
|
// directly — extracted once ShoppingListPage started reusing that
|
|
// component too.)
|
|
.planning-grid-wrapper {
|
|
flex: 1;
|
|
min-height: 0;
|
|
overflow: auto;
|
|
background: var(--color-surface);
|
|
border-radius: var(--radius-md);
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
table.planning-grid {
|
|
width: 100%;
|
|
height: 100%;
|
|
min-width: 62rem;
|
|
border-collapse: collapse;
|
|
table-layout: fixed;
|
|
|
|
th,
|
|
td {
|
|
border: 1px solid var(--color-border);
|
|
vertical-align: top;
|
|
}
|
|
|
|
thead th {
|
|
padding: var(--space-sm) var(--space-md);
|
|
background: var(--color-surface-alt);
|
|
text-align: left;
|
|
|
|
&:first-child {
|
|
width: 9rem;
|
|
}
|
|
|
|
.day-name {
|
|
display: block;
|
|
font-size: var(--font-size-xs);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.04em;
|
|
color: var(--color-text-muted);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.day-date {
|
|
display: block;
|
|
font-size: var(--font-size-md);
|
|
font-weight: 700;
|
|
margin-top: 2px;
|
|
color: var(--color-text);
|
|
}
|
|
|
|
&.today {
|
|
background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface-alt));
|
|
|
|
.day-date {
|
|
color: var(--color-primary);
|
|
}
|
|
}
|
|
}
|
|
|
|
tbody th {
|
|
padding: var(--space-sm) var(--space-md);
|
|
background: var(--color-surface-alt);
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
font-size: var(--font-size-sm);
|
|
font-weight: 600;
|
|
}
|
|
|
|
td.today {
|
|
background: color-mix(in srgb, var(--color-primary) 4%, var(--color-surface));
|
|
}
|
|
|
|
// Repas groupés par moment de la journée (Matin / Midi / Après-midi /
|
|
// Soir) — piloté uniquement via `border-bottom` (jamais `border-top`) :
|
|
// avec `border-collapse: collapse`, deux bordures différentes qui se
|
|
// rencontrent sur la même arête peuvent fusionner de façon ambiguë selon
|
|
// le navigateur — en désactivant `border-top` sur tbody, chaque arête
|
|
// horizontale n'est plus définie que d'un seul côté, sans ambiguïté
|
|
// possible. Toutes les séparations entre repas sont pleines (même couleur
|
|
// que les séparations de jour) ; seule la frontière entre deux groupes
|
|
// ("band-end", la dernière ligne d'un groupe) se distingue par une
|
|
// épaisseur plus marquée.
|
|
tbody th,
|
|
tbody td {
|
|
border-top: none;
|
|
border-bottom: 1px solid var(--color-border);
|
|
}
|
|
|
|
tbody tr.band-end th,
|
|
tbody tr.band-end td {
|
|
border-bottom: 2px solid var(--color-border);
|
|
}
|
|
}
|
|
|
|
// --- Case : pastilles de recette + bouton "+" -------------------------------
|
|
.meal-cell {
|
|
padding: var(--space-sm);
|
|
|
|
// Highlighted while a leftover card is dragged over it (@dnd-kit's
|
|
// `isOver`) — see PlanningPage's `MealCell` droppable.
|
|
&--drop-over {
|
|
background: var(--color-tag);
|
|
outline: 2px dashed var(--color-primary);
|
|
outline-offset: -2px;
|
|
}
|
|
}
|
|
|
|
.meal-cell__content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-xs);
|
|
height: 100%;
|
|
}
|
|
|
|
.meal-cell__recipes {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-xs);
|
|
}
|
|
|
|
.recipe-chip {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-xs);
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 0.3rem var(--space-sm);
|
|
border-radius: var(--radius-pill);
|
|
background: var(--color-tag);
|
|
color: var(--color-tag-ink);
|
|
font-size: var(--font-size-xs);
|
|
font-weight: 600;
|
|
|
|
&__name {
|
|
flex: 1;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
// A "leftovers" chip (`sourceItem !== null`) — served from another
|
|
// slot's batch, nothing cooked for it. Dimmer + a ♻️ marker.
|
|
&--leftover {
|
|
background: var(--color-surface-alt);
|
|
color: var(--color-text-muted);
|
|
}
|
|
|
|
&__leftover-badge {
|
|
margin-right: 0.15rem;
|
|
}
|
|
|
|
&__remove {
|
|
flex-shrink: 0;
|
|
width: 1rem;
|
|
height: 1rem;
|
|
display: grid;
|
|
place-items: center;
|
|
border: none;
|
|
background: none;
|
|
cursor: pointer;
|
|
color: inherit;
|
|
opacity: 0;
|
|
font-size: 0.65rem;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
&:hover &__remove {
|
|
opacity: 0.7;
|
|
}
|
|
|
|
&__remove:hover {
|
|
opacity: 1;
|
|
background: rgba(0, 0, 0, 0.15);
|
|
}
|
|
}
|
|
|
|
// Pleine largeur, sans bordure (juste un fond au survol — plus épuré qu'un
|
|
// contour pointillé), et toujours collé en haut de la case (juste sous la
|
|
// dernière recette s'il y en a), jamais centré au milieu d'une case vide.
|
|
.add-recipe-btn {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 0.35rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: none;
|
|
border-radius: var(--radius-base);
|
|
background: none;
|
|
color: var(--color-text-muted);
|
|
font-size: var(--font-size-base);
|
|
line-height: 1;
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
color: var(--color-primary);
|
|
background: color-mix(in srgb, var(--color-primary) 8%, transparent);
|
|
}
|
|
}
|