SONAR-11380 Float docs page content and page-level ToC

6 files changed, 68 insertions, 76 deletions

diff --git a/server/sonar-docs/src/layouts/components/CategoryLink.js b/server/sonar-docs/src/layouts/components/CategoryLink.js
index fb65fc2f45c..aa3ef073347 100644
--- a/server/sonar-docs/src/layouts/components/CategoryLink.js
+++ b/server/sonar-docs/src/layouts/components/CategoryLink.js
@@ -37,8 +37,8 @@ export default class CategoryLink extends React.PureComponent {
   };
 
   render() {
-    const { node, location, headers, children, title, open } = this.props;
-    const prefix = '/' + process.env.GATSBY_DOCS_VERSION;
+    const { node, location, children, title, open } = this.props;
+    const prefix = process.env.GATSBY_DOCS_VERSION ? '/' + process.env.GATSBY_DOCS_VERSION : '';
     const url = node ? node.frontmatter.url || node.fields.slug : '';
     const isCurrentPage = location.pathname === prefix + url;
     return (
@@ -59,19 +59,13 @@ export default class CategoryLink extends React.PureComponent {
             {title}
           </a>
         )}
-        {isCurrentPage && <HeadingsLink headers={headers} />}
         {children &&
           open && (
             <div className="sub-menu">
               {children.map(page => {
                 const url = page.frontmatter.url || page.fields.slug;
                 return (
-                  <SubpageLink
-                    displayHeading={location.pathname === prefix + url}
-                    headers={headers}
-                    key={url}
-                    node={page}
-                  />
+                  <SubpageLink active={location.pathname === prefix + url} key={url} node={page} />
                 );
               })}
             </div>
diff --git a/server/sonar-docs/src/layouts/components/HeadingsLink.js b/server/sonar-docs/src/layouts/components/HeadingsLink.js
index a012a04a78f..4d16c0027f7 100644
--- a/server/sonar-docs/src/layouts/components/HeadingsLink.js
+++ b/server/sonar-docs/src/layouts/components/HeadingsLink.js
@@ -20,6 +20,9 @@
 import * as React from 'react';
 import HeadingAnchor from './HeadingAnchor';
 
+const MINIMUM_TOP_MARGIN = 80;
+const HEADER_SCROLL_MARGIN = 100;
+
 export default class HeadingsLink extends React.Component {
   skipScrollingHandler = false;
 
@@ -29,7 +32,8 @@ export default class HeadingsLink extends React.Component {
       activeIndex: -1,
       headers: props.headers.filter(
         h => h.depth === 2 && h.value.toLowerCase() !== 'table of contents'
-      )
+      ),
+      marginTop: MINIMUM_TOP_MARGIN
     };
   }
 
@@ -52,12 +56,18 @@ export default class HeadingsLink extends React.Component {
   highlightHeading = scrollTop => {
     let headingIndex = 0;
     for (let i = 0; i < this.state.headers.length; i++) {
-      if (document.querySelector('#header-' + (i + 1)).offsetTop > scrollTop + 200) {
+      if (
+        document.querySelector('#header-' + (i + 1)).offsetTop >
+        scrollTop + HEADER_SCROLL_MARGIN
+      ) {
         break;
       }
       headingIndex = i;
     }
-    this.setState({ activeIndex: headingIndex });
+    this.setState({
+      activeIndex: headingIndex,
+      marginTop: Math.max(MINIMUM_TOP_MARGIN, scrollTop)
+    });
     this.markH2(headingIndex + 1, false);
   };
 
@@ -72,8 +82,8 @@ export default class HeadingsLink extends React.Component {
       node.classList.add('targetted-heading');
       if (scrollTo) {
         this.skipScrollingHandler = true;
-        window.scrollTo(0, node.offsetTop - 200);
-        this.highlightHeading(node.offsetTop - 200);
+        window.scrollTo(0, node.offsetTop - HEADER_SCROLL_MARGIN);
+        this.highlightHeading(node.offsetTop - HEADER_SCROLL_MARGIN);
       }
     }
   };
@@ -94,12 +104,13 @@ export default class HeadingsLink extends React.Component {
 
   render() {
     const { headers } = this.state;
-    if (headers.length < 1) {
+    if (headers.length < 2) {
       return null;
     }
 
     return (
-      <div className="headings-container">
+      <div className="headings-container" style={{ marginTop: this.state.marginTop + 'px' }}>
+        <span>On this page</span>
         <ul>
           {headers.map((header, index) => {
             return (
diff --git a/server/sonar-docs/src/layouts/components/Sidebar.js b/server/sonar-docs/src/layouts/components/Sidebar.js
index 2bf6c893101..9bc0183f4e4 100644
--- a/server/sonar-docs/src/layouts/components/Sidebar.js
+++ b/server/sonar-docs/src/layouts/components/Sidebar.js
@@ -83,7 +83,6 @@ export default class Sidebar extends React.PureComponent {
           return (
             <CategoryLink
               children={item.children.map(child => this.getNodeFromUrl(child))}
-              headers={this.props.headers}
               key={item.title}
               location={this.props.location}
               onToggle={this.handleToggle}
@@ -96,12 +95,7 @@ export default class Sidebar extends React.PureComponent {
         }
       }
       return (
-        <CategoryLink
-          headers={this.props.headers}
-          key={item}
-          location={this.props.location}
-          node={this.getNodeFromUrl(item)}
-        />
+        <CategoryLink key={item} location={this.props.location} node={this.getNodeFromUrl(item)} />
       );
     });
     return <nav>{items}</nav>;
diff --git a/server/sonar-docs/src/layouts/components/SubpageLink.js b/server/sonar-docs/src/layouts/components/SubpageLink.js
index 163f6cd2dc2..c0027e3ed76 100644
--- a/server/sonar-docs/src/layouts/components/SubpageLink.js
+++ b/server/sonar-docs/src/layouts/components/SubpageLink.js
@@ -21,15 +21,12 @@ import * as React from 'react';
 import Link from 'gatsby-link';
 import HeadingsLink from './HeadingsLink';
 
-export default function SubpageLink({ node, headers, displayHeading }) {
+export default function SubpageLink({ node, active }) {
   return (
     <div>
-      <Link
-        className={displayHeading ? 'sub-menu-link active' : 'sub-menu-link'}
-        to={node.fields.slug}>
+      <Link className={active ? 'sub-menu-link active' : 'sub-menu-link'} to={node.fields.slug}>
         {node.frontmatter.title}
       </Link>
-      {displayHeading && <HeadingsLink headers={headers} />}
     </div>
   );
 }
diff --git a/server/sonar-docs/src/layouts/index.js b/server/sonar-docs/src/layouts/index.js
index eda9da54b0b..a65714c59c2 100644
--- a/server/sonar-docs/src/layouts/index.js
+++ b/server/sonar-docs/src/layouts/index.js
@@ -22,6 +22,7 @@ import React from 'react';
 import Sidebar from './components/Sidebar';
 import Footer from './components/Footer';
 import HeaderListProvider from './components/HeaderListProvider';
+import HeadingsLink from './components/HeadingsLink';
 
 const version = process.env.GATSBY_DOCS_VERSION || '1.0';
 
@@ -34,7 +35,6 @@ export default function Layout(props) {
           <div className="layout-page">
             <div className="page-sidebar-inner">
               <Sidebar
-                headers={headers}
                 location={props.location}
                 pages={props.data.allMarkdownRemark.edges
                   .map(e => e.node)
@@ -44,7 +44,10 @@ export default function Layout(props) {
               />
             </div>
             <div className="page-main">
-              <div className="page-container">{props.children()}</div>
+              <div className="page-container">
+                <HeadingsLink headers={headers} />
+                <div className="markdown-container">{props.children()}</div>
+              </div>
               <Footer />
             </div>
           </div>
diff --git a/server/sonar-docs/src/templates/page.css b/server/sonar-docs/src/templates/page.css
index 082e2963d9c..a3655abb617 100644
--- a/server/sonar-docs/src/templates/page.css
+++ b/server/sonar-docs/src/templates/page.css
@@ -151,12 +151,6 @@ body > div,
   z-index: 50;
 }
 
-@media only screen and (max-width: 1100px) {
-  .page-container {
-    max-width: 100% !important;
-  }
-}
-
 .search-container {
   position: relative;
 }
@@ -307,65 +301,64 @@ a.search-result .note {
   font-weight: 700;
 }
 
-.headings-container {
-  background: #e8eff4;
-  margin: 4px -20px 8px -36px;
-  padding: 4px 0;
+.page-container {
+  max-width: 900px;
+  min-width: 320px;
+  padding-left: 16px;
+  padding-right: 16px;
+  font-size: 15px;
+  flex-grow: 1;
+  margin: 0 auto;
 }
 
-.headings-container:before {
-  border-bottom: 5px solid #e8eff4;
-  border-left: 5px solid transparent;
-  border-right: 5px solid transparent;
-  content: '\A';
-  height: 0;
-  left: 50px;
-  margin-top: -8px;
-  position: absolute;
-  width: 0;
+.page-container .headings-container {
+  float: right;
+  width: 200px;
+  border-left: 1px solid #cfd3d7;
+  padding-left: 26px;
 }
 
-.headings-container ul {
-  margin: 0;
-  padding: 8px 6px 8px 18px;
+.page-container .headings-container span {
+  font-weight: 700;
 }
 
-.headings-container li {
-  color: #2679af;
-  list-style-position: inside;
-  list-style-type: circle;
-  margin: 0;
-  line-height: 16px;
-  padding: 4px 26px 4px 58px;
+.page-container .headings-container ul {
+  margin: 10px 0 0 0;
+  padding: 0;
 }
 
-.sub-menu .headings-container li {
-  padding-left: 38px;
+.page-container .headings-container li {
+  list-style: none;
+  margin: 0 0 8px;
+  line-height: 16px;
 }
 
-.headings-container a {
+.page-container .headings-container a {
+  color: rgba(0, 0, 0, 0.8);
   display: block;
-  margin-top: -15px;
   font-size: 13px;
   color: #2d3032;
   text-decoration: inherit;
-  margin-left: -4px;
-  padding-left: 20px;
+  border-bottom: none !important;
 }
 
-.headings-container a.active,
-.headings-container a:hover {
+.page-container .headings-container a.active,
+.page-container .headings-container a:hover {
   color: #2679af;
 }
 
-.page-container {
-  width: 900px;
-  max-width: calc(100% - 220px);
-  min-width: 320px;
-  padding-left: 16px;
-  padding-right: 16px;
-  font-size: 15px;
-  flex-grow: 1;
+.page-container .headings-container a.active {
+  font-weight: 700;
+}
+
+.markdown-container {
+  max-width: 680px;
+  margin: 0 auto;
+}
+
+.headings-container + .markdown-container {
+  max-width: 900px;
+  padding-right: 220px;
 }
 
 .page-container h1 {