mathieuandClaude Opus 5
1b47828c11
Cinq retours d'usage du 2026-08-21 qui ne touchent que l'interface (lots Q, R, S, T et V d'IDEES.md). Aucune migration, aucune entité modifiée. Q — L'ordre des champs du formulaire livre est une décision, pas une mise en page : type de document, thèmes, auteurs, rôles, puis le reste. Le type commande la suite de la saisie — les rôles ne se posent que là — et il fallait descendre tout le formulaire pour dire « c'est une BD », c'est-à-dire après avoir saisi ce qui en dépend. Rien n'est présélectionné : « non précisé » ne prétend toujours rien, et les rôles gardent leur règle actée (deux auteurs au moins, BD ou non). Des tests verrouillent la préservation des rôles à chaque frappe, que ce réordonnancement ne doit pas entamer. R — Bandeau et menu passent dans un même conteneur collant : sur PC la rangée des six destinations défilait avec la page et devenait inatteignable au bas d'une longue liste. Un seul conteneur, et non deux éléments collants superposés, qui auraient obligé à écrire en dur la hauteur d'un bandeau qui varie avec la pastille hors-ligne et le nom d'utilisateur. Sur téléphone le menu déployé occupe l'écran entier : sous le bandeau, il partageait l'écran avec la liste qu'on quittait. Trois portes de sortie s'ajoutent à la fermeture déjà en place sur LocationChanged — croix, Échap (le calque prend le focus à l'ouverture, comme celui d'agrandissement des couvertures) et clic hors des liens. Le plein écran est explicitement annulé au-delà de 40 rem, sans quoi un menu ouvert au doigt puis une fenêtre agrandie laisseraient un calque sans bascule pour le refermer. Toutes les règles du menu restent en feuille globale. S — ⚠️ Le retour du bandeau devient une remontée hiérarchique d'un cran de route, ce qui RENVERSE la décision actée le 2026-08-20 (« le retour passe par l'historique du navigateur, jamais par une destination calculée »). Le motif d'alors reste vrai — un même écran s'atteint par plusieurs chemins — mais l'historique remonte aussi les allers-retours (filtre, ordre, édition) et l'on cliquait cinq fois sans quitter le même écran. La parenté est une table explicite et testable, pas un découpage naïf d'URL : toutes les routes n'ont pas la forme d'une arborescence, /auteurs/{id}/bibliographie remontant à la liste des auteurs, dont il n'existe pas de fiche. Le garde-fou « ne jamais sortir de l'application » y vit désormais aussi : la fonction rend toujours un chemin interne, là où history.length ne disait pas ce qu'on croyait dans une PWA standalone. js/navigation.js n'a plus d'utilisateur et disparaît. T — Sur la fiche d'une série, « Modifier » et « Changer l'ordre » rejoignent la ligne du titre et de l'avancement, groupés à droite comme la bibliographie et la liste des auteurs le font déjà. Reléguées au bas de l'écran, les actions d'une saga de vingt tomes ne se découvraient qu'après avoir déroulé la liste. « Changer l'ordre » n'apparaît toujours qu'à partir de deux tomes ou deux sous-séries. V — Dans la liste des revues, toute la ligne ouvre la fiche, comme la carte entière le fait au catalogue. Le titre reste un vrai lien — adresse, clavier, clic-milieu — et son clic ne remonte pas jusqu'à la ligne, qui naviguerait une seconde fois ; toute action posée un jour sur cette ligne devra faire de même. ⚠️ Aucune vérification en navigateur : le rendu de ces écrans repose sur la compilation et la relecture. 552 tests au vert (506 avant ce lot). Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
137 lines
4.1 KiB
CSS
137 lines
4.1 KiB
CSS
/* ⚠️ Ce n'est plus le bandeau qui colle en haut, mais le conteneur `.entete` qui le réunit au
|
|
menu (feuille globale, lot R) : les deux doivent rester solidaires au défilement. */
|
|
.bandeau {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.6rem 0.75rem;
|
|
background: #1b3a5c;
|
|
color: #fff;
|
|
}
|
|
|
|
.marque {
|
|
color: #fff;
|
|
font-size: 1.15rem;
|
|
font-weight: 600;
|
|
text-decoration: none;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.4rem;
|
|
|
|
/* La marque prend la place restante : c'est elle qui repousse la bascule à droite,
|
|
sans dépendre d'un justify-content que le nombre d'éléments du bandeau ferait varier
|
|
(la pastille hors-ligne et le nom d'utilisateur vont et viennent). */
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
}
|
|
|
|
.marque-nom {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.marque-logo {
|
|
width: 1.3rem;
|
|
height: 1.3rem;
|
|
flex: 0 0 auto;
|
|
color: #fff;
|
|
}
|
|
|
|
/* Boutons du bandeau (retour, bascule du menu). Cibles tactiles de 2.25rem : on les touche
|
|
au pouce, souvent en marchant. */
|
|
.bandeau-icone {
|
|
flex: 0 0 auto;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 2.25rem;
|
|
height: 2.25rem;
|
|
padding: 0;
|
|
font-size: 1.15rem;
|
|
line-height: 1;
|
|
color: #fff;
|
|
background: transparent;
|
|
border: 1px solid rgba(255, 255, 255, 0.35);
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.bandeau-icone:hover,
|
|
.bandeau-icone:focus-visible {
|
|
background: rgba(255, 255, 255, 0.15);
|
|
}
|
|
|
|
.utilisateur {
|
|
flex: 0 1 auto;
|
|
font-size: 0.8rem;
|
|
opacity: 0.85;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
max-width: 40%;
|
|
}
|
|
|
|
/* L'état du réseau change ce que l'application permet : il se voit dans le bandeau, en
|
|
permanence, et pas seulement au moment où une action échoue. */
|
|
.pastille-hors-ligne {
|
|
flex: 0 0 auto;
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.02em;
|
|
padding: 0.15rem 0.5rem;
|
|
border-radius: 999px;
|
|
background: #f5d76e;
|
|
color: #4a3800;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* Dire d'où viennent les données affichées, et de quand elles datent : sans cette phrase, un
|
|
catalogue hors-ligne est indiscernable d'un catalogue à jour. */
|
|
.bandeau-reseau {
|
|
max-width: 46rem;
|
|
margin: 0 auto;
|
|
padding: 0.6rem 1rem;
|
|
background: #fff8e1;
|
|
border-bottom: 1px solid #e6d28a;
|
|
color: #6b5200;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.contenu {
|
|
display: block;
|
|
width: 100%;
|
|
max-width: 46rem;
|
|
margin: 0 auto;
|
|
/* Marge basse généreuse : la barre d'actions flottantes ne doit pas masquer le dernier
|
|
livre de la liste. */
|
|
padding: 1rem 1rem 6rem;
|
|
}
|
|
|
|
/*
|
|
⚠️ Les styles du MENU ne sont PAS ici, mais dans `wwwroot/css/app.css`.
|
|
|
|
Deux raisons, la première étant un vrai bug corrigé le 2026-08-20 :
|
|
|
|
1. `NavLink` est un COMPOSANT. L'isolation CSS ne pose son attribut de portée (`b-xxxx`)
|
|
que sur les éléments écrits dans le balisage du composant courant — jamais sur ce que
|
|
rend un composant enfant. `.menu-lien` déclaré ici ne pouvait donc atteindre AUCUN des
|
|
six liens : le `<nav>` recevait bien son fond sombre, et les liens restaient en bleu
|
|
souligné par défaut. C'est exactement ce que l'utilisateur voyait (« toujours les liens
|
|
trop moches et pas ressemblant à un menu »). Le gabarit Blazor par défaut contourne cela
|
|
avec `::deep`.
|
|
2. Une feuille globale ne dépend pas du bundle `MaBibli.Client.styles.css`, qui est
|
|
précisément le fichier qu'un cache a déjà servi périmé ou pas du tout (voir « lot A1 »
|
|
et « L'icône cassée du bandeau » dans CLAUDE.md). La navigation est ce qui doit le moins
|
|
pouvoir tomber.
|
|
*/
|
|
|
|
@media (min-width: 40rem) {
|
|
/* La rangée du menu est visible en permanence à partir de cette largeur : la bascule
|
|
n'a plus rien à déployer. Le point de rupture est répété dans `app.css` — les deux
|
|
doivent rester identiques. */
|
|
.bandeau-bascule {
|
|
display: none;
|
|
}
|
|
}
|