OpenNeo/impress
OpenNeo/impress
1
0
Fork 1
Code Pull requests Activity
impress/app/assets/stylesheets/application/support-form.sass

98 lines
1.6 KiB
Sass
Raw Normal View History

Migrate pet state edit form to .support-form class Most notable change here is extracting the pose option bubbles into a `data-type="radio-grid"`, and pulling that into the `.support-form` CSS. My rationale is that, unlike most fields, this field benefits from being 100%-width, and I don't want to specify that as an override if I can avoid it, because that's fragile-y. Instead, I extract this into a generic type of field that `.support-form` can use (it feels pretty reusable anyway!), and require the caller to specify how many columns they want as `--num-columns`.
2024-11-30 10:49:47 -08:00
@import "../partials/clean/constants"
Extract alt style form CSS into a new "support-form" class Gonna use this for item editing too, I think!
2024-11-20 11:16:46 -08:00
.support-form
display: flex
flex-direction: column
gap: 1em
align-items: flex-start
Refactor support-form CSS to be more reusable layout Specifically, I'm going for a more-vertical layout, cuz I want to bring PetState over to it, and the weird grid situation wasn't gonna fit the big pose label radios.
2024-11-30 10:33:58 -08:00
.fields
list-style-type: none
display: flex
flex-direction: column
gap: .75em
Extract alt style form CSS into a new "support-form" class Gonna use this for item editing too, I think!
2024-11-20 11:16:46 -08:00
width: 100%
Migrate pet state edit form to .support-form class Most notable change here is extracting the pose option bubbles into a `data-type="radio-grid"`, and pulling that into the `.support-form` CSS. My rationale is that, unlike most fields, this field benefits from being 100%-width, and I don't want to specify that as an override if I can avoid it, because that's fragile-y. Instead, I extract this into a generic type of field that `.support-form` can use (it feels pretty reusable anyway!), and require the caller to specify how many columns they want as `--num-columns`.
2024-11-30 10:49:47 -08:00
> li
Refactor support-form CSS to be more reusable layout Specifically, I'm going for a more-vertical layout, cuz I want to bring PetState over to it, and the weird grid situation wasn't gonna fit the big pose label radios.
2024-11-30 10:33:58 -08:00
display: flex
flex-direction: column
gap: .25em
max-width: 60ch
Extract alt style form CSS into a new "support-form" class Gonna use this for item editing too, I think!
2024-11-20 11:16:46 -08:00
Fix styles in support form when field is errored Ah right, `> label` doesn't work with how Rails will wrap broken labels and inputs each in a `.field_with_errors` element. Fixed, and added some basic coloring!
2024-11-30 11:50:31 -08:00
> label, > .field_with_errors label
Refactor support-form CSS to be more reusable layout Specifically, I'm going for a more-vertical layout, cuz I want to bring PetState over to it, and the weird grid situation wasn't gonna fit the big pose label radios.
2024-11-30 10:33:58 -08:00
display: block
font-weight: bold
Extract alt style form CSS into a new "support-form" class Gonna use this for item editing too, I think!
2024-11-20 11:16:46 -08:00
Fix styles in support form when field is errored Ah right, `> label` doesn't work with how Rails will wrap broken labels and inputs each in a `.field_with_errors` element. Fixed, and added some basic coloring!
2024-11-30 11:50:31 -08:00
.field_with_errors
> label
color: $error-color
input[type=text], input[type=url]
border-color: $error-border-color
color: $error-color
Add SupportFormBuilder to make the support form templates nicer Instead of hand-rolling HTML, this offers helpers like `f.field`, to help ensure the HTML is consistent, and to keep the templates more focused on the unique form elements.
2024-11-30 11:26:23 -08:00
&[data-type=radio]
ul
list-style-type: none
Migrate pet state edit form to .support-form class Most notable change here is extracting the pose option bubbles into a `data-type="radio-grid"`, and pulling that into the `.support-form` CSS. My rationale is that, unlike most fields, this field benefits from being 100%-width, and I don't want to specify that as an override if I can avoid it, because that's fragile-y. Instead, I extract this into a generic type of field that `.support-form` can use (it feels pretty reusable anyway!), and require the caller to specify how many columns they want as `--num-columns`.
2024-11-30 10:49:47 -08:00
&[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
Refactor support-form CSS to be more reusable layout Specifically, I'm going for a more-vertical layout, cuz I want to bring PetState over to it, and the weird grid situation wasn't gonna fit the big pose label radios.
2024-11-30 10:33:58 -08:00
input[type=text], input[type=url]
width: 100%
min-width: 10ch
box-sizing: border-box
Extract alt style form CSS into a new "support-form" class Gonna use this for item editing too, I think!
2024-11-20 11:16:46 -08:00
Refactor support-form CSS to be more reusable layout Specifically, I'm going for a more-vertical layout, cuz I want to bring PetState over to it, and the weird grid situation wasn't gonna fit the big pose label radios.
2024-11-30 10:33:58 -08:00
.thumbnail-input
Extract alt style form CSS into a new "support-form" class Gonna use this for item editing too, I think!
2024-11-20 11:16:46 -08:00
display: flex
align-items: center
gap: .25em
img
width: 40px
height: 40px
Migrate pet state edit form to .support-form class Most notable change here is extracting the pose option bubbles into a `data-type="radio-grid"`, and pulling that into the `.support-form` CSS. My rationale is that, unlike most fields, this field benefits from being 100%-width, and I don't want to specify that as an override if I can avoid it, because that's fragile-y. Instead, I extract this into a generic type of field that `.support-form` can use (it feels pretty reusable anyway!), and require the caller to specify how many columns they want as `--num-columns`.
2024-11-30 10:49:47 -08:00
fieldset
Add edit page for items, to set modeling status for done/glitchy items
2024-11-20 12:07:25 -08:00
display: flex
flex-direction: column
gap: .25em
Refactor support-form CSS to be more reusable layout Specifically, I'm going for a more-vertical layout, cuz I want to bring PetState over to it, and the weird grid situation wasn't gonna fit the big pose label radios.
2024-11-30 10:33:58 -08:00
legend
font-weight: bold
Extract alt style form CSS into a new "support-form" class Gonna use this for item editing too, I think!
2024-11-20 11:16:46 -08:00
.field_with_errors
display: contents
.actions
display: flex
align-items: center
gap: 1em
Extract alt style's "go to next" field into a support form helper I want to reuse this for unlabeled pet styles is why! (That's been the immediate motivation for this refactor, but also I do just like that it'll make support forms easier to build.)
2024-12-01 09:42:19 -08:00
.go-to-next
display: flex
align-items: center
gap: .25em
font-size: .85em
font-style: italic
Copy permalink