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:
mathieu
@@ -4,9 +4,8 @@
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.75rem;
|
||||
padding: 0.75rem 1rem;
|
||||
gap: 0.5rem;
|
||||
padding: 0.6rem 0.75rem;
|
||||
background: #1b3a5c;
|
||||
color: #fff;
|
||||
}
|
||||
@@ -19,21 +18,59 @@
|
||||
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: 55%;
|
||||
max-width: 40%;
|
||||
}
|
||||
|
||||
/* L'état du réseau change ce que l'application permet : il se voit dans le bandeau, en
|
||||
@@ -67,52 +104,86 @@
|
||||
width: 100%;
|
||||
max-width: 46rem;
|
||||
margin: 0 auto;
|
||||
/* Marge basse généreuse : ni les onglets ni les actions flottantes ne doivent masquer
|
||||
le dernier livre de la liste. */
|
||||
padding: 1rem 1rem 9rem;
|
||||
/* Marge basse généreuse : la barre d'actions flottantes ne doit pas masquer le dernier
|
||||
livre de la liste. */
|
||||
padding: 1rem 1rem 6rem;
|
||||
}
|
||||
|
||||
/* --- Onglets de navigation --- */
|
||||
/* --- Menu principal --- */
|
||||
|
||||
.onglets {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 20;
|
||||
/*
|
||||
Repli du gabarit Blazor par défaut : sur téléphone, la liste est masquée et se déploie
|
||||
au clic sur la bascule ; sur PC elle devient une rangée sous le bandeau.
|
||||
|
||||
⚠️ Le défaut de la version précédente (six onglets en `flex: 1 1 0` sur une barre fixe)
|
||||
était qu'elle n'avait AUCUN état de repli : dès que la place manquait — ou que la feuille
|
||||
de style scopée n'était pas celle attendue — les six libellés se retrouvaient collés,
|
||||
tronqués ou empilés sans mise en forme. Ici, l'état sans style est une liste de liens.
|
||||
*/
|
||||
.menu {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
background: #16304c;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.menu-ouvert {
|
||||
display: flex;
|
||||
background: #fff;
|
||||
border-top: 1px solid var(--mb-bord);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
|
||||
/* Hauteur figée et partagée : .actions-flottantes s'en sert pour se poser juste au-dessus. */
|
||||
height: calc(var(--mb-onglets-hauteur) + env(safe-area-inset-bottom));
|
||||
}
|
||||
|
||||
.onglet {
|
||||
flex: 1 1 0;
|
||||
padding: 0.4rem 0.25rem;
|
||||
line-height: 1.4;
|
||||
text-align: center;
|
||||
.menu-lien {
|
||||
display: block;
|
||||
padding: 0.7rem 1rem;
|
||||
color: #e8edf3;
|
||||
text-decoration: none;
|
||||
font-size: 0.8rem;
|
||||
color: var(--mb-texte-doux);
|
||||
font-size: 0.95rem;
|
||||
border-left: 4px solid transparent;
|
||||
}
|
||||
|
||||
/* Le trait actif est posé en haut de l'onglet, du côté du contenu qu'il désigne. */
|
||||
border-top: 3px solid transparent;
|
||||
|
||||
/* Le libellé ne doit jamais passer sur deux lignes. Cinq onglets tiennent sur 320 px à
|
||||
cette taille ; c'est la raison du 0.8rem plutôt que du 0.85rem d'avant « Séries ». */
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
.menu-lien:hover,
|
||||
.menu-lien:focus-visible {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* NavLink pose « active » tout seul ; « Catalogue » utilise NavLinkMatch.All, sans quoi
|
||||
il resterait allumé sur toutes les pages — son href est la racine. */
|
||||
.onglet.active {
|
||||
color: var(--mb-accent);
|
||||
.menu-lien.active {
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
border-top-color: var(--mb-accent);
|
||||
background: var(--mb-fond-doux);
|
||||
background: rgba(255, 255, 255, 0.16);
|
||||
border-left-color: #f5d76e;
|
||||
}
|
||||
|
||||
/*
|
||||
À partir de 40rem la rangée tient sans se comprimer, et la bascule n'a plus de raison
|
||||
d'être : le menu est toujours visible, l'état déployé n'a plus d'effet.
|
||||
|
||||
Le point de rupture est à 40rem plutôt qu'aux 48rem du reste de la feuille : six libellés
|
||||
courts tiennent bien avant que la grille de cartes ne s'élargisse, et les garder cachés
|
||||
derrière une bascule sur une tablette serait un clic de trop.
|
||||
*/
|
||||
@media (min-width: 40rem) {
|
||||
.menu {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
gap: 0.25rem;
|
||||
padding: 0 0.5rem;
|
||||
}
|
||||
|
||||
.bandeau-bascule {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.menu-lien {
|
||||
padding: 0.6rem 0.9rem;
|
||||
border-left: 0;
|
||||
border-bottom: 3px solid transparent;
|
||||
}
|
||||
|
||||
.menu-lien.active {
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
border-bottom-color: #f5d76e;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user