diff --git a/app/assets/stylesheets/wardrobe/show.css b/app/assets/stylesheets/wardrobe/show.css index 64cfbf60..b215ff09 100644 --- a/app/assets/stylesheets/wardrobe/show.css +++ b/app/assets/stylesheets/wardrobe/show.css @@ -273,6 +273,19 @@ select, } } +/* Progressive enhancement: submit buttons hidden when JS auto-submits */ +@media (scripting: enabled) { + .progressive-submit { + opacity: 0; + animation: fade-in 0.25s forwards; + animation-delay: 0.75s; + } +} + +:is(species-color-picker, pose-picker-popover):state(auto-loading) .progressive-submit { + display: none; +} + /* =================================================================== Page Layout Top-level grid: preview on left/top, controls on right/bottom. @@ -434,30 +447,15 @@ body.wardrobe-v2 { } } - /* Submit button: progressive enhancement pattern */ - /* If JS is disabled, the button is always visible */ - /* If JS is enabled but slow to load, fade in after 0.75s */ - /* Once the web component loads, hide the button completely */ input[type="submit"] { padding: 0.5rem 1rem; font-size: 1rem; } - /* If JS is enabled, hide the submit button initially with a delay */ @media (scripting: enabled) { input[type="submit"] { position: absolute; margin-left: 0.5em; - opacity: 0; - animation: fade-in 0.25s forwards; - animation-delay: 0.75s; - } - } - - /* Once auto-loading is ready, hide the submit button completely */ - &:state(auto-loading) { - input[type="submit"] { - display: none; } } } @@ -551,6 +549,14 @@ pose-picker-popover { user-select: none; } + .pose-option input[type="radio"], + .style-option input[type="radio"] { + position: absolute; + opacity: 0; + width: 0; + height: 0; + } + .pose-option { display: block; cursor: pointer; @@ -559,13 +565,6 @@ pose-picker-popover { height: 60px; margin: 0 auto; - input[type="radio"] { - position: absolute; - opacity: 0; - width: 0; - height: 0; - } - .pose-thumbnail { width: 60px; height: 60px; @@ -629,27 +628,11 @@ pose-picker-popover { } } - /* Submit button: progressive enhancement pattern */ .pose-submit-button { margin-top: 1rem; width: 100%; } - /* If JS is enabled, hide the submit button initially with a delay */ - @media (scripting: enabled) { - .pose-submit-button { - opacity: 0; - animation: fade-in 0.25s forwards; - animation-delay: 0.75s; - } - } - - /* Once auto-submit is enabled, hide the submit button completely */ - &:state(auto-loading) .pose-submit-button, - &:state(auto-loading) .style-submit-button { - display: none; - } - /* Tab panel layout */ .tab-list { display: flex; @@ -708,13 +691,6 @@ pose-picker-popover { display: block; cursor: pointer; - input[type="radio"] { - position: absolute; - opacity: 0; - width: 0; - height: 0; - } - .style-option-content { display: flex; align-items: center; @@ -766,19 +742,10 @@ pose-picker-popover { } } - /* Style submit button: same progressive enhancement as pose */ .style-submit-button { margin-top: 1rem; width: 100%; } - - @media (scripting: enabled) { - .style-submit-button { - opacity: 0; - animation: fade-in 0.25s forwards; - animation-delay: 0.75s; - } - } } /* =================================================================== diff --git a/app/views/wardrobe/appearance/_pose_picker_form.html.haml b/app/views/wardrobe/appearance/_pose_picker_form.html.haml index f3198d17..a49dd675 100644 --- a/app/views/wardrobe/appearance/_pose_picker_form.html.haml +++ b/app/views/wardrobe/appearance/_pose_picker_form.html.haml @@ -29,4 +29,4 @@ = render "appearance/pose_option", pose: "SAD_FEM", pet_state: @available_poses["SAD_FEM"], selected: !@alt_style && @selected_pose == "SAD_FEM" %td = render "appearance/pose_option", pose: "SICK_FEM", pet_state: @available_poses["SICK_FEM"], selected: !@alt_style && @selected_pose == "SICK_FEM" - = submit_tag "Change pose", name: nil, class: "pose-submit-button" + = submit_tag "Change pose", name: nil, class: "pose-submit-button progressive-submit" diff --git a/app/views/wardrobe/appearance/_species_color_picker.html.haml b/app/views/wardrobe/appearance/_species_color_picker.html.haml index 01b88710..3c879d70 100644 --- a/app/views/wardrobe/appearance/_species_color_picker.html.haml +++ b/app/views/wardrobe/appearance/_species_color_picker.html.haml @@ -9,4 +9,4 @@ options_from_collection_for_select(@species, "id", "human_name", @selected_species&.id), "aria-label": "Pet species" - = submit_tag "Go", name: nil + = submit_tag "Go", name: nil, class: "progressive-submit" diff --git a/app/views/wardrobe/appearance/_style_picker_form.html.haml b/app/views/wardrobe/appearance/_style_picker_form.html.haml index 1c02f162..a2e3bd86 100644 --- a/app/views/wardrobe/appearance/_style_picker_form.html.haml +++ b/app/views/wardrobe/appearance/_style_picker_form.html.haml @@ -8,4 +8,4 @@ .style-option-thumbnail %img{src: alt_style.thumbnail_url, alt: "", width: 40, height: 40, loading: "lazy"} %span.style-option-name= alt_style.adjective_name - = submit_tag "Change style", name: nil, class: "style-submit-button" + = submit_tag "Change style", name: nil, class: "style-submit-button progressive-submit"