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,
|
||||
|
||||
@@ -34,6 +34,9 @@
|
||||
navigator.serviceWorker (absent hors contexte sécurisé), journalise un échec au lieu de
|
||||
l'avaler, et propose la mise à jour quand une nouvelle version est prête. -->
|
||||
<script src="js/mise-a-jour.js"></script>
|
||||
<!-- Retour à l'écran précédent, avec repli sur le catalogue quand la pile
|
||||
d'historique est vide (application ouverte depuis l'écran d'accueil). -->
|
||||
<script src="js/navigation.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
@@ -0,0 +1,18 @@
|
||||
/*
|
||||
Retour à l'écran précédent.
|
||||
|
||||
⚠️ `history.back()` seul ne suffit pas : ouvert depuis l'écran d'accueil du téléphone,
|
||||
l'application démarre sur une pile d'un seul cran, et « retour » sortirait de la PWA au
|
||||
lieu de remonter d'un écran. On retombe alors sur le catalogue, qui est la racine.
|
||||
|
||||
Volontairement posé sur `window` plutôt qu'exporté en module : l'appel vient de Blazor par
|
||||
IJSRuntime, et un module imposerait un import asynchrone pour une seule fonction.
|
||||
*/
|
||||
window.mabibliRetour = function () {
|
||||
if (window.history.length > 1) {
|
||||
window.history.back();
|
||||
return;
|
||||
}
|
||||
|
||||
window.location.href = '/';
|
||||
};
|
||||
@@ -1,13 +0,0 @@
|
||||
<!--
|
||||
Petit logo du bandeau : même livre ouvert que les icônes PWA (favicon.png, icon-*.png),
|
||||
mais en blanc plutôt qu'en bleu — le bandeau est déjà bleu foncé (--mb-accent), un logo
|
||||
de la même couleur s'y fondrait.
|
||||
|
||||
SVG plutôt qu'un PNG : affiché à une seule petite taille dans le bandeau, mais net sur
|
||||
tous les écrans (y compris les écrans très denses), sans multiplier les fichiers raster.
|
||||
-->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="24" height="24" aria-hidden="true">
|
||||
<polygon points="32,15 10,20 10,47 32,44" fill="#fff" />
|
||||
<polygon points="32,15 54,20 54,47 32,44" fill="#fff" />
|
||||
<line x1="32" y1="15" x2="32" y2="44" stroke="#1b3a5c" stroke-width="1.5" />
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 727 B |
Reference in New Issue
Block a user