WordPress.org

Making WordPress.org

Opened 9 months ago

Closed 9 months ago

#2347 closed defect (fixed)

REST API handbook: move ToC out of the way

Reported by: jnylen0 Owned by: coffee2code
Milestone: Priority: normal
Component: Developer Hub Keywords:
Cc:

Description

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:

https://nylen.io/rest-api-reference-posts-before-css.png

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:

https://nylen.io/rest-api-reference-posts-after-css.png

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.

Change History (7)

This ticket was mentioned in Slack in #meta-devhub by jnylen. View the logs.


9 months ago

#2 @BharatKambariya
9 months ago

  • Keywords has-patch added
  • Resolution set to invalid
  • Status changed from new to closed

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: '';}

#3 @jnylen0
9 months ago

  • Keywords needs-patch added; has-patch removed
  • Resolution invalid deleted
  • Status changed from closed to reopened
  • 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.

#4 @BharatKambariya
9 months ago

  • Keywords needs-patch removed

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: '';}

#5 @coffee2code
9 months ago

  • Component changed from Handbooks to Developer Hub
  • Owner set to coffee2code
  • Status changed from reopened to accepted

#6 @coffee2code
9 months ago

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.

#7 @coffee2code
9 months ago

  • Resolution set to fixed
  • Status changed from accepted to closed

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.

Note: See TracTickets for help on using tickets.