UI: don't use `display: none` on rows? about issikebrokenyet.github.io HOT 23 CLOSED

pushed to main

from issikebrokenyet.github.io.

I suppose so. I lost track of the subissues here, but whatever is left can be dealt with in separate issues.

from issikebrokenyet.github.io.

Does using visibility: collapse instead fix this? Seems like the answer

https://developer.mozilla.org/en-US/docs/Web/CSS/visibility

from issikebrokenyet.github.io.

Fixed with the above trick

dc26dcd

from issikebrokenyet.github.io.

:( thwarted by safari again: this draws all the whitespace vertically so the page becomes really long with no content. I'll have to play more.

from issikebrokenyet.github.io.

OK, so:

.hidden-row{
    visibility: collapse; 
    display: table-column;
}

Works on Safari, but display: table-column; then makes everything out of alignment on Firefox and Chrome...

I really dont want to start putting in JS/CSS hacks to only target certain browsers...

from issikebrokenyet.github.io.

Why would anyone use display: table-column on a row? Did you mean to use display: table-row?

According to caniuse, visibility: collapse is not even supposed to work on Chrome https://caniuse.com/mdn-css_properties_visibility_collapse. Strange thing it seems to work.

I suppose we'd better abandon visibility: collapse. It's a shame.

from issikebrokenyet.github.io.

isn't there a -apple-display property that only works on Safari? 😄 Seems not.

I suppose, unless we rewrite everything with grid, our only solution is display: none. Screw Apple!

from issikebrokenyet.github.io.

Yeah I did think about just rewriting this a grid. It would also help with it being more responsive on mobile (you could have each row become a comment somehow?) but you would lose the ease of tables 🙃

I have no idea why using the display as a column makes Apple wanna use collapse properly 🫠

from issikebrokenyet.github.io.

So I had a free hour this morning, so I redid my HTML as grids.

This solves this issue, i think. Work done in branch subvariants-new-ui-compact-grid

from issikebrokenyet.github.io.

Great, thanks! I added a few touches, and merged back in a single file.

I tested on Firefox and Chrome. Do you confirm it renders nicely in Safari? If yes, we can merge this into subvariants, and then finally everything into main!

from issikebrokenyet.github.io.

Maybe the indent for variants cramps the cell too much, but im happy either way.

Next TODO might be to do new CSS for mobile users but this can be done later.

🎉 Looks as intended on safari:

from issikebrokenyet.github.io.

I suppose the indent can be reduced a bit

from issikebrokenyet.github.io.

I'm not very experienced with grid but we could probably also set the last column (for comments) to be tighter as we know what content will be placed here (similar to how I did the small cell for the variant button.)

from issikebrokenyet.github.io.

There's lots of wasted space around the complexity columns too, but the thing with grid is that it's not good for much else than equally spaced columns. table was really ideal, such a shame that Safari can't handle it properly.

from issikebrokenyet.github.io.

I've just gone through and carefully laid out the columns, so I think it looks better.

This required setting the CSS for each grid, but I think that's ok considering the improvement

from issikebrokenyet.github.io.

With px units. Do you think this is robust enough?

from issikebrokenyet.github.io.

I hope so, it plays ok with zooming, and I've just pushed another bunch of code to have a collapsed grid on mobile.

To help with the px, I also use minmax for when the screen starts to get small and other small improvements

from issikebrokenyet.github.io.

The little mobile "cards" dont feel as stylish as the table, but I think they're easier to read and get information from

from issikebrokenyet.github.io.

OK bedtime, but nicer cards

Edit: cleaned up a few bits of mess and supported cards in dark theme better

from issikebrokenyet.github.io.

Just for context, currently on mobile (what's on main) the grid looks ugly. So getting this merged is fairly high priority I think.

from issikebrokenyet.github.io.

Just tweaked a little more and I'm happy with how the design looks ok Firefox, Safari and Chrome (and hopefully mobile, if the emulator on Chrome was OK).

If you're happy, I suggest we merge to main to fix mobile experience :)

from issikebrokenyet.github.io.

This can probably be closed now, right?

from issikebrokenyet.github.io.