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

doc: style fixes for the TOC

Browse Source 
- Hide the scrollbar on the TOC on all browsers. It was never the
  intention for it to be visible with the scroll indication in place.
  A wrapper element with 20px padding was added to accommodate for
  hopefully all scrollbar widths as well as to avoid overflowing
  content.
- Fixed the scroll indication gradient on Safari, which was caused by
  the wrong from-color, which now matches the to-color.
- Fixed a issue in old IE where the TOC didn't render on the correct
  position through setting `left: 0` and `top: 0` on it.

PR-URL: https://github.com/nodejs/node/pull/4748
Reviewed-By: James M Snell <jasnell@gmail.com>
This commit is contained in:
Roman Reiss 2016-01-18 20:21:56 +01:00
parent c00d08f5ec
commit 55607a0f32
2 changed files with 19 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
doc/api_assets/style.css
View File

@ -370,18 +370,27 @@ span.type {
width: 234px; width: 234px;
background: #333; background: #333;
position: fixed; position: fixed;
left: 0;
top: 0;
height: 100%; height: 100%;
overflow-y: scroll; overflow: hidden;
} }
#column2.interior:after { #column2 .no-scrollbar {
overflow-y: scroll;
height: 100%;
width: 100%;
padding-right: 20px;
}
#column2 .no-scrollbar:after {
content: ''; content: '';
position: fixed; position: fixed;
bottom: 0; bottom: 0;
left: 0; left: 0;
width: 234px; width: 234px;
height: 4em; height: 4em;
background: linear-gradient(rgba(242,245,240, 0), rgba(51, 51, 51, 1)); background: linear-gradient(rgba(51, 51, 51, 0), rgba(51, 51, 51, 1));
pointer-events: none; pointer-events: none;
} }

12
doc/template.html
View File

@ -11,12 +11,14 @@
<body class="alt apidoc" id="api-section-__FILENAME__"> <body class="alt apidoc" id="api-section-__FILENAME__">
<div id="content" class="clearfix"> <div id="content" class="clearfix">
<div id="column2" class="interior"> <div id="column2" class="interior">
<div id="intro" class="interior"> <div class="no-scrollbar">
<a href="/" title="Go back to the home page"> <div id="intro" class="interior">
Node.js (1) <a href="/" title="Go back to the home page">
</a> Node.js (1)
</a>
</div>
__GTOC__
</div> </div>
__GTOC__
</div> </div>
<div id="column1" data-id="__ID__" class="interior"> <div id="column1" data-id="__ID__" class="interior">