diff options
Diffstat (limited to 'web/templates.templ')
| -rw-r--r-- | web/templates.templ | 40 |
1 files changed, 12 insertions, 28 deletions
diff --git a/web/templates.templ b/web/templates.templ index 15e3466..c0e6e18 100644 --- a/web/templates.templ +++ b/web/templates.templ @@ -62,22 +62,14 @@ templ RidesContent(data RidesPageData) { } </select> </label> - <label for="ride-type-filter">Ride type - <select id="ride-type-filter" name="ride_type"> - if data.Filters.RideType == "" { - <option value="" selected>Any type</option> - } else { - <option value="">Any type</option> - } + <fieldset class="ride-filter-group"> + <legend>Ride type</legend> + <div class="ride-type-options"> for _, opt := range rideTypeOptions { - if data.Filters.RideType == string(opt) { - <option value={ string(opt) } selected>{ rideTypeLabels[opt] }</option> - } else { - <option value={ string(opt) }>{ rideTypeLabels[opt] }</option> - } + <label class="ride-type-option"><input type="checkbox" name="ride_type" value={ string(opt) } checked?={ containsRideType(data.Filters.RideTypes, opt) }/><span>{ rideTypeLabels[opt] }</span></label> } - </select> - </label> + </div> + </fieldset> </div> </form> </section> @@ -140,22 +132,14 @@ templ AnalyticsContent(data AnalyticsPageData) { } </select> </label> - <label for="analytics-ride-type">Ride type - <select id="analytics-ride-type" name="ride_type"> - if data.Filter.RideType == "" { - <option value="" selected>Any type</option> - } else { - <option value="">Any type</option> - } + <fieldset class="ride-filter-group"> + <legend>Ride type</legend> + <div class="ride-type-options"> for _, opt := range rideTypeOptions { - if data.Filter.RideType == string(opt) { - <option value={ string(opt) } selected>{ rideTypeLabels[opt] }</option> - } else { - <option value={ string(opt) }>{ rideTypeLabels[opt] }</option> - } + <label class="ride-type-option"><input type="checkbox" name="ride_type" value={ string(opt) } checked?={ containsRideType(data.Filter.RideTypes, opt) }/><span>{ rideTypeLabels[opt] }</span></label> } - </select> - </label> + </div> + </fieldset> </div> </form> </section> |