REST API handbook: move ToC out of the way

[jnylen0]

The REST API handbook needs some special CSS rules for the table of contents on the Reference pages. This should not be in the way of the reference tables. The problem is most obvious at smaller screen widths - for example:

Here's some CSS that helps:

#main.rest-api-handbook .table-of-contents {
    float: none;
    overflow: hidden;
    width: 100%;
    margin: 0 auto 1em;
    clear: both;
}

#main.rest-api-handbook .table-of-contents ul.items li ul li {
    display: inline;
}

#main.rest-api-handbook .table-of-contents ul.items li ul li::after {
    content: '; ';
}

#main.rest-api-handbook .table-of-contents ul.items li ul li:last-child::after {
    content: '';
}

Screenshot with this CSS applied:

This is almost a complete fix for this issue: the only task remaining (that I'm not sure how to do) is to make this CSS only apply to pages under the "Reference" section of the handbook.

These docs pages need a lot of other work too, but this is a good next step.

[BharatKambariya]

Hi @jnylen0

Here rest-api-handbook class is used in many division so it would be affect to other division. So I have used type-handbook class and it is not used in any of the section. So it will not affect to other.

#main.rest-api-handbook.type-handbook .table-of-contents {float: none;overflow: hidden;width: 100%;margin: 0 auto 1em;clear: both;}

#main.rest-api-handbook.type-handbook .table-of-contents ul.items li ul li {display: inline;}

#main.rest-api-handbook.type-handbook .table-of-contents ul.items li ul li::after {content: '; ';}

#main.rest-api-handbook.type-handbook .table-of-contents ul.items li ul li:last-child::after {content: '';}

[jnylen0]

• This ticket does not have a patch file yet. I will add one when I can.
• This ticket is not invalid.
• This ticket is not resolved, so please don't close it.
• #main.rest-api-handbook will match only one div (the one with id="main"), so adding an extra class doesn't change anything.

[BharatKambariya]

Hi @jnylen0

Sorry for the inconvenience like:
This ticket does not have a patch file yet. I will add one when I can.
This ticket is not invalid.
This ticket is not resolved, so please don't close it.

We can use class instead of ID because class is better. it's easy to overwrite it for everyone.

.rest-api-handbook.type-handbook .table-of-contents {float: none;overflow: hidden;width: 100%;margin: 0 auto 1em;clear: both;}

.rest-api-handbook.type-handbook .table-of-contents ul.items li ul li {display: inline;}

.rest-api-handbook.type-handbook .table-of-contents ul.items li ul li::after {content: '; ';}

.rest-api-handbook.type-handbook .table-of-contents ul.items li ul li:last-child::after {content: '';}

[coffee2code]

In 4608:

developer.wordpress.org: Add class to REST API handbook reference sub-pages.

Targeted CSS rules are needed for special formatting of reference pages in the REST API handbook.

See #2347.

[coffee2code]

In 4609:

developer.wordpress.org: Display table of contents at full content-width above page content to prevent squashing display of tables in REST API handbook reference sub-pages.

Props jnylen0.
Fixes #2347.