LIMONIER MathieuandCopilot
5d45eb492e
- A1 : forcer la revalidation HTTP (Cache-Control: no-cache) sur les fichiers statiques, pour empêcher un navigateur de garder indéfiniment un CSS/JS périmé quand le service worker ne s'active pas. - A2 : le filtre du catalogue (statut, type de document) reprend les mêmes pastilles colorées que les cartes (Libelles.ClasseStatut / nouvelle Libelles.ClasseTypeDocument). - A3 : remplacement du logo par défaut de Blazor par un pictogramme de livre ouvert (favicon, icônes PWA, logo du bandeau, logo mabibli_ynh). - A4 : une couverture cassée désactive aussi son bouton d'agrandissement. - A5 : cache IndexedDB des couvertures pour la consultation hors-ligne, sans ralentir l'affichage en ligne (mise en cache en tâche de fond). L'allègement (redimensionnement, WebP) reste hors scope, à mesurer avant de s'y engager. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
119 lines
2.9 KiB
CSS
119 lines
2.9 KiB
CSS
.bandeau {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 10;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 0.75rem;
|
|
padding: 0.75rem 1rem;
|
|
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;
|
|
}
|
|
|
|
.marque-logo {
|
|
width: 1.3rem;
|
|
height: 1.3rem;
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.utilisateur {
|
|
font-size: 0.8rem;
|
|
opacity: 0.85;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
max-width: 55%;
|
|
}
|
|
|
|
/* 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 : ni les onglets ni les actions flottantes ne doivent masquer
|
|
le dernier livre de la liste. */
|
|
padding: 1rem 1rem 9rem;
|
|
}
|
|
|
|
/* --- Onglets de navigation --- */
|
|
|
|
.onglets {
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: 20;
|
|
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;
|
|
text-decoration: none;
|
|
font-size: 0.8rem;
|
|
color: var(--mb-texte-doux);
|
|
|
|
/* 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;
|
|
}
|
|
|
|
/* 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);
|
|
font-weight: 600;
|
|
border-top-color: var(--mb-accent);
|
|
background: var(--mb-fond-doux);
|
|
}
|