Refactor Rainbow Pool to use shared styles for the list elements

The lists of pet types and pet states had very similar styles, which I
mostly copy-pasted. Now that I want to use them for Alt Styles too, I'm
refactoring!
This commit is contained in:
Emi Matchu 2024-09-30 16:21:47 -07:00
parent 0958111341
commit d11c18129d
9 changed files with 55 additions and 92 deletions

View file

@ -1,3 +1,5 @@
@import "../partials/clean/constants"
.rainbow-pool-filters .rainbow-pool-filters
fieldset fieldset
display: flex display: flex
@ -9,3 +11,43 @@
legend legend
display: contents display: contents
font-weight: bold font-weight: bold
.rainbow-pool-list
list-style-type: none
display: flex
flex-wrap: wrap
justify-content: center
gap: .5em
--preview-base-width: 150px
> li
width: var(--preview-base-width)
max-width: calc(50% - .25em)
min-width: 150px
box-sizing: border-box
text-align: center
a
display: block
border-radius: 1em
padding: .5em
text-decoration: none
background: white
&:hover
outline: 1px solid $module-border-color
background: $module-bg-color
.preview
width: 100%
height: auto
aspect-ratio: 1 / 1
margin-bottom: -1em
.name
background: inherit
padding: .25em .5em
border-radius: .5em
margin: 0 auto
position: relative
z-index: 1

View file

@ -1,43 +1,3 @@
@import "../partials/clean/constants"
[role=navigation] [role=navigation]
margin-block: .5em margin-block: .5em
text-align: center text-align: center
.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
text-decoration: none
background: white
&:hover
outline: 1px solid $module-border-color
background: $module-bg-color
img
width: 100%
height: auto
aspect-ratio: 1 / 1
margin-bottom: -1em
.name
background: inherit
padding: .25em .5em
border-radius: .5em
margin: 0 auto
position: relative
z-index: 1

View file

@ -1,43 +1,7 @@
@import "../partials/clean/constants" @import "../partials/clean/constants"
.pet-states .rainbow-pool-list
list-style-type: none --preview-base-width: 200px
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
a
display: block
border-radius: 1em
padding: .5em
background: white
text-decoration: none
&:hover
outline: 1px solid $module-border-color
background: $module-bg-color
outfit-viewer
width: 100%
height: auto
aspect-ratio: 1 / 1
position: relative
z-index: 0
margin-bottom: -1em
.name
background: inherit
padding: .25em .5em
border-radius: .5em
position: relative
z-index: 1
.glitched .glitched
cursor: help cursor: help

View file

@ -70,16 +70,11 @@ module OutfitsHelper
text_field_tag 'name', nil, options text_field_tag 'name', nil, options
end end
def outfit_viewer(outfit_or_options) def outfit_viewer(outfit=nil, pet_state: nil, **html_options)
outfit = if outfit_or_options.is_a? Hash outfit = Outfit.new(pet_state:) if outfit.nil? && pet_state.present?
Outfit.new(outfit_or_options) raise "outfit_viewer must have outfit or pet state" if outfit.nil?
elsif outfit_or_options.is_a? Outfit
outfit_or_options
else
raise TypeError, "must be an outfit or hash of options to create one"
end
render partial: "outfit_viewer", locals: {outfit:} render partial: "outfit_viewer", locals: {outfit:, html_options:}
end end
end end

View file

@ -1,4 +1,5 @@
%outfit-viewer - html_options = {} unless defined? html_options
= content_tag "outfit-viewer", **html_options do
.loading-indicator= render partial: "hanger_spinner" .loading-indicator= render partial: "hanger_spinner"
%label.play-pause-button{title: "Pause/play animations"} %label.play-pause-button{title: "Pause/play animations"}

View file

@ -1,6 +1,6 @@
%li %li
= link_to useful_pet_state_path(pet_state.pet_type, pet_state) do = link_to useful_pet_state_path(pet_state.pet_type, pet_state) do
= outfit_viewer pet_state: = outfit_viewer pet_state:, class: "preview"
.name= pose_name pet_state.pose .name= pose_name pet_state.pose
- if pet_state.glitched? - if pet_state.glitched?
%span.glitched{title: "Glitched"} 👾 %span.glitched{title: "Glitched"} 👾

View file

@ -1,4 +1,4 @@
%li %li
= link_to pet_type do = link_to pet_type do
= pet_type_image pet_type, :happy, :thumb = pet_type_image pet_type, :happy, :thumb, class: "preview"
.name= pet_type.human_name .name= pet_type.human_name

View file

@ -10,7 +10,7 @@
= will_paginate @pet_types = will_paginate @pet_types
%ui.pet-types= render @pet_types %ui.rainbow-pool-list= render @pet_types
= will_paginate @pet_types = will_paginate @pet_types

View file

@ -13,7 +13,7 @@
%li %li
Appearances Appearances
%ul.pet-states %ul.rainbow-pool-list
= render @pet_states[:canonical] = render @pet_states[:canonical]
- if @pet_states[:other].present? - if @pet_states[:other].present?
@ -26,6 +26,7 @@
= stylesheet_link_tag "application/breadcrumbs" = stylesheet_link_tag "application/breadcrumbs"
= stylesheet_link_tag "application/hanger-spinner" = stylesheet_link_tag "application/hanger-spinner"
= stylesheet_link_tag "application/outfit-viewer" = stylesheet_link_tag "application/outfit-viewer"
= stylesheet_link_tag "application/rainbow-pool"
= page_stylesheet_link_tag "pet_types/show" = page_stylesheet_link_tag "pet_types/show"
- content_for :javascripts do - content_for :javascripts do