Carnet d'adresses : liste en grille de cartes

- Adresses affichées en grille (côte à côte puis retour à la ligne)
- Cartes de taille homogène avec contour et effet d'ombre
- Zone de contenu élargie pour accueillir plusieurs colonnes
- Design : description de la disposition en grille de CarnetAdressesComponent
This commit is contained in:
2026-09-24 08:36:38 +02:00
parent 1c65c4dc74
commit 7ab5d25395
2 changed files with 14 additions and 8 deletions
@@ -338,6 +338,7 @@ src/
**`CarnetAdressesComponent`** **`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 - 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 - 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 - 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 - **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
@@ -1,6 +1,6 @@
.carnet { .carnet {
padding: 1.5rem; padding: 1.5rem;
max-width: 720px; max-width: 1080px;
margin: 0 auto; margin: 0 auto;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -158,9 +158,10 @@ button {
list-style: none; list-style: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
display: flex; display: grid;
flex-direction: column; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 0.5rem; gap: 1rem;
align-items: stretch;
} }
.carnet__vide { .carnet__vide {
@@ -170,12 +171,14 @@ button {
.ligne { .ligne {
display: flex; display: flex;
flex-direction: column;
justify-content: space-between; justify-content: space-between;
align-items: center;
gap: 1rem; gap: 1rem;
padding: 0.75rem; padding: 1rem;
border: 1px solid #e4e4e4; border: 1px solid #e0e0e0;
border-radius: 6px; border-radius: 10px;
background: #fff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
} }
.ligne__infos { .ligne__infos {
@@ -183,6 +186,7 @@ button {
flex-direction: column; flex-direction: column;
gap: 0.15rem; gap: 0.15rem;
min-width: 0; min-width: 0;
overflow-wrap: anywhere;
} }
.ligne__denomination { .ligne__denomination {
@@ -203,4 +207,5 @@ button {
display: flex; display: flex;
gap: 0.5rem; gap: 0.5rem;
flex-shrink: 0; flex-shrink: 0;
justify-content: flex-end;
} }