Menu en haut, retour explicite, et bibliographie qui ne rappelle plus la BnF
Navigation - La barre d'onglets du bas devient un menu en haut, sur le repli du gabarit Blazor : bascule sur téléphone, rangée sur PC. Cela renverse la décision du 2026-08-18 (le pouce atteint le bas de l'écran) : le raisonnement reste juste, mais il ne vaut rien face à une barre qui s'affiche mal. Le point tenu est qu'il existe désormais un état de repli — sans feuille de style, il reste une liste de liens lisible. - Bouton « retour » dans le bandeau, sur tous les écrans, appuyé sur l'historique du navigateur, avec repli sur le catalogue quand la pile est vide (PWA ouverte depuis l'écran d'accueil). - Le pictogramme de la marque passe en SVG en ligne : le fichier logo-bandeau.svg pouvait manquer sur un appareil dont le cache précédait son ajout, d'où l'icône cassée. Bibliographie - Case à cocher à gauche du titre, ligne centrée verticalement, boutons groupés à droite. - Barre de sélection collante EN HAUT, avec masquage groupé et « tout décocher ». - « Nouveautés » et « Ses livres chez vous » remontent à côté du filtre. - ⚠️ « Je le veux » et « Masquer » ne rechargent plus rien : ils basculent un drapeau personnel que le client connaît déjà. Auparavant chaque clic vidait le cache des bibliographies et relançait la BnF (une seconde par page, jusqu'à dix pages pour les nouveautés, qui ne sont pas mises en cache) puis relisait tout le catalogue. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
@@ -127,10 +127,6 @@ code {
|
||||
--mb-fond-doux: #f4f5f7;
|
||||
--mb-texte-doux: #5c6470;
|
||||
--mb-danger: #a4242c;
|
||||
|
||||
/* Hauteur de la barre d'onglets (MainLayout). Partagée pour que les actions flottantes
|
||||
se posent JUSTE au-dessus : deux barres fixes en bas d'écran se recouvriraient. */
|
||||
--mb-onglets-hauteur: 2.6rem;
|
||||
}
|
||||
|
||||
body {
|
||||
@@ -300,13 +296,14 @@ body {
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
/* Cette barre ne porte plus que des ACTIONS : la navigation est passée dans les onglets.
|
||||
Elle se pose au-dessus d'eux, jamais dessus. */
|
||||
/* Cette barre ne porte que des ACTIONS : la navigation est dans le menu du bandeau.
|
||||
Depuis que ce menu est passé en haut (2026-08-20), plus rien ne l'accompagne en bas de
|
||||
l'écran : elle s'y pose donc directement, sans décalage à réserver. */
|
||||
.actions-flottantes {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: calc(var(--mb-onglets-hauteur) + env(safe-area-inset-bottom));
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
@@ -817,6 +814,88 @@ body {
|
||||
border-bottom: 1px solid var(--mb-bord);
|
||||
}
|
||||
|
||||
/* ⚠️ La ligne de bibliographie, elle, est centrée : la case à cocher est à gauche du titre
|
||||
et les boutons à droite, sur la même ligne. Alignés en haut, la case flottait au-dessus du
|
||||
texte et les boutons pendaient sous lui — c'est ce qui rendait la liste illisible à coup
|
||||
d'œil, alors qu'on la parcourt précisément pour cocher. */
|
||||
.carte-oeuvre {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* La carte partagée d'un livre possédé sert de corps à la ligne : elle porte déjà sa propre
|
||||
bordure et son propre rembourrage, qu'il faut neutraliser ici pour ne pas doubler le trait. */
|
||||
.carte-oeuvre > .carte-livre {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
padding: 0;
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.oeuvre-case {
|
||||
flex: 0 0 auto;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
/* Cible tactile : la case native fait 1rem, on double la zone cliquable autour. */
|
||||
padding: 0.4rem;
|
||||
margin: -0.4rem 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.oeuvre-case input {
|
||||
width: 1.1rem;
|
||||
height: 1.1rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.oeuvre-actions {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
/*
|
||||
Barre d'actions de la sélection, EN HAUT de la liste et collante : on coche en descendant,
|
||||
et une barre en bas d'écran obligeait soit à redescendre pour valider, soit — pire —
|
||||
recouvrait les dernières lignes qu'on cherchait justement à cocher.
|
||||
*/
|
||||
.barre-selection {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 5;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin: 0.75rem 0;
|
||||
padding: 0.6rem 0.75rem;
|
||||
background: var(--mb-fond-doux);
|
||||
border: 1px solid var(--mb-bord);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.selection-compte {
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
color: var(--mb-texte-doux);
|
||||
}
|
||||
|
||||
/* Libellé réservé aux lecteurs d'écran : la case à cocher n'a plus de texte visible à côté
|
||||
d'elle, mais elle doit continuer à dire ce qu'elle sélectionne. */
|
||||
.lecture-ecran {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/* Le corps prend la place restante et « min-width: 0 » l'autorise à rétrécir :
|
||||
sans lui, un titre long pousse le bouton hors de l'écran sur mobile. */
|
||||
.carte-souhait .carte-corps,
|
||||
|
||||
Reference in New Issue
Block a user