pocket-grimoire icon indicating copy to clipboard operation
pocket-grimoire copied to clipboard

update styles to work better on mobile devices

Open shoffing opened this issue 1 year ago • 1 comments

I tested a ~15 player in-person game with these changes, and found them to make running the game quite a bit easier overall.

  • When a dialog is open, prevent mobile "pull down to refresh" by setting body overflow:hidden and dialog overscroll-behavior:contain. When testing the app, I ran into this issue constantly, especially when selecting characters. I would scroll down to the bottom of the dialog, then try and scroll up, and the page would refresh. This fixes that!

  • Make buttons, range sliders, text inputs, and toggle switches much taller. Especially for an app designed for mobile devices, it felt like everything was too skinny. I was always afraid to fat-finger something. Not anymore!

    BEFORE: image image

    AFTER: image image

  • Support wider widths for dialogs.

  • Make selected characters more obvious with a green background and updated green checkmark: image image (had to update SASS to support the cool new relative color syntax)

shoffing avatar Nov 02 '24 13:11 shoffing

I like the look of the taller inputs.

Would it be even better if some of the vertical space consumed by this change was recovered, by adding an additional column of buttons to each button list? Text would wrap on the squarer buttons this would cause, but this should be okay, as they should now be tall enough to accommodate two rows of text.

mavit avatar Nov 24 '24 16:11 mavit