doc: style fixes for the TOC

- 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: nodejs#4748 Reviewed-By: James M Snell <[email protected]>
MylesBorins · Feb 11, 2016 · ae15235 · ae15235
1 parent 4f2f140
commit ae15235
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 7 deletions.
diff --git a/doc/api_assets/style.css b/doc/api_assets/style.css
@@ -370,18 +370,27 @@ span.type {
   width: 234px;
   background: #333;
   position: fixed;
+  left: 0;
+  top: 0;
   height: 100%;
+  overflow: hidden;
+}
+
+#column2 .no-scrollbar {
   overflow-y: scroll;
+  height: 100%;
+  width: 100%;
+  padding-right: 20px;
 }
 
-#column2.interior:after {
+#column2 .no-scrollbar:after {
   content: '';
   position: fixed;
   bottom: 0;
   left: 0;
   width: 234px;
   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;
 }
 

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