Toc component: style improvements

[DanielWTQ]

Improve the styles for the newly added Toc component, which adds a sticky table of contents:

• Restore a background color for the table.

• With that background color, the table shouldn't take up the entire width of the page, so remove the 100% width.

• Specify z-index: 1; for the wrapping div so that reference tooltips from the Cite extension are not shown through the table of contents.

• Restore the ability to toggle the visibility of the table of contents.

WE-279

[malberts]

What is your use case here, specifically regarding the background color and width? It sounds like you still have the TOC in the bigger main content area?

In my original use case the TOC goes into the sidebar:

But with the default background and without the width (this PR):

I'm happy to find a sensible default that makes sense for more use cases. Right now I don't consider the TOC component to be official yet, so we can change things.

[DanielWTQ]

@malberts so as you guessed we were having the table of contents in the main contents area, in fact to test this out I was using the standard.xml layout but adding <component type="Toc" /> right before <component type="MainContent"/>.

If you don't mind sharing the layout that you were using, I can rework this patch to ensure that the sidebar styles aren't affected by either moving the styles for the sidebar to be scoped to the sidebar, or moving my changes to be scoped to the main content section

[malberts]

@DanielWTQ I posted a very basic sidebar example here: #386 (comment)

[malberts]

I moved the Hide/Show fix into a separate PR: #410. Thanks for including it here.

[DanielWTQ]

I moved the Hide/Show fix into a separate PR: #410. Thanks for including it here.

Thanks - I removed that from my patch. Please let me know what else needs to be fixed for this to be mergeable

[malberts]

My original concern about the background color and width still apply. What is the use case for putting the TOC in the main section? Are you trying to separate it from the page content somehow?

[DanielWTQ]

My original concern about the background color and width still apply. What is the use case for putting the TOC in the main section? Are you trying to separate it from the page content somehow?

I was putting it in the main section to be above the normal page content but still in the same horizontal area, the way that tables of contents exist in Vector, for example.

[malberts]

I'm merging this, but I'll add a note that the wiki admin should should implement styling since the (likely more common) use case of moving the TOC to the sidebar will look ugly otherwise. I cannot think of an easy way to distinguish the TOC being in the sidebar, above MainContent, or anywhere else really.