From 83b32a0a0aa8452e410e7b3154d974e026f8847f Mon Sep 17 00:00:00 2001
From: Pete Bacon Darwin <pete@bacondarwin.com>
Date: Mon, 26 Feb 2018 11:34:57 +0000
Subject: [PATCH] build(aio): render heading anchors on the right

This approach simplifies the styling needed considerably.
Previously, we had to make room on the left for heading that
are in visual containers. Also we had to apply a `float:right`
when on narrow screens as the gutter not available then.
This float didn't render nicely if the heading text was longer
than could be rendered on a single line.

Closes #22131
---
 .../styles/2-modules/_heading-anchors.scss    | 36 ++-----------------
 .../post-processors/autolink-headings.js      |  2 +-
 .../post-processors/autolink-headings.spec.js |  6 ++--
 .../templates/api/base.template.html          |  4 +--
 4 files changed, 8 insertions(+), 40 deletions(-)

diff --git a/aio/src/styles/2-modules/_heading-anchors.scss b/aio/src/styles/2-modules/_heading-anchors.scss
index 704691c6e2..e3a169fae4 100644
--- a/aio/src/styles/2-modules/_heading-anchors.scss
+++ b/aio/src/styles/2-modules/_heading-anchors.scss
@@ -1,48 +1,18 @@
 .sidenav-content {
   h1, h2, h3, h4, h5, h6 {
 
-    &.no-anchor .header-link {
-      display: none;
-    }
-
     .header-link {
-      box-sizing: border-box;
       color: $mediumgray;
-      display: inline-block;
-      margin-left: -42px;
-      padding: 0 8px;
+      margin-left: 8px;
       text-decoration: none;
       user-select: none;
-      vertical-align: middle;
       visibility: hidden;
-      width: 40px;
-
-      @media (max-width: 600px) {
-        float: right;
-        margin-left: 0;
-      }
+      display: inline-block;
+      vertical-align: text-top;
     }
 
     &:hover .header-link {
       visibility: visible;
     }
   }
-
-  .l-sub-section {
-    h1, h2, h3, h4, h5, h6 {
-      a {
-        padding-right: 64px;
-        margin-left: -74px;
-      }
-    }
-  }
-
-  .alert {
-    h1, h2, h3, h4, h5, h6 {
-      a {
-        padding-right: 80px;
-        margin-left: -90px;
-      }
-    }
-  }
 }
diff --git a/aio/tools/transforms/angular-base-package/post-processors/autolink-headings.js b/aio/tools/transforms/angular-base-package/post-processors/autolink-headings.js
index 7daa72623e..27e1117cc2 100644
--- a/aio/tools/transforms/angular-base-package/post-processors/autolink-headings.js
+++ b/aio/tools/transforms/angular-base-package/post-processors/autolink-headings.js
@@ -20,7 +20,7 @@ const hasClass = (node, cls) => {
 const link = options =>
   tree => visit(tree, node => {
     if (is(node, HEADINGS) && has(node, 'id') && !hasClass(node, NO_ANCHOR_CLASS)) {
-      node.children.unshift({
+      node.children.push({
         type: 'element',
         tagName: 'a',
         properties: Object.assign(clone(options.properties), {href: `#${node.properties.id}`}),
diff --git a/aio/tools/transforms/angular-base-package/post-processors/autolink-headings.spec.js b/aio/tools/transforms/angular-base-package/post-processors/autolink-headings.spec.js
index 05ac0a8dc5..4b22faae43 100644
--- a/aio/tools/transforms/angular-base-package/post-processors/autolink-headings.spec.js
+++ b/aio/tools/transforms/angular-base-package/post-processors/autolink-headings.spec.js
@@ -20,9 +20,9 @@ describe('autolink-headings postprocessor', () => {
       <h3>Heading with encoded chars &#x26;</h3>
     `;
     const processedContent = `
-      <h1 id="heading-1"><a title="Link to this heading" class="header-link" aria-hidden="true" href="#heading-1"><i class="material-icons">link</i></a>Heading 1</h1>
-      <h2 id="heading-with-bold"><a title="Link to this heading" class="header-link" aria-hidden="true" href="#heading-with-bold"><i class="material-icons">link</i></a>Heading with <strong>bold</strong></h2>
-      <h3 id="heading-with-encoded-chars-"><a title="Link to this heading" class="header-link" aria-hidden="true" href="#heading-with-encoded-chars-"><i class="material-icons">link</i></a>Heading with encoded chars &#x26;</h3>
+      <h1 id="heading-1">Heading 1<a title="Link to this heading" class="header-link" aria-hidden="true" href="#heading-1"><i class="material-icons">link</i></a></h1>
+      <h2 id="heading-with-bold">Heading with <strong>bold</strong><a title="Link to this heading" class="header-link" aria-hidden="true" href="#heading-with-bold"><i class="material-icons">link</i></a></h2>
+      <h3 id="heading-with-encoded-chars-">Heading with encoded chars &#x26;<a title="Link to this heading" class="header-link" aria-hidden="true" href="#heading-with-encoded-chars-"><i class="material-icons">link</i></a></h3>
     `;
 
     const docs = [{docType: 'a', renderedContent: originalContent}];
diff --git a/aio/tools/transforms/templates/api/base.template.html b/aio/tools/transforms/templates/api/base.template.html
index df0c1279bd..14f2edfaf7 100644
--- a/aio/tools/transforms/templates/api/base.template.html
+++ b/aio/tools/transforms/templates/api/base.template.html
@@ -30,9 +30,7 @@
     {% if doc.experimental !== undefined %}<label class="api-status-label experimental">experimental</label>{% endif %}
     {% if doc.stable !== undefined %}<label class="api-status-label stable">stable</label>{% endif %}
     <label class="api-type-label {$ doc.docType $}">{$ doc.docType $}</label>
-    <h1>
-      {$ doc.name $}
-    </h1>
+    <h1>{$ doc.name $}</h1>
     <span class="version">{$ version $}</span>
   </header>
   <div class="page-actions">