diff options
Diffstat (limited to 'web/templates.templ')
| -rw-r--r-- | web/templates.templ | 55 |
1 files changed, 21 insertions, 34 deletions
diff --git a/web/templates.templ b/web/templates.templ index 8fbed0c..10008d2 100644 --- a/web/templates.templ +++ b/web/templates.templ @@ -228,47 +228,34 @@ templ RideDetailContent(data RideDetailView) { </dl> </section> <section class="panel categories-panel"> - <div class="categories-layout"> - <div class="categories-heading"> - <p class="eyebrow">Curation</p> - <h2>Categories</h2> - </div> + <details class="categories-details" open?={ data.Ride.BikeType == "" && data.Ride.RideType == "" }> + <summary class="categories-summary"> + <div class="categories-heading"> + <p class="eyebrow">Curation</p> + <h2>Categories</h2> + </div> + <span class="categories-chevron" aria-hidden="true">⌄</span> + </summary> <form method="post" action={ templ.URL(rideCategoriesUpdateURL(data.Ride.ID)) } class="category-form"> - <label for="ride-bike-type">Bike type - <select id="ride-bike-type" name="bike_type" required> - if data.Ride.BikeType == "" { - <option value="" selected>—</option> - } else { - <option value="">—</option> - } + <fieldset class="category-fieldset"> + <legend>Bike type</legend> + <div class="category-options"> for _, opt := range bikeTypeOptions { - if data.Ride.BikeType == opt { - <option value={ string(opt) } selected>{ bikeTypeLabels[opt] }</option> - } else { - <option value={ string(opt) }>{ bikeTypeLabels[opt] }</option> - } - } - </select> - </label> - <label for="ride-ride-type">Ride type - <select id="ride-ride-type" name="ride_type" required> - if data.Ride.RideType == "" { - <option value="" selected>—</option> - } else { - <option value="">—</option> + <label class="category-option"><input type="radio" name="bike_type" value={ string(opt) } required checked?={ data.Ride.BikeType == opt }/><span>{ bikeTypeLabels[opt] }</span></label> } + </div> + </fieldset> + <fieldset class="category-fieldset"> + <legend>Ride type</legend> + <div class="category-options"> for _, opt := range rideTypeOptions { - if data.Ride.RideType == opt { - <option value={ string(opt) } selected>{ rideTypeLabels[opt] }</option> - } else { - <option value={ string(opt) }>{ rideTypeLabels[opt] }</option> - } + <label class="category-option"><input type="radio" name="ride_type" value={ string(opt) } required checked?={ data.Ride.RideType == opt }/><span>{ rideTypeLabels[opt] }</span></label> } - </select> - </label> + </div> + </fieldset> <button class="button" type="submit">Save</button> </form> - </div> + </details> </section> if data.HasRoute { if len(data.Profile.OfficialClimbs()) > 0 { |