Allow expanding to the full table of contents in the dev edition

[domenic]

Right now in the dev edition, we are hiding table of contents items beyond the second level. (See also https://github.com/whatwg/wattsi/issues/53 where we contemplate not outputting them at all.)

https://github.com/benschwarz/developers.whatwg.org/issues/59 by @silviapfeiffer indicates that it would be helpful for people to have the table of contents expandable to beyond two levels. This should be relatively easy to do with a little JavaScript.

[domenic]

I gave this a shot but got stuck on making the TOC not ugly. In particular trying to get our section numbers to align nicely at large depths eluded me.

Help welcome; just hack on https://jsfiddle.net/otybb6cd/ until you get something that looks nice.

Happy to take drastic changes too (e.g., maybe no indents??).

[Munter]

https://jsfiddle.net/dmk665mq/

I kept the indents, but removed all the absolute positioning that caused number and title overflowing into each other. All toc numbers now have an equal margin to the section title. Of course this means the titles don't align when sub section numbers switch from single digit to multiple digits. But I think it looks better than before

[domenic]

Yeah, that might be sufficient. I tried stuff like that and was stuck on, as you said, the digit switch, and also cases like "4.8.4.3.13 An image in an e-mail or private document intended for a specific person who is known to be able to view images" where it overflows onto a new line. But what I really need is someone to step outside my head and get a second opinion, and so if you think that looks OK, then I'm happy :D

[Munter]

How conservative does this css have to be? Is flexbox ok?

[Munter]

ol.toc a {
  display: flex;
}

The above fixes the multiline link display, so the numbers stand for themselves. It also widens the underline to full content width. I'm on the fence on wether that's better or worse. The good thing is that even for very old browsers the fallback is not horrible.

This would require another span as child of each link, otherwise the <code> tags in some of the titles wreck havoc with the flex layout

[domenic]

I don't think it has to be very conservative; we can expect most web developers to be viewing this on the latest browsers. Nice trick with the flex!! I think the underline is now not great myself, but maybe we can do text-decoration instead of border-bottom.

[domenic]

Hmm, the flex messes up the cases where you have tags inside the a, e.g. The aside element.

GTG to dinner now, but having fun iterating on this... here's my latest using your tricks. https://jsfiddle.net/9pdhuyhf/

[getsetbro]

Here is a concept: https://jsfiddle.net/getsetbro/foz6x3ak/ or maybe: https://jsfiddle.net/getsetbro/38zr2aaa/ or https://jsfiddle.net/getsetbro/58uukk3r/

[kball]

@domenic is it cool to tweak the html as well? To @Munter's point, if you're willing to contain the non-number content in a new element (span or what have you) so you always have 2 spans as the children of the a, then the flex behavior is much cleaner, letting you e.g. have your content in a block and not wrap under the number. You could also then independently influence underline for the content as compared to the numbers.

For example see this quick fiddle: https://jsfiddle.net/6v1as46z/

[domenic]

Yeah, we should probably tweak the HTML. That requires a bit more work on the build tools but it would definitely allow cleaner styles. I'll go work on that...