I want finer-grained column spacing for the Trackables section,
so moving to 12 columns overall and shifting all elements to
roughly match their previous 6-column placement.
Previously if you tabbed through the fields here, you'd go
through each attribute, then the maximums. I think the more
intuitive behavior would be attribute, then its maximum, then the
next attribute, so changing to achieve that.
This also allows removing a lot of the wrapping divs, so a lot of
indentation changes. View diff with spacing changes ignored for
a better understanding of what's actually changed.
The spacing is still a little off on the Trackables section, but
it at least has better alignment with the overall grid now.
I may end up reverting this since it's a bigger marshmallow than
I expected, but wanted to try a grid format since it's apparently
the preferred display style.
A lot of TODO items to address still, and am still using the
"flex" names since I haven't fully committed yet.
The bulk of the diffs in the html file are simply from changing
indentation, so look at the diff with "ignore spacing" enabled to
get a better idea of what's changed.
In the html file the changes are mainly removing divs since we
can rely on the grid for element placement and horizontal sizing.
Also switched from span to div in some spots since the elements
seem better-described as divs than spans in the context.
The Trackables section will be a little more complicated, and is
the main reason I'm committing this work-in-progress. I kind of
want to make it a table, but let's try it as a grid first and see
how it goes.
This was previously out of line with other text fields in the
sheet; this moves it in some, but feels a little hacky as a way
to achieve it. I hope to revisit at some point and get it in
line in a better way.
The main challenge seems to be that other text areas are part of
repeating fieldsets, so they're wrapped in multiple elements,
while this particular text field is non-repeating.
Various spots where spaces or newlines were too many or too few,
fixed those up.
Also the wrapping div around Attributes section shifted to
fullwide for display purposes.
Several small changes bundled together:
- Move to fullwide for top-level elements. I'm not sure why the
original version of the sheet stayed so close to the left
margin, so it's possible I'm making some horrible mistake here.
Hopefully someone will tell me if that's the case!
- input tags are also void tags, so remove the "closing" slashes
on those elements
- Add min and max values for Attributes since the rules say they
should never be lower than one or higher than four (it's
possible there are edge cases I'm missing here, though, since I
originally set max to 3 and then found level-up rules that say
it can go to 4--again, please correct me if I got this wrong!)
Again, not sure this should stick with rem for sizing, but that's
what I'm using here.
Also not sure how I feel about using !important; might revisit
that later to find a better way.
I toyed with making the trackables section into a table because
it's a TABLE, but apparently screen readers aren't good with that
and grids are the way to go.
Also noticed that there were a lot of h2 elements with spans
inside them when they could simply be h2 elements (at least as
far as I know), so moved them to only h2 elements for brevity.
Not sure whether this should continue using rem as a form of
measurement, but that's what I used for now.
Moving items to flex for now (again, might do grid in the near
future since that seems to be the recommended path these days),
and shift percentages closer to what the class names imply.
I'm hoping to remake flexeven into a grid at some point, so will
likely end up removing, but for now let's have it display in a
row (and yes, remove "space-evenly", so maybe I should rename?)
A couple text-related changes here:
- pinktext class doesn't seem to be used, so remove it for
brevity
- h1-h6 being adjusted here is affecting display on the
Attributes & Abilities tab when using the character sheet
sandbox, and all of those already use the other two classes, so
let's just use the classes
- Adjust whiteonredtext to have some space from the margin to
improve readability, and add some slightly-rounded corners to
feel a little more approachable (though I may end up going in
another direction with that)
50% width looks better in the new circular attributes field; not
sure yet whether that should stay for everywhere else in the
character sheet, but let's go with it for now.
I noticed that the "Roll" buttons all had d20 images on them, but
Magical Kitties Save the Day! only uses d6s, so let's switch that
as well. I had trouble getting the solid or outline d6 icons to
look right, so added a rakish tilt and shifted the icon color to
help there.
I'm hoping to get this looking better, but since all the
official published character sheets use circles for the
attributes, I figured this sheet should do the same.
Also noticed that the "attributes" class causes issues under the
Attributes & Abilities tab when using the character sheet
sandbox, so renaming that to kitty-attributes
I'm still not sure how best to use the logo, but for now let's
make it a full header image rather than something hanging out at
the left margin.
Adding background will help with dark mode changes coming up.
The background image comes from a completely different character
sheet with a different "feel" from Magical Kitties Save the Day!,
so I'm going with a bare background for now (which will also help
with dark mode coming up soon-ish).
Also switching to flex-columns, though I may end up redoing that
as a grid instead per Roll20 doc recommendations.
Changes included in this commit:
- Removed numbers from css that _seem_ to be unnecessary
(possibly introduced by copy-paste from Github?)
- Initial migration to the new sanitization settings (pretty much
entirely consists of removing the "sheet-" prefix throughout)
- Changed image header to use the image in the Roll20 repository
since the Anduh fork no longer seems to be available to the
public
- Swapped in internationalization strings throughout the
character sheet html (though I'm not sure I did the placeholder
items correctly, especially with number fields)
Edgeworth E