diff options
| -rw-r--r-- | web/server_test.go | 1 | ||||
| -rw-r--r-- | web/static/style.css | 3 | ||||
| -rw-r--r-- | web/templates.templ | 1 |
3 files changed, 5 insertions, 0 deletions
diff --git a/web/server_test.go b/web/server_test.go index 440ac5f..c468e4b 100644 --- a/web/server_test.go +++ b/web/server_test.go @@ -326,6 +326,7 @@ func TestHandlerCreatesOfficialClimbFromRoutePoints(t *testing.T) { body := getResponse.Body.String() assert.Contains(t, body, "Official climb saved and matched to this ride by coordinates.") assert.Contains(t, body, "data-official-climb-card") + assert.Contains(t, body, fmt.Sprintf(`href="/climbs/%d"`, climbs[0].ID)) assert.Contains(t, body, "Length") assert.Contains(t, body, "Cotacol") assert.Contains(t, body, "Avg slope") diff --git a/web/static/style.css b/web/static/style.css index 7965678..2e190e2 100644 --- a/web/static/style.css +++ b/web/static/style.css @@ -216,6 +216,9 @@ select { border: 1px solid var(--color-input-border); border-radius: .55rem; pad .official-climb-summary-stats { display: flex; gap: .8rem; margin: 0 0 0 auto; } .official-climb-summary-stats dt { font-size: .6rem; } .official-climb-summary-stats dd { margin-top: .1rem; font-size: .85rem; } +.official-climb-link { display: inline-flex; align-items: center; color: var(--color-leaf); font-size: 1.15rem; line-height: 1; text-decoration: none; } +.official-climb-link:hover, .official-climb-link:focus-visible { color: var(--color-accent); } +.official-climb-link:focus-visible { outline: .2rem solid var(--color-focus); outline-offset: .2rem; } .official-climb-chevron { color: var(--color-accent); font-size: 1.5rem; font-weight: 500; line-height: 1; } .official-climb-card[open] .official-climb-chevron { transform: rotate(180deg); } .official-climb-card-body { padding: .9rem 1rem 1rem; border-top: 1px solid var(--color-border-subtle); background: var(--color-surface); } diff --git a/web/templates.templ b/web/templates.templ index 6a0109f..7c326eb 100644 --- a/web/templates.templ +++ b/web/templates.templ @@ -300,6 +300,7 @@ templ RideDetailContent(data RideDetailView) { <div><dt>Cotacol</dt><dd>{ formatCotacol(climb.Cotacol) }</dd></div> <div><dt>Avg slope</dt><dd>{ formatSlope(climb.SlopePercent) }</dd></div> </dl> + <a class="official-climb-link" href={ templ.URL(climbDetailURL(climb.OfficialClimbID)) } title="View climb detail" aria-label={ "View climb detail for " + climb.OfficialName }>↗</a> <span class="official-climb-chevron" aria-hidden="true">⌄</span> </summary> <div class="official-climb-card-body"> |