mirror of
https://github.com/IliesAllali/parenthese.git
synced 2026-11-09 15:50:58 +00:00
IliesAllaliandClaude Opus 5.5
9ba1aee96f
- Fusion de main : graphAdapter.js supprimé par #119 ; le sexe est relu par normalizeSex au chargement du graphe (data/mockData.js), en plus du serveur qui renvoie déjà male/female/other/null. Mention retirée de i18n/en/app.js. - Sexe : trois boutons à bascule (Femme, Homme, Autre, aria-pressed). Rien de choisi = non précisé (null), la valeur par défaut ; un second clic sur le choix actif y revient. La relecture affiche « Non précisé » pour une valeur vide (sexLabel). - « Ajouter quelqu'un » : « Décédé(e), date inconnue » sort de la colonne Décès et tient sur une ligne, comme la case du prénom (règle CSS commune). Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
123 lines
6.1 KiB
CSS
123 lines
6.1 KiB
CSS
/* ============================================================
|
|
Ajouter une personne (DA terracotta)
|
|
Panneau flottant à gauche, de la même famille que la fiche.
|
|
Sur téléphone, panneau qui monte par le bas.
|
|
============================================================ */
|
|
|
|
.add-person-panel {
|
|
position: fixed;
|
|
top: 24px;
|
|
left: 24px;
|
|
bottom: 24px;
|
|
z-index: 1050;
|
|
width: 400px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 18px;
|
|
padding: 22px 20px 18px;
|
|
background: var(--pz-surface);
|
|
border: 1px solid var(--pz-line);
|
|
border-radius: var(--pz-r-l);
|
|
box-shadow: var(--pz-shadow-lg);
|
|
transform: translateX(calc(-100% - 40px));
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transition: transform 320ms var(--pz-ease), opacity 220ms ease, visibility 0s linear 320ms;
|
|
}
|
|
.add-person-panel--open {
|
|
transform: none;
|
|
opacity: 1;
|
|
visibility: visible;
|
|
transition: transform 320ms var(--pz-ease), opacity 220ms ease, visibility 0s;
|
|
}
|
|
|
|
.apn-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
|
|
.apn-close { flex: none; margin: -6px -6px 0 0; }
|
|
|
|
.apn-form { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 14px; }
|
|
.apn-scroll { flex: 1; min-height: 0; overflow-y: auto; display: grid; gap: 16px; align-content: start; margin: 0 -6px; padding: 2px 6px 4px; scrollbar-width: thin; scrollbar-color: var(--pz-line) transparent; }
|
|
|
|
.apn-optional { font-weight: 400; color: var(--pz-faint); margin-left: 4px; }
|
|
.apn-input--error { border-color: var(--pz-danger) !important; box-shadow: 0 0 0 3px var(--pz-danger-bg) !important; }
|
|
.apn-error-text { margin: -8px 0 0; font: 500 12.5px var(--pz-sans); color: var(--pz-danger); }
|
|
|
|
.apn-section { display: grid; gap: 12px; padding-top: 16px; border-top: 1px solid var(--pz-line-soft); }
|
|
.apn-types .pz-tab { font-size: 13px; padding: 0 6px; }
|
|
/* Sexe : quatre choix, chacun sur une ligne même dans la colonne étroite du panneau */
|
|
.apn-sex .pz-tab { white-space: nowrap; padding: 0 4px; }
|
|
|
|
.apn-relation { position: relative; }
|
|
.apn-search { position: relative; display: flex; align-items: center; }
|
|
.apn-search input { padding-left: 38px !important; padding-right: 36px !important; }
|
|
.apn-search-icon { position: absolute; left: 13px; color: var(--pz-muted); pointer-events: none; }
|
|
.apn-search-chevron { position: absolute; right: 13px; color: var(--pz-faint); pointer-events: none; }
|
|
|
|
.apn-dropdown {
|
|
position: absolute;
|
|
top: calc(100% + 6px);
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 5;
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 5px;
|
|
max-height: 260px;
|
|
overflow-y: auto;
|
|
background: var(--pz-surface);
|
|
border: 1px solid var(--pz-line);
|
|
border-radius: var(--pz-r-m);
|
|
box-shadow: var(--pz-shadow-lg);
|
|
animation: pz-rise 160ms var(--pz-ease) both;
|
|
}
|
|
.apn-dropdown-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 42px; padding: 5px 8px; border: 0; border-radius: 10px; background: none; cursor: pointer; text-align: left; }
|
|
@media (hover: hover) and (pointer: fine) { .apn-dropdown-item:hover { background: var(--pz-a50); } }
|
|
.apn-avatar { width: 30px; height: 30px; flex: none; display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: var(--pz-a100); color: var(--pz-a700); font: 400 14px/1 var(--pz-serif); }
|
|
.apn-avatar img { width: 100%; height: 100%; object-fit: cover; }
|
|
.apn-dropdown-name { flex: 1; min-width: 0; font: 400 16px/1.2 var(--pz-serif); color: var(--pz-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.apn-dropdown-name em { font-style: italic; font-weight: 300; }
|
|
.apn-dropdown-date { flex: none; font: 400 12px var(--pz-sans); color: var(--pz-muted); font-variant-numeric: tabular-nums; }
|
|
|
|
.apn-links { display: grid; gap: 6px; }
|
|
.apn-link { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 12px; border-radius: 999px; background: var(--pz-a50); border: 1px solid var(--pz-a100); }
|
|
.apn-link-type { flex: none; font: 500 12px var(--pz-sans); color: var(--pz-a700); }
|
|
.apn-link-name { flex: 1; min-width: 0; font: 400 15px/1.2 var(--pz-serif); color: var(--pz-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.apn-link-remove { width: 30px; min-height: 30px; color: var(--pz-muted); }
|
|
|
|
.apn-actions { flex: none; display: flex; justify-content: flex-end; gap: 8px; padding-top: 14px; border-top: 1px solid var(--pz-line); }
|
|
|
|
@media (max-width: 768px) {
|
|
.add-person-panel {
|
|
top: auto;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
width: auto;
|
|
max-height: 90dvh;
|
|
border-radius: 26px 26px 0 0;
|
|
border-bottom: 0;
|
|
padding: 18px 18px calc(16px + env(safe-area-inset-bottom));
|
|
transform: translateY(100%);
|
|
transition: transform 400ms var(--pz-ease-drawer), opacity 220ms ease, visibility 0s linear 400ms;
|
|
}
|
|
.add-person-panel--open { transform: none; transition: transform 400ms var(--pz-ease-drawer), opacity 220ms ease, visibility 0s; }
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.add-person-panel, .add-person-panel--open { transform: none; transition: opacity 180ms ease, visibility 0s linear 180ms; }
|
|
.add-person-panel--open { transition: opacity 180ms ease, visibility 0s; }
|
|
}
|
|
|
|
/* Décédé(e) sans date connue (issue #77) */
|
|
.apn-deceased { display: inline-flex; align-items: center; gap: 7px; margin-top: 6px; font: 400 13px var(--pz-sans); color: var(--pz-ink-2); cursor: pointer; }
|
|
.apn-deceased input { width: 15px; height: 15px; accent-color: var(--pz-a500); }
|
|
/* Case sous une ligne de deux champs (« Je ne connais pas son prénom », « Décédé(e), date inconnue ») : sur une ligne,
|
|
sous les deux champs sur ordinateur, sous son champ sur téléphone (ordre du DOM) */
|
|
.apn-row > .apn-row-check { grid-column: 1 / -1; grid-row: 2; margin-top: -6px; white-space: nowrap; justify-self: start; }
|
|
@media (max-width: 480px) { .apn-row > .apn-row-check { grid-row: auto; } }
|
|
|
|
/* Colonnes alignées en haut : la case « décédé(e) » sous le décès ne décale pas la naissance */
|
|
.apn-row { align-items: start; }
|
|
|
|
/* Titre de section en casse normale (pas de sur-titre en capitales dans le panneau d'ajout) */
|
|
.apn-section-title { font: 500 14px/1.3 var(--pz-sans); color: var(--pz-ink); margin: 0 0 10px; }
|