diff --git a/app/assets/stylesheets/pet_states/support-outfit-viewer.sass b/app/assets/stylesheets/pet_states/support-outfit-viewer.sass index 26e2c1fb..c0983b2e 100644 --- a/app/assets/stylesheets/pet_states/support-outfit-viewer.sass +++ b/app/assets/stylesheets/pet_states/support-outfit-viewer.sass @@ -1,5 +1,4 @@ @import "../partials/clean/constants" -@import "../partials/context_button" support-outfit-viewer display: flex @@ -39,8 +38,16 @@ support-outfit-viewer input[type=radio] margin: 0 - [type=submit] - +context-button + .outfit-viewer-area + > [data-format=png] + display: none + + &:has(input[value=png]:checked) + .outfit-viewer-area + > [data-format=svg] + display: none + > [data-format=png] + display: block > table flex: 0 0 auto diff --git a/app/views/pet_states/_support_outfit_viewer.html.haml b/app/views/pet_states/_support_outfit_viewer.html.haml index 26fe0f27..4fe81992 100644 --- a/app/views/pet_states/_support_outfit_viewer.html.haml +++ b/app/views/pet_states/_support_outfit_viewer.html.haml @@ -1,24 +1,21 @@ = content_tag "support-outfit-viewer", **html_options do - = turbo_frame_tag "support-outfit-viewer-preview" do - %div - -# Render an outfit viewer in a magnifier. Use SVG by default for clarity, - -# but also offer an option to switch to PNG if it looks wrong. - %magic-magnifier - = outfit_viewer outfit, - preferred_image_format: params[:preferred_image_format] == "png" ? :png : :svg + %div + .outfit-viewer-area + %magic-magnifier{"data-format": "svg"} + = outfit_viewer outfit, preferred_image_format: :svg + %magic-magnifier{"data-format": "png"} + = outfit_viewer outfit, preferred_image_format: :png - = form_with method: :get, class: "outfit-viewer-controls" do |f| - %fieldset - %legend Format - %label - = f.radio_button "preferred_image_format", "svg", - checked: params[:preferred_image_format] != "png" - SVG - %label - = f.radio_button "preferred_image_format", "png", - checked: params[:preferred_image_format] == "png" - PNG - = f.submit "Update" + = form_with method: :get, class: "outfit-viewer-controls" do |f| + %fieldset + %legend Format + %label + = f.radio_button "preferred_image_format", "svg", + checked: true + SVG + %label + = f.radio_button "preferred_image_format", "png" + PNG %table %thead