From 3898e6bf715f3990708987f24ab95b448d37b99b Mon Sep 17 00:00:00 2001 From: Shogun Date: Fri, 7 Jan 2022 12:51:44 +0100 Subject: [PATCH] doc: improve usability of API docs --- doc/api/index.md | 1 + doc/api_assets/style.css | 83 ++++++++++++++++++++++++++++++++++++++-- doc/template.html | 41 +++++++++++++++++--- tools/doc/html.mjs | 5 ++- 4 files changed, 120 insertions(+), 10 deletions(-) diff --git a/doc/api/index.md b/doc/api/index.md index c0980fd798cb06..e83fa45b2f209b 100644 --- a/doc/api/index.md +++ b/doc/api/index.md @@ -10,6 +10,7 @@
+* [Index](index.md) * [Assertion testing](assert.md) * [Asynchronous context tracking](async_context.md) * [Async hooks](async_hooks.md) diff --git a/doc/api_assets/style.css b/doc/api_assets/style.css index 0eb5125dc5aa68..8a6e6b066d6f5d 100644 --- a/doc/api_assets/style.css +++ b/doc/api_assets/style.css @@ -169,11 +169,31 @@ li.picker-header { position: relative; } -li.picker-header:hover > a { +li.picker-header .collapsed-arrow, li.picker-header .expanded-arrow { + width: 1.5ch; +} + +li.picker-header .collapsed-arrow { + display: inline-block; +} + +li.picker-header .expanded-arrow { + display: none; +} + +li.picker-header.expanded .collapsed-arrow { + display: none; +} + +li.picker-header.expanded .expanded-arrow { + display: inline-block; +} + +li.picker-header.expanded > a { border-radius: 2px 2px 0 0; } -li.picker-header:hover > .picker { +li.picker-header.expanded > .picker { display: block; z-index: 1; } @@ -223,6 +243,10 @@ li.picker-header a span { border-bottom-left-radius: 1px; } +.gtoc-picker-header { + display: none; +} + .line { width: calc(100% - 1rem); display: block; @@ -763,12 +787,33 @@ kbd { .header { position: sticky; - top: 0; + top: -1px; + padding-top: 1rem; +} + +.header .pinner-header { + display: none; + margin-right: 0.4rem; + font-weight: 700; +} + +.header.is-pinned { background-color: var(--color-fill-app); - padding-top: 1.5rem; z-index: 1; } +.header.is-pinned .header-container { + display: none; +} + +.header.is-pinned .pinner-header { + display: inline; +} + +.header.is-pinned #gtoc { + margin: 0; +} + .header-container { display: flex; align-items: center; @@ -786,6 +831,20 @@ kbd { outline: var(--brand3) dotted 2px; } +@media only screen and (max-width: 576px) { + .header.is-pinned { + position: relative; + } + + .header.is-pinned .header-container { + display: flex; + } + + .header.is-pinned .pinner-header { + display: none; + } +} + @media only screen and (min-width: 577px) { #gtoc > ul > li { display: inline; @@ -799,6 +858,18 @@ kbd { margin-right: 0; padding-right: 0; } + + .header #gtoc > ul > li.pinner-header { + display: none; + } + + .header.is-pinned #gtoc > ul > li.pinner-header { + display: inline; + } + + #gtoc > ul > li.gtoc-picker-header { + display: none; + } } @media only screen and (max-width: 1024px) { @@ -815,6 +886,10 @@ kbd { #column2 { display: none; } + + #gtoc > ul > li.gtoc-picker-header { + display: inline; + } } .icon { diff --git a/doc/template.html b/doc/template.html index af064be8b22afa..63ca9d6a22a918 100644 --- a/doc/template.html +++ b/doc/template.html @@ -39,16 +39,23 @@

Node.js __VERSION__ documentation