diff --git a/app/assets/stylesheets/pet_types/index.sass b/app/assets/stylesheets/pet_types/index.sass index 00a46db6..06990667 100644 --- a/app/assets/stylesheets/pet_types/index.sass +++ b/app/assets/stylesheets/pet_types/index.sass @@ -1,5 +1,21 @@ @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 list-style-type: none display: flex diff --git a/app/views/pet_types/index.html.haml b/app/views/pet_types/index.html.haml index fff7672a..8d4e1c8f 100644 --- a/app/views/pet_types/index.html.haml +++ b/app/views/pet_types/index.html.haml @@ -1,10 +1,12 @@ - title "Rainbow Pool" - use_responsive_design -= form_with method: :get do |form| - = 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.submit "Filter" += 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 :species, @species_names, selected: @selected_species&.human_name, include_blank: "Species…" + = form.submit "Go" = will_paginate @pet_types