diff options
| author | Martin Kagamino Lehoux <martin@lehoux.net> | 2026-08-24 13:36:41 +0200 |
|---|---|---|
| committer | Martin Kagamino Lehoux <martin@lehoux.net> | 2026-08-24 13:36:41 +0200 |
| commit | 4dcc0a4e655b0178a7733954bf75df3cff9ef07a (patch) | |
| tree | 6acca3eba2b94dbed9d759295149cd51551ed9cf /web/templates.templ | |
| parent | e85150b7e1f2191e9ef39c969f041d27aec33643 (diff) | |
Ride type multiselect filter with a checkbox group across library and analytics
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> |