OpenNeo/impress
OpenNeo/impress
1
0
Fork 1
Code Pull requests Activity

[WV2] Unify common CSS patterns

Browse source
This commit is contained in:
Emi Matchu 2026-02-06 09:17:37 -08:00
parent 3582b3674b
commit 9baa64d39a
4 changed files with 24 additions and 57 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

75
app/assets/stylesheets/wardrobe/show.css
View file

@ -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;
}
}
}
/* ===================================================================

2
app/views/wardrobe/appearance/_pose_picker_form.html.haml
View file

@ -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"

2
app/views/wardrobe/appearance/_species_color_picker.html.haml
View file

@ -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"

2
app/views/wardrobe/appearance/_style_picker_form.html.haml
View file

@ -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"