Table of Contents Feedback
emplums opened this issue · comments
I noticed that for long tables of contents scrollbars show up - could we remove these?
I also wonder if the TOC should line up with the title instead of the first paragraph under the title? https://share.getcloudapp.com/RBuveZw4
the live editors now are feeling a little narrow. Would it make sense to remove some of the padding to the left of the main content area to allow the live editors a bit more space? https://share.getcloudapp.com/NQuDLjed
related: the copy button in live editors overlays the text inside the editor. This was always happening but is more noticable now that the editors are more narrow. Could we make it so that the copy button never overlaps the code? https://share.getcloudapp.com/4guyweyG
Quick design feedback:
- It doesn't seem to be lined up with anything vertically, and generally seems like odd positioning
- It seems too close to the content, perhaps should be flush right, or in a box or something so doesn't look so floaty
- It also looks like we've made the page width smaller which I think is a mistake, we should make it wider if we put in the same container as the content lets make it wider to be the same width as before.
Mobile also needs some work. The Chevron should be facing down, same as in the global mobile nav. Something about this just feels off too, maybe resolved by style updates to desktop version if you add a box, or maybe just needs to be blue or something.
Some thoughts:
- I understand the position of the ToC aligned with the top of the first paragraph, as that's where it moves to in small screen, but I agree it would look better if we align with the page title
- Could we make the ToC text 14px instead? I think that would clarify the hierarchy/importance of the ToC in relation to the main content, and it may help with creating visual distance from the main content
- I agree with the suggestion to make the page width wider so the main content has the same width as before
- Should we revert to the caret instead of chevron, in small screen?
- Can we add an indicator of where in the page we are? In the designs (see 🖼⬇️) I had an orange indicator, but happy with something else if it's easier/more in line with existing examples
Closed by #166