1berry/nodejs
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

doc: fix arrow vertical alignment in HTML version

Browse Source 
This commit fixes the alignment of the bullet points (green arrow) under
'Node.js <version> documentation' by drawing a triangle in CSS instead
of using an ASCII char.

PR-URL: https://github.com/nodejs/node/pull/52193
Reviewed-By: Antoine du Hamel <duhamelantoine1995@gmail.com>
Reviewed-By: Luigi Pinca <luigipinca@gmail.com>
Reviewed-By: Moshe Atlow <moshe@atlow.co.il>
This commit is contained in:
Akash Yeole 2024-03-28 05:05:22 +05:30 committed by GitHub
parent 4d8602046e
commit 27493a1dd7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 25 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
doc/api_assets/style.css
View File

@ -182,27 +182,32 @@ li.picker-header {
position: relative; position: relative;
} }
li.picker-header .collapsed-arrow, li.picker-header .expanded-arrow { li.picker-header .picker-arrow {
width: 1.5ch;
height: 1.5em;
}
li.picker-header .collapsed-arrow {
display: inline-block; display: inline-block;
width: .6rem;
height: .6rem;
border-top: .3rem solid transparent;
border-bottom: .3rem solid transparent;
border-left: .6rem solid var(--color-links);
border-right: none;
margin: 0 .2rem .05rem 0;
} }
li.picker-header .expanded-arrow { li.picker-header a:focus .picker-arrow,
display: none; li.picker-header a:active .picker-arrow,
li.picker-header a:hover .picker-arrow {
border-left: .6rem solid var(--white);
} }
li.picker-header.expanded .collapsed-arrow, li.picker-header.expanded a:focus .picker-arrow,
:root:not(.has-js) li.picker-header:hover .collapsed-arrow { li.picker-header.expanded a:active .picker-arrow,
display: none; li.picker-header.expanded a:hover .picker-arrow,
} :root:not(.has-js) li.picker-header:hover .picker-arrow {
border-top: .6rem solid var(--white);
li.picker-header.expanded .expanded-arrow, border-bottom: none;
:root:not(.has-js) li.picker-header:hover .expanded-arrow { border-left: .35rem solid transparent;
display: inline-block; border-right: .35rem solid transparent;
margin-bottom: 0;
} }
li.picker-header.expanded > a, li.picker-header.expanded > a,

2
doc/template.html
View File

@ -60,7 +60,7 @@
__ALTDOCS__ __ALTDOCS__
<li class="picker-header"> <li class="picker-header">
<a href="#"> <a href="#">
<span class="collapsed-arrow">&#x25ba;</span><span class="expanded-arrow">&#x25bc;</span> <span class="picker-arrow"></span>
Options Options
</a> </a>

6
tools/doc/html.mjs
View File

@ -528,7 +528,7 @@ function altDocs(filename, docCreated, versions) {
return list ? ` return list ? `
<li class="picker-header"> <li class="picker-header">
<a href="#"> <a href="#">
<span class="collapsed-arrow">&#x25ba;</span><span class="expanded-arrow">&#x25bc;</span> <span class="picker-arrow"></span>
Other versions Other versions
</a> </a>
<div class="picker"><ol id="alt-docs">${list}</ol></div> <div class="picker"><ol id="alt-docs">${list}</ol></div>
@ -558,7 +558,7 @@ function gtocPicker(id) {
return ` return `
<li class="picker-header"> <li class="picker-header">
<a href="#"> <a href="#">
<span class="collapsed-arrow">&#x25ba;</span><span class="expanded-arrow">&#x25bc;</span> <span class="picker-arrow"></span>
Index Index
</a> </a>
@ -575,7 +575,7 @@ function tocPicker(id, content) {
return ` return `
<li class="picker-header"> <li class="picker-header">
<a href="#"> <a href="#">
<span class="collapsed-arrow">&#x25ba;</span><span class="expanded-arrow">&#x25bc;</span> <span class="picker-arrow"></span>
Table of contents Table of contents
</a> </a>