feat: add inline stats block with toggle to trip page
Adds Twig computation for days on road, countries visited, and GPS points; an expandable stats panel (hidden by default) with haversine distance calculation; and toggle JS that activates the Stats button.
This commit is contained in:
@@ -898,3 +898,35 @@ body::after {
|
||||
.trip-feed { min-width: 0; }
|
||||
|
||||
.trip-sidebar-section {}
|
||||
|
||||
/* ── Trip page inline stats block ───────────────────────────────────────────── */
|
||||
|
||||
.trip-stats-block {
|
||||
background: var(--color-canvas);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
padding: var(--space-6);
|
||||
margin-bottom: var(--space-6);
|
||||
}
|
||||
|
||||
.trip-stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: var(--space-4);
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.trip-stats-grid { grid-template-columns: repeat(2, 1fr); }
|
||||
}
|
||||
|
||||
.trip-stats-countries {
|
||||
font-size: var(--text-sm);
|
||||
color: var(--color-ink-2);
|
||||
margin-bottom: var(--space-2);
|
||||
}
|
||||
|
||||
.trip-stats-note {
|
||||
font-size: var(--text-xs);
|
||||
color: var(--color-ink-muted);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user