mathieuandClaude Opus 5
ebc5f95d49
Le piege que CLAUDE.md signale : en Blazor WebAssembly le code tourne dans le navigateur alors que SQLite vit sur le serveur, et le service worker ne met en cache que les assets. Sans travail explicite, l'application demarre hors-ligne et affiche une bibliotheque vide. - js/cache-hors-ligne.js : instantanes JSON dans IndexedDB, et surveillance des bascules online/offline. Aucune logique metier. - CacheHorsLigne / EtatReseau : lecture-ecriture des instantanes, et etat reseau combinant navigator.onLine (fiable seulement par sa negation) avec le sort reel des appels HTTP. - ServiceLivresApi : les lectures retombent sur le cache, les ecritures sont refusees. Le catalogue entier est memorise, pas les reponses filtrees : c'est ce qui rend la recherche hors-ligne possible sur tout le fonds. - FiltreLivresLocal : pendant navigateur de FiltreLivres, avec un test qui confronte les deux implementations sur les memes donnees. - Interface : pastille et bandeau d'etat avec la date de synchronisation, et actions d'ecriture desactivees avec leur raison plutot que boutons morts. - js/mise-a-jour.js : les empreintes WASM etant desactivees, le service worker est le seul cache-busting du projet. L'enregistrement journalise desormais ses echecs, et un bandeau propose la nouvelle version sans attendre la fermeture de tous les onglets. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
64 lines
1.4 KiB
CSS
64 lines
1.4 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;
|
|
}
|
|
|
|
.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 : les actions flottantes ne doivent pas masquer le dernier livre. */
|
|
padding: 1rem 1rem 6rem;
|
|
}
|