From 80307f21f774fe4b0a235820ca04a56f54599f23 Mon Sep 17 00:00:00 2001 From: Emi Matchu Date: Thu, 26 Sep 2024 21:10:25 -0700 Subject: [PATCH] Add Rainbow Pool homepage, with basic filter form --- app/assets/stylesheets/pet_types/index.sass | 32 +++++++++++++ app/assets/stylesheets/pet_types/show.sass | 53 +++++++++++---------- app/controllers/pet_types_controller.rb | 26 ++++++++++ app/views/pet_states/_pet_state.html.haml | 2 +- app/views/pet_types/_pet_type.html.haml | 4 ++ app/views/pet_types/index.html.haml | 16 +++++++ config/routes.rb | 3 +- 7 files changed, 109 insertions(+), 27 deletions(-) create mode 100644 app/assets/stylesheets/pet_types/index.sass create mode 100644 app/views/pet_types/_pet_type.html.haml create mode 100644 app/views/pet_types/index.html.haml diff --git a/app/assets/stylesheets/pet_types/index.sass b/app/assets/stylesheets/pet_types/index.sass new file mode 100644 index 00000000..e73328c0 --- /dev/null +++ b/app/assets/stylesheets/pet_types/index.sass @@ -0,0 +1,32 @@ +.pet-types + list-style-type: none + display: flex + flex-wrap: wrap + justify-content: center + gap: .5em + + > li + width: 150px + max-width: calc(50% - .25em) + min-width: 150px + box-sizing: border-box + text-align: center + + a + display: block + border-radius: 1em + padding: .5em + + img + width: 100% + height: auto + aspect-ratio: 1 / 1 + position: relative + z-index: -1 + margin-bottom: -1em + + .name + background: white + padding: .25em .5em + border-radius: .5em + margin: 0 auto diff --git a/app/assets/stylesheets/pet_types/show.sass b/app/assets/stylesheets/pet_types/show.sass index 3c912721..11d54e90 100644 --- a/app/assets/stylesheets/pet_types/show.sass +++ b/app/assets/stylesheets/pet_types/show.sass @@ -1,33 +1,36 @@ @import "../partials/clean/constants" .pet-states - list-style-type: none - display: flex - flex-wrap: wrap - justify-content: center - gap: .5em + list-style-type: none + display: flex + flex-wrap: wrap + justify-content: center + gap: .5em - > li - width: 200px - max-width: calc(50% - .25em) - min-width: 150px - box-sizing: border-box - text-align: center + > li + width: 200px + max-width: calc(50% - .25em) + min-width: 150px + box-sizing: border-box + text-align: center - a - display: block - border-radius: 1em - padding: .5em + a + display: block + border-radius: 1em + padding: .5em - outfit-viewer - width: 100% - height: auto - aspect-ratio: 1 / 1 - z-index: -1 - margin-bottom: -1em + outfit-viewer + width: 100% + height: auto + aspect-ratio: 1 / 1 + position: relative + z-index: -1 + margin-bottom: -1em - .name - background: white + .name + background: white + padding: .25em .5em + border-radius: .5em - .glitched - cursor: help + .glitched + cursor: help diff --git a/app/controllers/pet_types_controller.rb b/app/controllers/pet_types_controller.rb index cb2cb498..181207c5 100644 --- a/app/controllers/pet_types_controller.rb +++ b/app/controllers/pet_types_controller.rb @@ -1,4 +1,30 @@ class PetTypesController < ApplicationController + def index + @species_names = Species.order(:name).map(&:human_name) + @color_names = Color.order(:name).map(&:human_name) + + if params[:species].present? + @selected_species = Species.find_by!(name: params[:species]) + @selected_species_name = @selected_species.human_name + end + if params[:color].present? + @selected_color = Color.find_by!(name: params[:color]) + @selected_color_name = @selected_color.human_name + end + + @pet_types = PetType. + includes(:color, :species). + order(created_at: :desc). + paginate(page: params[:page], per_page: 30) + + if @selected_species + @pet_types = @pet_types.where(species_id: @selected_species) + end + if @selected_color + @pet_types = @pet_types.where(color_id: @selected_color) + end + end + def show @pet_type = find_pet_type diff --git a/app/views/pet_states/_pet_state.html.haml b/app/views/pet_states/_pet_state.html.haml index 01e23076..f9d10f98 100644 --- a/app/views/pet_states/_pet_state.html.haml +++ b/app/views/pet_states/_pet_state.html.haml @@ -1,6 +1,6 @@ %li = link_to [pet_state.pet_type, pet_state] do = outfit_viewer pet_state: - %span.name= pose_name pet_state.pose + .name= pose_name pet_state.pose - if pet_state.glitched? %span.glitched{title: "Glitched"} šŸ‘¾ diff --git a/app/views/pet_types/_pet_type.html.haml b/app/views/pet_types/_pet_type.html.haml new file mode 100644 index 00000000..3974d735 --- /dev/null +++ b/app/views/pet_types/_pet_type.html.haml @@ -0,0 +1,4 @@ +%li + = link_to pet_type do + = pet_type_image pet_type, :happy, :thumb + .name= pet_type.human_name diff --git a/app/views/pet_types/index.html.haml b/app/views/pet_types/index.html.haml new file mode 100644 index 00000000..fff7672a --- /dev/null +++ b/app/views/pet_types/index.html.haml @@ -0,0 +1,16 @@ +- 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" + += will_paginate @pet_types + +%ui.pet-types= render @pet_types + += will_paginate @pet_types + +- content_for :stylesheets do + = stylesheet_link_tag "pet_types/index" diff --git a/config/routes.rb b/config/routes.rb index 27869947..fbabef2d 100644 --- a/config/routes.rb +++ b/config/routes.rb @@ -37,7 +37,8 @@ OpenneoImpressItems::Application.routes.draw do end resources :alt_styles, path: 'alt-styles', only: [:index] resources :swf_assets, path: 'swf-assets', only: [:show] - resources :pet_types, path: 'rainbow-pool', only: [:show], param: "name" do + resources :pet_types, path: 'rainbow-pool', param: "name", + only: [:index, :show] do resources :pet_states, only: [:show], path: "forms" end