Add filter form to alt styles page
Oh wow, alt styles are getting some real work! I'll improve both the user-facing and Support-facing tooling, to better handle the complexity.
This commit is contained in:
parent
2bd8afd486
commit
775baa250b
6 changed files with 64 additions and 23 deletions
|
@ -1,18 +0,0 @@
|
|||
body.alt_styles-index
|
||||
.alt-styles-header
|
||||
margin-top: 1em
|
||||
margin-bottom: .5em
|
||||
|
||||
.alt-styles-list
|
||||
list-style: none
|
||||
display: flex
|
||||
flex-wrap: wrap
|
||||
gap: 1.5em
|
||||
|
||||
.alt-style
|
||||
text-align: center
|
||||
width: 80px
|
||||
|
||||
.alt-style-thumbnail
|
||||
width: 80px
|
||||
height: 80px
|
29
app/assets/stylesheets/alt_styles/index.sass
Normal file
29
app/assets/stylesheets/alt_styles/index.sass
Normal file
|
@ -0,0 +1,29 @@
|
|||
.filters
|
||||
fieldset
|
||||
display: flex
|
||||
flex-direction: row
|
||||
align-items: center
|
||||
justify-content: center
|
||||
gap: .5em
|
||||
|
||||
legend
|
||||
display: contents
|
||||
font-weight: bold
|
||||
|
||||
.alt-styles-header
|
||||
margin-top: 1em
|
||||
margin-bottom: .5em
|
||||
|
||||
.alt-styles-list
|
||||
list-style: none
|
||||
display: flex
|
||||
flex-wrap: wrap
|
||||
gap: 1.5em
|
||||
|
||||
.alt-style
|
||||
text-align: center
|
||||
width: 80px
|
||||
|
||||
.alt-style-thumbnail
|
||||
width: 80px
|
||||
height: 80px
|
|
@ -8,7 +8,6 @@
|
|||
|
||||
@import partials/jquery.jgrowl
|
||||
|
||||
@import alt_styles/index
|
||||
@import closet_hangers/index
|
||||
@import closet_lists/form
|
||||
@import neopets_page_import_tasks/new
|
||||
|
|
|
@ -3,10 +3,11 @@ class AltStylesController < ApplicationController
|
|||
@alt_styles = AltStyle.includes(:species, :color, :swf_assets).
|
||||
order(:species_id, :color_id)
|
||||
|
||||
if params[:species_id]
|
||||
@species = Species.find(params[:species_id])
|
||||
@alt_styles = @alt_styles.merge(@species.alt_styles)
|
||||
end
|
||||
@color = find_color
|
||||
@species = find_species
|
||||
|
||||
@alt_styles.merge!(@color.alt_styles) if @color
|
||||
@alt_styles.merge!(@species.alt_styles) if @species
|
||||
|
||||
# We're going to link to the HTML5 image URL, so make sure we have all the
|
||||
# manifests ready!
|
||||
|
@ -30,4 +31,20 @@ class AltStylesController < ApplicationController
|
|||
}
|
||||
end
|
||||
end
|
||||
|
||||
protected
|
||||
|
||||
def find_color
|
||||
if params[:color]
|
||||
Color.find_by(name: params[:color])
|
||||
end
|
||||
end
|
||||
|
||||
def find_species
|
||||
if params[:species_id]
|
||||
Species.find_by(id: params[:species_id])
|
||||
elsif params[:species]
|
||||
Species.find_by(name: params[:species])
|
||||
end
|
||||
end
|
||||
end
|
||||
|
|
|
@ -1,5 +1,6 @@
|
|||
class Color < ApplicationRecord
|
||||
has_many :pet_types
|
||||
has_many :alt_styles
|
||||
|
||||
scope :alphabetical, -> { order(:name) }
|
||||
scope :basic, -> { where(basic: true) }
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
- title "Styling Studio"
|
||||
- use_responsive_design
|
||||
|
||||
%p
|
||||
Here's all the new NC Pet Styles we have! They're available in the app too,
|
||||
|
@ -13,6 +14,18 @@
|
|||
wearable items, there's not a great way for us to get style tokens onto
|
||||
tradelists… this may change someday, but probably not soon, sorry!
|
||||
|
||||
= form_with url: alt_styles_path, method: :get, class: "filters" do |f|
|
||||
%fieldset
|
||||
%legend Filter by:
|
||||
= f.select :color, Color.order(:name).map(&:human_name),
|
||||
selected: @color&.human_name, include_blank: "Color…"
|
||||
= f.select :species, Species.order(:name).map(&:human_name),
|
||||
selected: @species&.human_name, include_blank: "Species…"
|
||||
= f.submit "Go"
|
||||
|
||||
- @alt_styles.group_by(&:species).each do |species, species_styles|
|
||||
%h2.alt-styles-header= species.human_name
|
||||
%ul.alt-styles-list= render partial: "alt_style", collection: species_styles
|
||||
|
||||
- content_for :stylesheets do
|
||||
= page_stylesheet_link_tag "alt_styles/index"
|
||||
|
|
Loading…
Reference in a new issue