WebHost: minor css changes to make Supported Games page usable without js

[black-sliver]

No description provided.

[Silvris]

Is this different from #2259 ?

[black-sliver]

Yes, it's a different approach.

There is even a 3rd possible approach that is probably even cleaner from a DOM PoV: inserting the arrows and assigning the classes with JS, however that has a tendency to be blinky if the javascript is not inline in the html.

And a 4th that is inserting the arrows using css with ::before, hiding the content has the same potential blinkiness issues though.

---

as a side note: i would change #{{ game_name }}-arrow in JS to select .collapse-arrow instead. There is not really a reason to have an id there, but I didn't want to touch the JS.

[LegendaryLinux]

I can adjust the JS to not loop over the class elements. Expect a push in a couple days.

[KonoTyran]

another alternative would be something like
https://codepen.io/Kono-Tyran/pen/BavqYYB
this uses only css to open/close. then the search feature would just need to toggle checkbox states.
page would be fully functional without js minus search.

[black-sliver]

Oh, that's an interesting one.
I personally don't really like the raw HTML it uses (assuming HTML should be data, js and css the representation), and I think "show all" is a valid approach if the user requested a non-interactive (non-js) version of the page, but I'm sure there are uses for it.

[LegendaryLinux]

TIL about subsequent combinators. I think @KonoTyran's approach here is ingenious.

If we go the route of Jinja with optional JS everywhere, this sort of thing could preserve interactivity for a lot of our pages when users have JS disabled.

I think in any case, I want to show the JS search/collapse fields, even if they are non-functional for users with JS turned off. I want to include a message like "Hey, look at the cool stuff you could have with JS turned on."

[Berserker66]

It's an approach I've used myself on roll20 character sheets, as they don't allow any JS at all. Worked perfectly fine there.

[black-sliver]

I don't think promoting "your version" when the user asked for a "no script version" is helpful. Search functionality is still provided by ctrl+f.

Kono's suggestion on the other hand may improve usability of the page by making it faster to read through, however I don't think the old experience was all that bad.

[LegendaryLinux]

@black-sliver Let me know what you think of those JS changes. The goal was to remove most id attributes and use relative element referencing.

[black-sliver]

I think DOM and JS looks a lot cleaner this way.
Found one mistake where it adds the class to the header instead of the content, breaking the collapse-all when clearing the search box.

[black-sliver]

Not sure if we should leave the TODO: or how we want to tackle that in general. I've never worked with that kind of fragmented js/css where each page has its own set of files.

[LegendaryLinux]

Separate HTML / JS / CSS is how I've always organized things unless a framework is involved. I'm okay with removing the TODO.