Johan LEROYandClaude Opus 5
33807e3038
Quatre points portant sur le code de cette PR : - L'échec de chargement laissait à l'écran le site précédemment affiché sous le bandeau d'erreur : `reportUnavailable()` vide désormais site, mesure et historique, pour qu'on ne lise pas les chiffres de A en croyant regarder B. - L'historique était tracé à rebours : l'API trie en timestamp décroissant (`ReadingRepository.list_history`), le graphique rétablit la chronologie. - Une consommation `null` (panne capteur) alimentait la jauge avec un 0, indiscernable d'un site qui ne consomme rien : la jauge n'est plus montée dans ce cas, la raison de l'absence est affichée à la place. Une consommation réellement mesurée à 0 continue d'afficher la jauge. - `getSite` et `getCurrent` ne dépendent pas l'un de l'autre : `forkJoin` économise un aller-retour en série à chaque ouverture de la page. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
120 lines
1.6 KiB
SCSS
120 lines
1.6 KiB
SCSS
:host {
|
|
display: block;
|
|
color: var(--color-text);
|
|
padding: 2.5rem 2rem;
|
|
max-width: 1100px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.site-detail__header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.85rem;
|
|
margin-bottom: 2rem;
|
|
|
|
h1 {
|
|
margin: 0;
|
|
font-size: 1.75rem;
|
|
font-weight: 700;
|
|
}
|
|
}
|
|
|
|
.site-detail__logo {
|
|
font-size: 1.3rem;
|
|
}
|
|
|
|
.site-detail__subtitle {
|
|
margin: 0.25rem 0 0;
|
|
color: var(--color-text-muted);
|
|
}
|
|
|
|
.site-detail__badges {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
margin-left: auto;
|
|
}
|
|
|
|
.banner-error {
|
|
display: block;
|
|
margin: 0 0 1.5rem;
|
|
}
|
|
|
|
.banner-empty {
|
|
display: block;
|
|
margin: 0 0 1.5rem;
|
|
}
|
|
|
|
.overview {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
|
gap: 1rem;
|
|
margin-bottom: 2.5rem;
|
|
}
|
|
|
|
.card {
|
|
padding: 1.25rem;
|
|
gap: 0.35rem;
|
|
}
|
|
|
|
.card--gauge {
|
|
align-items: center;
|
|
text-align: center;
|
|
}
|
|
|
|
.card__label {
|
|
font-size: 0.8rem;
|
|
color: var(--color-text-muted);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.02em;
|
|
}
|
|
|
|
.card__value {
|
|
font-size: 1.6rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.card__unavailable {
|
|
color: var(--color-text-muted);
|
|
margin: 0;
|
|
}
|
|
|
|
.metrics-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 0.75rem 1.5rem;
|
|
margin: 0.5rem 0 0;
|
|
}
|
|
|
|
.metric {
|
|
dt {
|
|
font-size: 0.75rem;
|
|
color: var(--color-text-muted);
|
|
}
|
|
|
|
dd {
|
|
margin: 0;
|
|
font-size: 1.05rem;
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
|
|
.metric__unavailable {
|
|
color: var(--color-text-muted);
|
|
font-weight: 400;
|
|
}
|
|
|
|
.metric__reason {
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 1.1rem;
|
|
font-weight: 600;
|
|
margin: 0 0 1rem;
|
|
}
|
|
|
|
.chart-section {
|
|
margin-bottom: 2rem;
|
|
}
|