Most were going past the edge of nearby elements; I thought it
was due to scrollbars adding width to the element, but it kinda
seems like it's just not lining things up properly, possibly due
to wrapping divs in some spots.
This makes things line up in Chrome currently, though I suspect
it won't look good in Firefox, so will likely need some more work
in the future.
When we switched to grid, the buttons went from sitting at left
and right margins to being bunched up in the first column.
repcontrol class doesn't seem to be defined anywhere, so fine to
create our own, and then we basically copy the fullwide class to
stretch across the entire page.
I'm not sure I like the solution currently given how much blank
space it leaves between the buttons and between elements above
and below, but maybe I just need to remove the <hr> elements to
get that feeling better.
This fixes the issue with button size in the Attributes section
while also improving the "feel" of the spacing around the button
text.
I'm not sure I have the padding balanced right since the tilted
d6 icon doesn't balance well, but it's better than before.
I'd like to remove the !important, but for now it's needed to get
the changes to show up. I'm sure there's a better fix, but
working is close enough for now.
darkgrey works better as a background color on the drop-shadow
since it shows up in both light and dark modes. I'm not sure
this is the final version, but I think I like it better than the
previous version.
Also move the overlapping text down slightly--I worry that having
it overlap too much affects legibility for "KITTIES" in the logo.
I read somewhere that it's more visually pleasing to have
elements line up with at least two other elements, so let's have
this line up with the character token at the top of the page (in
the Person section it's lining up with another element of the
same size, so less a concern there).
Also provides more room for the user input to be fully displayed
for long names like "Her Majesty Lady Monster Truck"
Get rid of the explicit column definitions for trackables and fix
bug with class definition starting with a number.
Removing the column definitions made the number fields move away
from each other, but I think it's clearer that they're associated
when they're closer, so adjusted margins on them to get them into
the right spot.
When resizing the character sheet, the previous "logo" would get
all scattered. I think these changes addresses that.
Also move the token image up slightly to look better (on my
screen, at least) against the other items in the header.
The change to the roll button at the top of the page also affects
the Attributes roll buttons, so that'll need fixing soon, but I
really like having the character token on the actual character
sheet!
I did ponder whether it should be the avatar instead. It
probably should. I'll come back to that at some point.
I read somewhere (that I can't find right now) that images on
character sheets are less preferable, so let's try using a CSS
take on the (probably copyrighted) logo the sheet originally had.
This allows us to have a smaller logo, which puts more sheet
content above-the-fold, and also allows us to move (and rename)
the extra-dice-rolls button for even more content above-the-fold.
I read somewhere else that pure black isn't recommended for dark
mode, so let's shift to a slightly-less-dark color for the dark
mode background. This also brings the textarea backgrounds more
into line with the slight difference between their background and
the sheet background in non-darkmode.
It was getting a tiny px width from the base.css that kept
cutting off my Kitty's name and I WOULD NOT STAND FOR IT (except
for all the days I did because other stuff was worse)
Switch to "Limits" instead of "Maximums" since it's a simpler
word and matches what's in the rules. Also fits the column
better.
I'm not sure whether the LIMITS column is obviously connected to
the TRACKABLES column, but leaving that aside for now.
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