Johan LEROY
32155cbfc5
La vue détail pose app-recommendation-list restreint au site consulté (les alertes sont demandées avec site_id) et renvoie vers la vue complète préfiltrée sur ce site. Le spec fournit les deux services du composant enfant et vérifie le filtre transmis.
129 lines
1.8 KiB
SCSS
129 lines
1.8 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;
|
|
}
|
|
|
|
.recommendations-section {
|
|
margin: 2.5rem 0 1.5rem;
|
|
}
|
|
|
|
.recommendations-section__link {
|
|
display: inline-block;
|
|
margin-top: 1rem;
|
|
}
|