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.
This commit is contained in:
parent
c7bea666c9
commit
c27477fabe
4 changed files with 81 additions and 66 deletions
|
|
@ -4,27 +4,29 @@
|
|||
gap: 1em
|
||||
align-items: flex-start
|
||||
|
||||
fieldset
|
||||
.fields
|
||||
list-style-type: none
|
||||
display: flex
|
||||
flex-direction: column
|
||||
gap: .75em
|
||||
width: 100%
|
||||
display: grid
|
||||
grid-template-columns: auto 1fr
|
||||
align-items: center
|
||||
gap: 1em
|
||||
|
||||
> *:nth-child(2n)
|
||||
width: 40rch
|
||||
max-width: 100%
|
||||
li
|
||||
display: flex
|
||||
flex-direction: column
|
||||
gap: .25em
|
||||
max-width: 60ch
|
||||
|
||||
> label
|
||||
display: block
|
||||
font-weight: bold
|
||||
|
||||
input[type=text], input[type=url]
|
||||
width: 100%
|
||||
min-width: 10ch
|
||||
box-sizing: border-box
|
||||
|
||||
input[type=url]
|
||||
font-size: .85em
|
||||
|
||||
> label, .field-name
|
||||
font-weight: bold
|
||||
&:has(+ .radio-field)
|
||||
align-self: start
|
||||
|
||||
.thumbnail-field
|
||||
.thumbnail-input
|
||||
display: flex
|
||||
align-items: center
|
||||
gap: .25em
|
||||
|
|
@ -33,14 +35,14 @@
|
|||
width: 40px
|
||||
height: 40px
|
||||
|
||||
input
|
||||
flex: 1 0 20ch
|
||||
|
||||
.radio-field
|
||||
fieldset[data-type=radio]
|
||||
display: flex
|
||||
flex-direction: column
|
||||
gap: .25em
|
||||
|
||||
legend
|
||||
font-weight: bold
|
||||
|
||||
.field_with_errors
|
||||
display: contents
|
||||
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@ class AltStyle < ApplicationRecord
|
|||
# `fits:<New?>-faerie-draik` intentionally will not work, and the canonical
|
||||
# filter name will be `fits:alt-style-IDNUMBER`, instead.
|
||||
def series_name
|
||||
real_series_name || "<New?>"
|
||||
real_series_name || AltStyle.placeholder_name
|
||||
end
|
||||
|
||||
def real_series_name=(new_series_name)
|
||||
|
|
@ -97,6 +97,10 @@ class AltStyle < ApplicationRecord
|
|||
thumbnail_url != DEFAULT_THUMBNAIL_URL
|
||||
end
|
||||
|
||||
def self.placeholder_name
|
||||
"<New?>"
|
||||
end
|
||||
|
||||
# For convenience in the console!
|
||||
def self.find_by_name(color_name, species_name)
|
||||
color = Color.find_by_name(color_name)
|
||||
|
|
|
|||
|
|
@ -20,11 +20,14 @@
|
|||
%ul.errors
|
||||
- @alt_style.errors.each do |error|
|
||||
%li= error.full_message
|
||||
%fieldset
|
||||
%ul.fields
|
||||
%li
|
||||
= f.label :real_series_name, "Series"
|
||||
= f.text_field :real_series_name, autofocus: !@alt_style.real_series_name?
|
||||
= f.text_field :real_series_name, autofocus: !@alt_style.real_series_name?,
|
||||
placeholder: AltStyle.placeholder_name
|
||||
%li
|
||||
= f.label :thumbnail_url, "Thumbnail"
|
||||
.thumbnail-field
|
||||
.thumbnail-input
|
||||
- if @alt_style.thumbnail_url?
|
||||
= image_tag @alt_style.thumbnail_url
|
||||
= f.url_field :thumbnail_url
|
||||
|
|
|
|||
|
|
@ -15,26 +15,31 @@
|
|||
%ul.errors
|
||||
- @item.errors.each do |error|
|
||||
%li= error.full_message
|
||||
%fieldset
|
||||
%ul.fields
|
||||
%li
|
||||
= f.label :name
|
||||
= f.text_field :name
|
||||
%li
|
||||
= f.label :thumbnail_url, "Thumbnail"
|
||||
.thumbnail-field
|
||||
.thumbnail-input
|
||||
- if @item.thumbnail_url?
|
||||
= image_tag @item.thumbnail_url
|
||||
= f.url_field :thumbnail_url
|
||||
%li
|
||||
= f.label :description
|
||||
= f.text_field :description
|
||||
.field-name Item kind
|
||||
.radio-field
|
||||
%li
|
||||
%fieldset{"data-type": "radio"}
|
||||
%legend Item kind
|
||||
%label{title: "NC items generally have a rarity value of 500.\nPaintbrush items generally contain a special message in the description."}
|
||||
= f.radio_button :is_manually_nc, false
|
||||
Automatic: Based on rarity and description
|
||||
%label{title: "Use this when Neopets releases an NC item, but labels the rarity as something other than 500, usually by mistake."}
|
||||
= f.radio_button :is_manually_nc, true
|
||||
Manually NC: From the NC Mall, but not r500
|
||||
.field-name Modeling status
|
||||
.radio-field
|
||||
%li
|
||||
%fieldset{"data-type": "radio"}
|
||||
%legend Modeling status
|
||||
%label{title: "If we fit two or more species of a standard color, assume we also fit the other standard-color pets that were released at the time.\nRepeat for special colors like Baby and Maraquan."}
|
||||
= f.radio_button :modeling_status_hint, ""
|
||||
Automatic: Fits 2+ species → Should fit all
|
||||
|
|
@ -44,8 +49,9 @@
|
|||
%label{title: "Use this when e.g. this fits the Blue Vandagyre even though it's a Maraquan item.\nBehaves identically to Done, but helps us remember why we did this!"}
|
||||
= f.radio_button :modeling_status_hint, "glitchy"
|
||||
Glitchy: Neopets.com has <em>too many</em> models
|
||||
.field-name Body fit
|
||||
.radio-field
|
||||
%li
|
||||
%fieldset{"data-type": "radio"}
|
||||
%legend Body fit
|
||||
%label{title: "When an asset in a zone like Background is modeled, assume it fits all pets the same, and assign it body ID \#0.\nOtherwise, assume it fits only the kind of pet it was modeled on."}
|
||||
= f.radio_button :explicitly_body_specific, false
|
||||
Automatic: Some zones fit all species
|
||||
|
|
|
|||
Loading…
Reference in a new issue