diff --git a/.kiro/specs/schotziad-km-tracker/design.md b/.kiro/specs/schotziad-km-tracker/design.md index 20b92b3..df464a4 100644 --- a/.kiro/specs/schotziad-km-tracker/design.md +++ b/.kiro/specs/schotziad-km-tracker/design.md @@ -338,6 +338,7 @@ src/ **`CarnetAdressesComponent`** - Liste des Adresses_Nommées (Dénomination + adresse + indication si coordonnées disponibles), triée par Dénomination, avec un bouton « Ajouter une adresse » au-dessus de la liste +- **Disposition en grille de cartes** : les adresses sont affichées les unes à côté des autres puis retournent à la ligne selon la largeur disponible (`display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr))`). Chaque carte a une taille homogène (colonnes de largeur égale, cartes étirées à la même hauteur par rangée via `align-items: stretch`), un contour (`border: 1px solid #e0e0e0; border-radius: 10px`) et un effet d'ombre (`box-shadow: 0 2px 8px rgba(0,0,0,0.1)`) la détachant du fond. La zone de contenu de la page est élargie (`max-width: 1080px`) pour laisser la place à plusieurs colonnes ; la dénomination et l'adresse sont en haut de la carte, les actions Modifier/Supprimer en bas à droite - Formulaire de création / modification présenté dans une **fenêtre modale** (overlay `.modale-overlay` + panneau `.modale-panneau`, motif partagé avec `ConfirmDialogComponent` / `ConsultationJourComponent`), ouvert via le bouton « Ajouter une adresse » (mode création) ou l'action « Modifier » d'une ligne (mode édition) ; fermée par enregistrement réussi, par le bouton « Annuler », ou par un clic sur l'arrière-plan. Le signal `modaleOuverte` pilote l'affichage - Champ `denomination` (1–100 car.) et champ `adresse` avec autocomplétion BAN (1–255 car.) ; dans la modale, les suggestions BAN sont rendues **dans le flux** du panneau (et non en position absolue) pour éviter toute troncature par le défilement du panneau - **Autocomplétion BAN** : appel à `https://api-adresse.data.gouv.fr/search/?q={saisie}&limit=5` dès 3 caractères saisis, avec debounce de 300 ms, maximum 5 suggestions ; à la sélection, le libellé normalisé remplit le champ et les coordonnées `(lat, lon)` sont conservées pour transmission diff --git a/frontend/src/app/features/carnet-adresses/carnet-adresses.component.scss b/frontend/src/app/features/carnet-adresses/carnet-adresses.component.scss index f09b5ec..5a61264 100644 --- a/frontend/src/app/features/carnet-adresses/carnet-adresses.component.scss +++ b/frontend/src/app/features/carnet-adresses/carnet-adresses.component.scss @@ -1,6 +1,6 @@ .carnet { padding: 1.5rem; - max-width: 720px; + max-width: 1080px; margin: 0 auto; display: flex; flex-direction: column; @@ -158,9 +158,10 @@ button { list-style: none; margin: 0; padding: 0; - display: flex; - flex-direction: column; - gap: 0.5rem; + display: grid; + grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); + gap: 1rem; + align-items: stretch; } .carnet__vide { @@ -170,12 +171,14 @@ button { .ligne { display: flex; + flex-direction: column; justify-content: space-between; - align-items: center; gap: 1rem; - padding: 0.75rem; - border: 1px solid #e4e4e4; - border-radius: 6px; + padding: 1rem; + border: 1px solid #e0e0e0; + border-radius: 10px; + background: #fff; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .ligne__infos { @@ -183,6 +186,7 @@ button { flex-direction: column; gap: 0.15rem; min-width: 0; + overflow-wrap: anywhere; } .ligne__denomination { @@ -203,4 +207,5 @@ button { display: flex; gap: 0.5rem; flex-shrink: 0; + justify-content: flex-end; }