admin/runners-calendar
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(frontend): add race details page with completed metrics

Browse Source 
Implement race detail routing and UI with client-side pace calculation so completed race metrics are visible from the calendar flow.

Made-with: Cursor
This commit is contained in:
Anton
2026-04-06 17:48:11 +03:00
parent 36e103dd41
commit 92cf94aa5b
5 changed files with 256 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
frontend/src/styles/global.css
View File

@@ -183,6 +183,12 @@ a {
font-weight: 600;
}
.race-card__link:hover,
.race-card__link:focus-visible {
text-decoration: underline;
outline: none;
}
.race-card__meta {
margin: var(--space-2) 0 0;
color: var(--color-text-muted);
@@ -209,9 +215,86 @@ a {
color: var(--color-success);
}
.page-link {
margin-top: var(--space-4);
display: inline-flex;
color: var(--color-accent);
font-weight: 600;
}
.page-link:hover,
.page-link:focus-visible {
text-decoration: underline;
outline: none;
}
.race-details-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-4);
}
.race-details-grid {
margin-top: var(--space-6);
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-4);
}
.race-details-card {
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: var(--space-5);
background: #fcfdff;
}
.race-details-card--notes {
margin-top: var(--space-4);
}
.race-details-card__title {
margin: 0 0 var(--space-3);
font-size: var(--font-size-body);
color: var(--color-text-muted);
}
.race-details-card__empty,
.race-details-card__notes {
margin: 0;
color: var(--color-text-muted);
}
.race-details-meta {
margin: 0;
display: grid;
gap: var(--space-3);
}
.race-details-meta__item {
display: grid;
gap: var(--space-1);
}
.race-details-meta__key {
color: var(--color-text-muted);
font-size: var(--font-size-caption);
}
.race-details-meta__value {
margin: 0;
font-weight: 600;
color: var(--color-text);
}
@media (max-width: 900px) {
.dashboard-grid,
.race-lists {
.race-lists,
.race-details-grid {
grid-template-columns: 1fr;
}
.race-details-header {
flex-direction: column;
}
}