WIP: New Feature: Navigation indication on the right TOC

[shuuji3]

Resolves #349.

This PR implements the navigation indication on the right TOC like Apache Airflow Documentation.

Screen Recording

docsy-toc-highlight.mov

Current Issue

When the depth is more than 1, the left margin is not correct.

docsy-toc-highlight-issue.mov

Any feedback is welcome! 🙂

[shuuji3]

I need to find a way to adjust the appropriate margin width for deeper TOC items.

[narrenfrei]

Can you offer a live preview?

[narrenfrei]

I took a look on https://airflow.apache.org/docs/apache-airflow/stable/installation.html
Maybe a tip: They define the indention of the structure level not by margin (or padding) of each <ul> tag of the list, but direct on the <a> tags in dependency of the number of <li> tags before:

.roadmap .wy-nav-side-toc .wy-menu-vertical li li > a {
    padding-left:2.427em
}

.roadmap .wy-nav-side-toc .wy-menu-vertical li li li > a {
    padding-left:4.045em
}

.roadmap .wy-nav-side-toc .wy-menu-vertical li li li li > a {
    padding-left:5.663em
}

[shuuji3]

Thank you for the tip, @narrenfrei! Understood. Maybe we can use the same technique. I'll investigate the Docsy implementation more.

You can see the live preview here: https://deploy-preview-506--docsydocs.netlify.app/docs/getting-started/

[narrenfrei]

Thanks for the preview. I think, I've already found a solution. But for this we would have to change the old CSS for specifying the old "standard alignment" of the nested lists (levels of TOC) and use the ul tags instead of the li tags to set the margin and padding.

@LisaFC Would it be OK for you, to change the CSS a little bit?

[narrenfrei]

Thanks for the preview. I think, I've already found a solution. But for this we would have to change the old CSS for specifying the old "standard alignment" of the nested lists (levels of TOC) and use the ul tags instead of the li tags to set the margin and padding.

@LisaFC Would it be OK for you, to change the CSS a little bit?

Sorry for my last post. But I thought a little bit more about the solution in my mind and it won't work for this issue.

The possibilities I see now, (1) change the generated HTML code of the TOC a little bit, (2) tweak the JS or (3) a other CSS trick, I haven't in mind at the moment.

[narrenfrei]

I've been thinking about our problem again. At the moment I think that it will really be best or simplest to design the CSS similar to https://airflow.apache.org/docs/apache-airflow/stable/installation.html

• No indentation for the <li> elements, instead the <a> elements directly following the <li> elements, depending on the number of previous <li> elements.
• If you mark the current position over the border of the <li> elements (as in your current proposal), the entire block with its sub-headings is always highlighted first and when you scroll down only the sub-heading. Alternatively, the border could also be given directly to the <a> element, in which case only the parent element would be highlighted.
• For each menu depth that is to be indented, the indentation distance would have to be defined separately via CSS. This would no longer indent an infinite number of levels, but only those that are defined in the CSS. This might even be an advantage, otherwise there is hardly any space left for the text after indenting too far.

[e-minguez]

Bumping this as it would be really useful, thanks! :)

[fekete-robert]

Hi, I have a PR that allows you to use a javascript-based ToC on the right which has this feature: #1049

…

On Fri, 29 Jul 2022, 18:05 Eduardo Mínguez, ***@***.***> wrote: Bumping this as it would be really useful, thanks! :) — Reply to this email directly, view it on GitHub <#506 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AA6AU3L46K5A643UWW3B2MLVWP6NDANCNFSM42TEFUXA> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>