UI: don't toggle classes about issikebrokenyet.github.io HOT 14 CLOSED

I'd like to think more about other ways of triggering the toggling.

from issikebrokenyet.github.io.

We could fix this with more javascript that on load looks for all checked checkboxes and ensures the class is there?

Not sure of a better solution (without just going to a pure HTML/CSS solution where rows are visible if the checkbox has the :checked decorator.

from issikebrokenyet.github.io.

If you're happy with it, I can write the JS to add the toggle on load for checkboxes with a tick?

from issikebrokenyet.github.io.

I wonder whether we can modify the layout with a full row cell containing a details / summary split. This might make the table feel messy tho

from issikebrokenyet.github.io.

So this kind of works with pure HTML, but the only issue is one has to nest tables and this means it'll be hard to make the cells align nicely I believe. Example in the new branch subvariants-new-ui (branched from subvariants)

Edit: the issue is we cannot place a details element within a table or tr element but we can place it in a td. This means we must then make a new table for variants.

from issikebrokenyet.github.io.

Okay, new push which ditches trying to force HTML to do something it doesnt want to do, and instead replaces all checkboxes with buttons.

Have a look what you think, but this fixes the soft refresh problem at least

Edit: I'm not certain about the blue highlight for variants though. Makes them stand out a bit too much I think.

from issikebrokenyet.github.io.

Did you push? I don't see anything new on subvariants-new-ui

from issikebrokenyet.github.io.

Sorry Luca, I committed without pushing. I was a bit distracted last night.

Screenshot in case you want to see a preview but dont have time to spin up the site yourself currently

from issikebrokenyet.github.io.

What about something more compact:

I pushed this to a new branch subvariants-new-ui-compact. I also played a bit with the CSS. The triangle's a bit hard to catch with the mouse, it requires more fiddling with ::before, paddings, the transformation origin, etc.

from issikebrokenyet.github.io.

Yeah this is nice. I was worried this might not be obvious enough but maybe I can add a tooltip on hover too :)

Away from my laptop but will experiment this evening. Your idea is certainly neater :)

Edit: We could also make clicking the parent variant name act as the button so it's easier to click

from issikebrokenyet.github.io.

Did some work on this but mainly just wasted energy fighting CSS and not not getting very far...

I made some progress with making the triangle easier to click, although firefox is more buggy than chrome here.

Safari is a nightmare with visibility: collapse though, this really needs to be fixed or avoided. This is the problem in #28

from issikebrokenyet.github.io.

I also played a bit with the css. I removed the styling on the .vbtn class I'd say the variant button is ok, now. Tested in Chrome and Firefox.

from issikebrokenyet.github.io.

Branched this to subvariants-new-ui-compact-grid to use a grid to address the other issue, but everything from this solution carries over nicely

from issikebrokenyet.github.io.

Merged the solution using buttons.

from issikebrokenyet.github.io.