search

Raylehnhoff / Have-I-Cubed-This-Yet

A small tool to keep track of if something was cubed or not
11 stars 12 forks source link

Use toggleable divs instead of checkboxes #1

Open OlsonDev opened 9 years ago

OlsonDev commented 9 years ago

Making them bigger will save time when looking, and make clicking easier.

https://en.wikipedia.org/wiki/Fitts%27s_law

Raylehnhoff commented 9 years ago

I'm open to suggestions. The checkbox control can only really be resized natively in chrome.

Having used replacement checkbox systems in the past, I pretty much hate them. Have you had success with a library that you'd like to propose?

OlsonDev commented 9 years ago

I wasn't even thinking a library-based one. Pretty simple to roll your own <div tabindex="0"> that toggles a CSS class on click, touchend, and spacebar changing it from grey to green or something.

Otherwise, that bootstrap-switch would even be an improvement, even though it isn't that visually appealing to me. I just hate having to snipe native checkboxes that much. :-P

Raylehnhoff commented 9 years ago

There's bindings under the hood that writes it back to localStorage though, which depends on a check event. It's not just visual since there's persistence involved.

OlsonDev commented 9 years ago

That's fine, you can do all that without a change event. <input type="checkbox" data-bind="checked:isCubedSeason"/> becomes <div tabindex="0" data-bind="css: { checked: isCubedSeason }, event: { click: toggleIsCubedSeason, touchend: toggleIsCubedSeason, keydown: toggleIsCubedSeasonIfEventDotWhichEqualsSpacebar }"/>