diff options
Diffstat (limited to 'web/templates.templ')
| -rw-r--r-- | web/templates.templ | 15 |
1 files changed, 11 insertions, 4 deletions
diff --git a/web/templates.templ b/web/templates.templ index d0b1c0c..b061f1e 100644 --- a/web/templates.templ +++ b/web/templates.templ @@ -32,6 +32,9 @@ templ Layout(title string, content templ.Component) { table { width: 100%; border-collapse: collapse; } th, td { padding: .85rem .5rem; border-bottom: 1px solid #e5e9e5; text-align: left; } th { color: #68746c; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; } + .sort-link { color: inherit; text-decoration: none; } + .sort-link:hover, .sort-link:focus-visible, th.active .sort-link { color: #d96932; } + .sort-indicator { display: inline-block; margin-left: .2rem; } .numeric { text-align: right; white-space: nowrap; } .empty { padding: 2.5rem 1rem; text-align: center; color: #68746c; } @media (max-width: 700px) { .container { width: min(100% - 1rem, 70rem); padding-top: 1.5rem; } .site-header { padding-inline: 1rem; } th:nth-child(n+4), td:nth-child(n+4) { display: none; } .panel { padding: .8rem; } } @@ -49,11 +52,11 @@ templ Layout(title string, content templ.Component) { </html> } -templ RidesPage(items []RideView) { - @Layout("Rides", RidesContent(items)) +templ RidesPage(items []RideView, headers []RideSortHeader) { + @Layout("Rides", RidesContent(items, headers)) } -templ RidesContent(items []RideView) { +templ RidesContent(items []RideView, headers []RideSortHeader) { <p class="eyebrow">Ride library</p> <div class="toolbar"> <div><h1>All rides</h1><p class="lead">Your imported rides, ready for climb analysis.</p></div> @@ -64,7 +67,11 @@ templ RidesContent(items []RideView) { <div class="empty">No rides stored yet. <a href="/sync">Import your first Strava rides.</a></div> } else { <table> - <thead><tr><th>Ride</th><th>Started</th><th class="numeric">Distance</th><th class="numeric">Moving time</th><th class="numeric">Elevation</th><th class="numeric">Cotacol</th><th class="numeric">Cotacol / 100 km</th></tr></thead> + <thead><tr> + for _, header := range headers { + <th class={ header.Class } scope="col" aria-sort={ header.AriaSort }><a class="sort-link" href={ templ.URL(header.URL) }>{ header.Label }<span class="sort-indicator" aria-hidden="true">{ header.Indicator }</span></a></th> + } + </tr></thead> <tbody> for _, item := range items { <tr><td><strong>{ item.Name }</strong><br/><small>{ item.Type }</small></td><td>{ formatRideDate(item.StartDate) }</td><td class="numeric">{ formatDistance(item.DistanceM) }</td><td class="numeric">{ formatDuration(item.MovingTimeS) }</td><td class="numeric">{ formatElevation(item.TotalElevationGainM) }</td><td class="numeric">{ item.Cotacol }</td><td class="numeric">{ item.CotacolPer100Km }</td></tr> |