From b8a5122b6f9dd2dae1979093f49c68ec62702ecc Mon Sep 17 00:00:00 2001 From: mathieu Date: Fri, 21 Aug 2026 11:25:09 +0200 Subject: [PATCH] =?UTF-8?q?Rend=20l'attente=20visible,=20et=20met=20le=20c?= =?UTF-8?q?hamp=20de=20cr=C3=A9ation=20sur=20une=20ligne?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Une recherche BnF coûte environ une seconde par page, et jusqu'à dix pages pour les nouveautés : sans rien à l'écran, l'application se lit comme plantée. Le lot H l'avait montré — un écran qui ne dit rien pousse à recliquer, donc à relancer l'appel. Un indicateur ne remplace aucun message d'échec : une source muette garde ses `EtatSourceBibliographie` et ses motifs. Ici on dit « ça travaille », jamais « ça a marché ». L'animation se neutralise sous `prefers-reduced-motion`, la rondelle restant visible : c'est elle qui porte l'information, pas sa rotation. Le champ « nom d'une nouvelle série » et son bouton tiennent maintenant sur une ligne. `min-width: 0` est ce qui la fait tenir à 320 px : sans lui, un élément de formulaire refuse de rétrécir sous sa largeur intrinsèque et pousse le bouton hors de l'écran. Co-Authored-By: Claude Opus 5 --- MaBibli.Client/Composants/Patience.razor | 25 ++++++++++ MaBibli.Client/Pages/AjoutIsbn.razor | 7 +-- MaBibli.Client/Pages/Series.razor | 8 +-- MaBibli.Client/wwwroot/css/app.css | 63 ++++++++++++++++++++++++ 4 files changed, 96 insertions(+), 7 deletions(-) create mode 100644 MaBibli.Client/Composants/Patience.razor diff --git a/MaBibli.Client/Composants/Patience.razor b/MaBibli.Client/Composants/Patience.razor new file mode 100644 index 0000000..e66198d --- /dev/null +++ b/MaBibli.Client/Composants/Patience.razor @@ -0,0 +1,25 @@ +@* + Indicateur d'attente pour les appels lents (lot L1). + + ⚠️ Le besoin n'est pas décoratif. Une recherche BnF coûte environ une seconde par page, et + jusqu'à dix pages pour les nouveautés : sans rien à l'écran, l'application se lit comme + plantée, et l'utilisateur reclique — donc relance l'appel. C'est exactement ce que le lot H + avait constaté sur la bibliographie. + + ⚠️ Un indicateur NE REMPLACE PAS un message d'échec. Une source muette garde ses états + EtatSourceBibliographie et son motif : ici on dit « ça travaille », jamais « ça a marché ». + + role="status" et non role="alert" : l'attente s'annonce sans interrompre le lecteur d'écran. + L'animation est neutralisée sous prefers-reduced-motion (voir app.css). +*@ +

+ + @Message +

+ +@code { + /// Ce qu'on attend, dit à l'utilisateur. Jamais un libellé générique si l'on sait mieux. + [Parameter, EditorRequired] public string Message { get; set; } = default!; + + [Parameter] public string? Classe { get; set; } +} diff --git a/MaBibli.Client/Pages/AjoutIsbn.razor b/MaBibli.Client/Pages/AjoutIsbn.razor index 9fab010..b48854e 100644 --- a/MaBibli.Client/Pages/AjoutIsbn.razor +++ b/MaBibli.Client/Pages/AjoutIsbn.razor @@ -82,9 +82,10 @@ *@ @if (_etape == Etape.Recherche) { -

- Recherche de @FormatageIsbn.Afficher(_isbn) à la BnF, puis chez OpenLibrary… -

+ @* L1 : l'étape existait déjà pour que l'enchaînement du scan SE VOIE ; la rondelle dit en + plus que ça travaille encore, ce qu'un texte figé ne distingue pas d'un écran bloqué. *@ + } @if (_etape == Etape.Scan) diff --git a/MaBibli.Client/Pages/Series.razor b/MaBibli.Client/Pages/Series.razor index d3391a4..2634d1a 100644 --- a/MaBibli.Client/Pages/Series.razor +++ b/MaBibli.Client/Pages/Series.razor @@ -19,18 +19,18 @@ @* Créer une série depuis la liste : c'est le seul endroit d'où l'on part, et un écran de plus pour un unique champ ne se justifierait pas. *@ -
+@* M1 : le champ et son bouton sur UNE ligne. Le champ prend la place restante, le bouton + garde la sienne et son libellé ne se tronque pas — vérifié jusqu'à 320 px. *@ +
-
-
diff --git a/MaBibli.Client/wwwroot/css/app.css b/MaBibli.Client/wwwroot/css/app.css index 70dc28e..57bdcf1 100644 --- a/MaBibli.Client/wwwroot/css/app.css +++ b/MaBibli.Client/wwwroot/css/app.css @@ -1383,3 +1383,66 @@ body { border-bottom-color: #f5d76e; } } + +/* --- Attente (lot L1) ------------------------------------------------- + Un appel lent doit se voir : une recherche BnF coûte ~1 s par page, et + jusqu'à dix pages pour les nouveautés. Sans indicateur, l'écran se lit + comme planté et l'on reclique, ce qui relance l'appel. + ------------------------------------------------------------------- */ + +.attente { + display: flex; + align-items: center; + gap: 0.5rem; + color: var(--mb-texte-doux); + font-size: 0.9rem; + margin: 0.75rem 0; +} + +.attente-rondelle { + flex: 0 0 auto; + width: 1rem; + height: 1rem; + border: 2px solid var(--mb-bord); + border-top-color: var(--mb-accent); + border-radius: 50%; + animation: attente-tourne 0.8s linear infinite; +} + +@keyframes attente-tourne { + to { transform: rotate(360deg); } +} + +/* Une animation perpétuelle est précisément ce que ce réglage demande d'éviter. + L'indicateur reste visible — c'est lui qui porte l'information, pas sa rotation. */ +@media (prefers-reduced-motion: reduce) { + .attente-rondelle { + animation: none; + border-top-color: var(--mb-accent); + border-right-color: var(--mb-accent); + } +} + +/* --- Créer depuis une liste : champ + bouton sur une ligne (lot M1) ---- + ⚠️ min-width: 0 sur le champ est ce qui fait tenir la ligne à 320 px : sans + lui, un élément de formulaire refuse de rétrécir sous sa largeur intrinsèque + et pousse le bouton hors de l'écran. Le bouton, lui, ne rétrécit pas et son + libellé ne se coupe pas — un bouton tronqué ne se lit plus. + ------------------------------------------------------------------- */ + +.ligne-creation { + display: flex; + gap: 0.5rem; + align-items: stretch; + margin-bottom: 0.75rem; +} + +.ligne-creation .champ-saisie { + flex: 1 1 auto; + min-width: 0; +} + +.ligne-creation .bouton { + flex: 0 0 auto; + white-space: nowrap; +}