diff --git a/app/assets/stylesheets/application/support-form.sass b/app/assets/stylesheets/application/support-form.sass index becd5b7f9..bf928a3a3 100644 --- a/app/assets/stylesheets/application/support-form.sass +++ b/app/assets/stylesheets/application/support-form.sass @@ -1,3 +1,5 @@ +@import "../partials/clean/constants" + .support-form display: flex flex-direction: column @@ -11,7 +13,7 @@ gap: .75em width: 100% - li + > li display: flex flex-direction: column gap: .25em @@ -21,6 +23,30 @@ display: block font-weight: bold + &[data-type=radio-grid] // Set the `--num-columns` property to configure! + max-width: none + + ul + list-style-type: none + display: grid + grid-template-columns: repeat(var(--num-columns, 1), 1fr) + gap: .25em + + label + display: flex + align-items: center + gap: .5em + padding: .5em 1em + border: 1px solid $soft-border-color + border-radius: 1em + + input + margin: 0 + + &:has(:checked) + background: $module-bg-color + border-color: $module-border-color + input[type=text], input[type=url] width: 100% min-width: 10ch @@ -35,7 +61,7 @@ width: 40px height: 40px - fieldset[data-type=radio] + fieldset display: flex flex-direction: column gap: .25em diff --git a/app/assets/stylesheets/pet_states/edit.sass b/app/assets/stylesheets/pet_states/edit.sass index c1d019fa4..727d4ed56 100644 --- a/app/assets/stylesheets/pet_states/edit.sass +++ b/app/assets/stylesheets/pet_states/edit.sass @@ -1,25 +1,5 @@ -@import "../partials/clean/constants" - outfit-viewer margin: 0 auto -.pose-options - list-style-type: none - display: grid - grid-template-columns: 1fr 1fr 1fr - gap: .25em - - label - display: flex - align-items: center - gap: .5em - padding: .5em 1em - border: 1px solid $soft-border-color - border-radius: 1em - - input - margin: 0 - - &:has(:checked) - background: $module-bg-color - border-color: $module-border-color +.fields li[data-type=radio-grid] + --num-columns: 3 diff --git a/app/views/pet_states/edit.html.haml b/app/views/pet_states/edit.html.haml index 4c1432c5f..9531a75cb 100644 --- a/app/views/pet_states/edit.html.haml +++ b/app/views/pet_states/edit.html.haml @@ -17,31 +17,35 @@ = outfit_viewer pet_state: @pet_state -= form_with model: [@pet_type, @pet_state] do |f| += form_with model: [@pet_type, @pet_state], class: "support-form" do |f| - if @pet_state.errors.any? %p Could not save: %ul.errors - @pet_state.errors.each do |error| %li= error.full_message - %dl - %dt Pose - %dd - %ul.pose-options - - pose_options.each do |pose| - %li - %label - = f.radio_button :pose, pose - = pose_name pose - %dt Glitched? - %dd + %ul.fields + %li{"data-type": "radio-grid"} + %fieldset + %legend Pose + %ul + - pose_options.each do |pose| + %li + %label + = f.radio_button :pose, pose + = pose_name pose + %li + = f.label :glitched, "Gliched?" = f.select :glitched, [["✅ Not marked as Glitched", false], - ["👾 Yes, it's bad news bonko'd", true]] - = f.submit "Save" + ["👾 Yes, it's bad news bonko'd", true]] + + .actions + = f.submit "Save changes" - content_for :stylesheets do = stylesheet_link_tag "application/breadcrumbs" = stylesheet_link_tag "application/outfit-viewer" + = stylesheet_link_tag "application/support-form" = page_stylesheet_link_tag "pet_states/edit" - content_for :javascripts do