Improve Rainbow Pool filter form styles

This commit is contained in:
Emi Matchu 2024-09-27 19:10:37 -07:00
parent 81f0845d4a
commit f8a5ce4490
2 changed files with 22 additions and 4 deletions

View file

@ -1,5 +1,21 @@
@import "../partials/clean/constants" @import "../partials/clean/constants"
.pet-filters
fieldset
display: flex
flex-direction: row
align-items: center
justify-content: center
gap: .5em
legend
display: contents
font-weight: bold
[role=navigation]
margin-block: .5em
text-align: center
.pet-types .pet-types
list-style-type: none list-style-type: none
display: flex display: flex

View file

@ -1,10 +1,12 @@
- title "Rainbow Pool" - title "Rainbow Pool"
- use_responsive_design - use_responsive_design
= form_with method: :get do |form| = form_with method: :get, class: "pet-filters" do |form|
%fieldset
%legend Filter by:
= form.select :color, @color_names, selected: @selected_color&.human_name, include_blank: "Color…" = form.select :color, @color_names, selected: @selected_color&.human_name, include_blank: "Color…"
= form.select :species, @species_names, selected: @selected_species&.human_name, include_blank: "Species…" = form.select :species, @species_names, selected: @selected_species&.human_name, include_blank: "Species…"
= form.submit "Filter" = form.submit "Go"
= will_paginate @pet_types = will_paginate @pet_types