From 64ef69fb3464ab815f507c94d944cd42fb378b75 Mon Sep 17 00:00:00 2001
From: Stefanie Fluin <sjtrimble@gmail.com>
Date: Mon, 24 Apr 2017 10:49:37 -0700
Subject: [PATCH] feat(aio): api page column layout

---
 aio/src/styles/1-layouts/_api-page.scss       | 35 ----------
 .../templates/includes/_annotations.html      |  8 +--
 .../templates/includes/_class-overview.html   | 70 +++++++++----------
 .../templates/includes/_constructor.html      | 28 ++++----
 .../templates/includes/_description.html      | 10 +--
 .../templates/includes/_export-as.html        | 16 ++---
 .../templates/includes/_how-to-use.html       | 12 ++--
 .../templates/includes/_inputs.html           | 20 +++---
 .../includes/_interface-overview.html         |  4 +-
 .../templates/includes/_members.html          | 30 ++++----
 .../templates/includes/_metadata.html         |  6 +-
 .../templates/includes/_outputs.html          | 14 ++--
 .../templates/includes/_selectors.html        | 20 +++---
 .../templates/includes/_statics.html          |  8 +--
 14 files changed, 101 insertions(+), 180 deletions(-)

diff --git a/aio/src/styles/1-layouts/_api-page.scss b/aio/src/styles/1-layouts/_api-page.scss
index ef3ee3d8f8..e0bf9cff60 100644
--- a/aio/src/styles/1-layouts/_api-page.scss
+++ b/aio/src/styles/1-layouts/_api-page.scss
@@ -1,42 +1,7 @@
 .api-section {
-    display: flex;
-    flex-direction: row;
-    vertical-align: top;
     position: relative;
-    margin-bottom: 32px;
-    padding: 8px 0 16px;
 
     pre {
         white-space: pre-line;
     }
-
-    &:after {
-        content:"";
-        display: block;
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        border-bottom: 1px solid $lightgray;
-        width: 100%;
-    }
-}
-
-.api-section-header {
-    width: 30%;
-    display: inline-block;
-    margin-right: 32px;
-
-    h2, p {
-        margin: 0;
-    }
-}
-
-.api-section-content {
-    width: 60%;
-    display: inline-block;
-
-    p {
-        margin: 0 0 8px 0;
-    }
 }
\ No newline at end of file
diff --git a/aio/tools/transforms/templates/includes/_annotations.html b/aio/tools/transforms/templates/includes/_annotations.html
index a8e4c7c57d..8f9b4c6317 100644
--- a/aio/tools/transforms/templates/includes/_annotations.html
+++ b/aio/tools/transforms/templates/includes/_annotations.html
@@ -1,15 +1,11 @@
 {%- if doc.decorators.length %}
-<section class="annotations api-section">
-  <div class="api-section-header">
+<div class="annotations api-section">
     <h2>Annotations</h2>
-  </div>
-  <div class="annotation api-section-content">
     {%- for decorator in doc.decorators %}
       <pre class="prettyprint no-bg">
         <code>@{$ decorator.name $}{$ params.paramList(decorator.arguments) | indent(10, false) $}</code>
       </pre>
       {%- if not decorator.notYetDocumented %}{$ decorator.description | marked $}{% endif %}
     {% endfor %}
-  </div>
-</section>
+</div>
 {% endif %}
diff --git a/aio/tools/transforms/templates/includes/_class-overview.html b/aio/tools/transforms/templates/includes/_class-overview.html
index f2a43a948f..63cefabda1 100644
--- a/aio/tools/transforms/templates/includes/_class-overview.html
+++ b/aio/tools/transforms/templates/includes/_class-overview.html
@@ -1,44 +1,40 @@
 <section class="class-overview api-section">
-  <div class="api-section-header">
-    <h2>Class Overview</h2>
-  </div>
-  <div class="api-section-content">
-    <div class="api-doc-code">
+  <h2>Class Overview</h2>
+  <div class="api-doc-code">
 
-      <code class="no-bg openParens">class {$ doc.name $} {</code>
+    <code class="no-bg openParens">class {$ doc.name $} {</code>
 
-      {% if doc.statics.length %}
-      <div class="statics">
-        {% for member in doc.statics %}{% if not member.internal %}
-          <pre class="prettyprint no-bg-with-indent"><code>static
-            <a class="code-anchor" href="#{$ member.name $}-anchor">{$ member.name | indent(6, false) | trim $}</a>
-            {$ params.paramList(member.parameters) | indent(8, false) | trim $}{$ params.returnType(member.returnType) $}
-          </code></pre>
-        {% endif %}{% endfor %}
-      </div>
-      {% endif %}
-
-
-      {% if doc.constructorDoc.name %}
-      <div class="constructor">
-        <pre class="prettyprint no-bg-with-indent"><code>
-          <a class="code-anchor" href="#constructor">{$ doc.constructorDoc.name $}</a>
-            {$ params.paramList(doc.constructorDoc.parameters) | indent(8, false) | trim $}
+    {% if doc.statics.length %}
+    <div class="statics">
+      {% for member in doc.statics %}{% if not member.internal %}
+        <pre class="prettyprint no-bg-with-indent"><code>static
+          <a class="code-anchor" href="#{$ member.name $}-anchor">{$ member.name | indent(6, false) | trim $}</a>
+          {$ params.paramList(member.parameters) | indent(8, false) | trim $}{$ params.returnType(member.returnType) $}
         </code></pre>
-      </div>
-      {% endif %}
-
-      {% if doc.members.length %}
-      <div class="members">
-        {% for member in doc.members %}{% if not member.internal %}
-          <pre class="prettyprint no-bg-with-indent"><code>
-            <a class="code-anchor" href="#{$ member.name $}-anchor">{$ member.name | indent(6, false) | trim $}</a>
-            {$ params.paramList(member.parameters) | indent(8, false) | trim $}{$ params.returnType(member.returnType) $}
-          </code></pre>
-        {% endif %}{% endfor %}
-      {% endif %}
-
-      <code class="endParens api-doc-code no-bg">}</code>
+      {% endif %}{% endfor %}
     </div>
+    {% endif %}
+
+
+    {% if doc.constructorDoc.name %}
+    <div class="constructor">
+      <pre class="prettyprint no-bg-with-indent"><code>
+        <a class="code-anchor" href="#constructor">{$ doc.constructorDoc.name $}</a>
+          {$ params.paramList(doc.constructorDoc.parameters) | indent(8, false) | trim $}
+      </code></pre>
+    </div>
+    {% endif %}
+
+    {% if doc.members.length %}
+    <div class="members">
+      {% for member in doc.members %}{% if not member.internal %}
+        <pre class="prettyprint no-bg-with-indent"><code>
+          <a class="code-anchor" href="#{$ member.name $}-anchor">{$ member.name | indent(6, false) | trim $}</a>
+          {$ params.paramList(member.parameters) | indent(8, false) | trim $}{$ params.returnType(member.returnType) $}
+        </code></pre>
+      {% endif %}{% endfor %}
+    {% endif %}
+
+    <code class="endParens api-doc-code no-bg">}</code>
   </div>
 </section>
\ No newline at end of file
diff --git a/aio/tools/transforms/templates/includes/_constructor.html b/aio/tools/transforms/templates/includes/_constructor.html
index 1f9b08bc0f..012dcdcb6f 100644
--- a/aio/tools/transforms/templates/includes/_constructor.html
+++ b/aio/tools/transforms/templates/includes/_constructor.html
@@ -1,18 +1,14 @@
 {%- if doc.constructorDoc and not doc.constructorDoc.internal %}
-<section class="constructor api-section">
-  <div class="api-section-header">
-    <h2>Constructor</h2>
-  </div>
-  <div class="description api-section-content">
-    <a name="constructor" class="anchor-offset"></a>
-    <pre class="prettyprint no-bg" ng-class="{ 'anchor-focused': appCtrl.isApiDocMemberFocused('{$ doc.constructorDoc.name $}') }">
-      <code>
-        {$ doc.constructorDoc.name $}{$ params.paramList(doc.constructorDoc.parameters) | indent(8, false) | trim $}
-      </code>
-    </pre>
-    {%- if not doc.constructorDoc.notYetDocumented %}
-    {$ doc.constructorDoc.description | replace('### Example', '') | replace('## Example', '') | replace('# Example', '') | trimBlankLines | marked $}
-    {% endif %}
-  </div>
-</section>
+<div class="constructor api-section">
+  <h2>Constructor</h2>
+  <a name="constructor" class="anchor-offset"></a>
+  <pre class="prettyprint no-bg" ng-class="{ 'anchor-focused': appCtrl.isApiDocMemberFocused('{$ doc.constructorDoc.name $}') }">
+    <code>
+      {$ doc.constructorDoc.name $}{$ params.paramList(doc.constructorDoc.parameters) | indent(8, false) | trim $}
+    </code>
+  </pre>
+  {%- if not doc.constructorDoc.notYetDocumented %}
+  {$ doc.constructorDoc.description | replace('### Example', '') | replace('## Example', '') | replace('# Example', '') | trimBlankLines | marked $}
+  {% endif %}
+</div>
 {% endif %}
diff --git a/aio/tools/transforms/templates/includes/_description.html b/aio/tools/transforms/templates/includes/_description.html
index c67bdad1e0..d42e1762c3 100644
--- a/aio/tools/transforms/templates/includes/_description.html
+++ b/aio/tools/transforms/templates/includes/_description.html
@@ -1,10 +1,6 @@
-<section class="api-section">
-  <div class="api-section-header">
-    <h2 class="text-display-1" id="api-description">Description<a href="#api-description" class="header-link"><i class="material-icons">link</i></a></h2>
-  </div>
-  <div class="api-section-content">
+<div class="api-section">
+  <h2 class="text-display-1" id="api-description">Description<a href="#api-description" class="header-link"><i class="material-icons">link</i></a></h2>
   {%- if doc.description.length > 2 %}
   {$ doc.description | trimBlankLines | marked $}
   {% endif %}
-  </div>
-</section>
+</div>
diff --git a/aio/tools/transforms/templates/includes/_export-as.html b/aio/tools/transforms/templates/includes/_export-as.html
index 702b1bae1b..23c0cf79fb 100644
--- a/aio/tools/transforms/templates/includes/_export-as.html
+++ b/aio/tools/transforms/templates/includes/_export-as.html
@@ -1,12 +1,8 @@
 {%- if doc.directiveOptions.exportAs %}
-<section class="export-as api-section">
-  <div class="api-section-header">
-    <h2>Exported as</h2>
-  </div>
-  <div class="api-section-content">
-    <p>
-      <code>{$ doc.directiveOptions.exportAs $}</code>
-    </p>
-  </div>
-</section>
+<div class="export-as api-section">
+  <h2>Exported as</h2>
+  <p>
+    <code>{$ doc.directiveOptions.exportAs $}</code>
+  </p>
+</div>
 {% endif %}
diff --git a/aio/tools/transforms/templates/includes/_how-to-use.html b/aio/tools/transforms/templates/includes/_how-to-use.html
index 45bea41235..a861e27a49 100644
--- a/aio/tools/transforms/templates/includes/_how-to-use.html
+++ b/aio/tools/transforms/templates/includes/_how-to-use.html
@@ -1,11 +1,7 @@
 {%- if doc.howToUse %}
   <!-- QUICK REFERENCE CODE EXAMPLE -->
-  <section class="how-to-use api-section">
-    <div class="api-section-header">
-      <h2>How To Use</h2>
-    </div>
-    <div class="api-section-content">
-      {$ doc.howToUse | marked $}
-    </div>
-  </section>
+  <div class="how-to-use api-section">
+    <h2>How To Use</h2>
+    {$ doc.howToUse | marked $}
+  </div>
 {% endif %}
diff --git a/aio/tools/transforms/templates/includes/_inputs.html b/aio/tools/transforms/templates/includes/_inputs.html
index 23bcfda2e3..85f9aef3ea 100644
--- a/aio/tools/transforms/templates/includes/_inputs.html
+++ b/aio/tools/transforms/templates/includes/_inputs.html
@@ -1,15 +1,11 @@
 {% if doc.inputs %}
-<section class="inputs api-section">
-  <div class="api-section-header">
-    <h2>Inputs</h2>
+<div class="inputs api-section">
+  <h2>Inputs</h2>
+  {% for binding, property in doc.inputs %}
+  <div class="input">
+    <code>{$ property.bindingName $}</code>&nbsp;bound to&nbsp;<code>{$ property.memberDoc.classDoc.name $}.{$ property.propertyName $}</code>
+    {$ property.memberDoc.description | trimBlankLines | marked $}
   </div>
-  <div class="api-section-content">
-    {% for binding, property in doc.inputs %}
-    <div class="input">
-      <code>{$ property.bindingName $}</code>&nbsp;bound to&nbsp;<code>{$ property.memberDoc.classDoc.name $}.{$ property.propertyName $}</code>
-      {$ property.memberDoc.description | trimBlankLines | marked $}
-    </div>
-    {% endfor %}
-  </div>
-</section>
+  {% endfor %}
+</div>
 {% endif %}
diff --git a/aio/tools/transforms/templates/includes/_interface-overview.html b/aio/tools/transforms/templates/includes/_interface-overview.html
index 2c91bbda36..27866ffad3 100644
--- a/aio/tools/transforms/templates/includes/_interface-overview.html
+++ b/aio/tools/transforms/templates/includes/_interface-overview.html
@@ -1,4 +1,4 @@
-<section class="class-overview">
+<div class="class-overview">
   <h2>Interface Overview</h2>
   <div class="api-doc-code">
 
@@ -16,4 +16,4 @@
 
     <code class="endParens api-doc-code no-bg">}</code>
   </div>
-</section>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/aio/tools/transforms/templates/includes/_members.html b/aio/tools/transforms/templates/includes/_members.html
index 3dda7e36e9..22ca9c031a 100644
--- a/aio/tools/transforms/templates/includes/_members.html
+++ b/aio/tools/transforms/templates/includes/_members.html
@@ -1,21 +1,17 @@
 {% if doc.members.length %}
-<section class="instance-members api-section">
-  <div class="api-section-header">
-    <h2>Class Details</h2>
+<div class="instance-members api-section">
+  <h2>Class Details</h2>
+  {% for member in doc.members %}{% if not member.internal %}
+  <div class="instance-member">
+    <a name="{$ member.name $}-anchor" class="anchor-offset"></a>
+    <pre class="prettyprint no-bg" ng-class="{ 'anchor-focused': appCtrl.isApiDocMemberFocused('{$ member.name $}') }">
+    <code>{$ member.name $}{$ params.paramList(member.parameters) | trim $}{$ params.returnType(member.returnType) $}</code>
+    </pre>
+    {%- if not member.notYetDocumented %}
+    {$ member.description | replace('### Example', '') | replace('## Example', '') | replace('# Example', '') | trimBlankLines | marked $}
+    {% endif -%}
   </div>
-  <div class="description api-section-content">
-    {% for member in doc.members %}{% if not member.internal %}
-    <div class="instance-member">
-      <a name="{$ member.name $}-anchor" class="anchor-offset"></a>
-      <pre class="prettyprint no-bg" ng-class="{ 'anchor-focused': appCtrl.isApiDocMemberFocused('{$ member.name $}') }">
-      <code>{$ member.name $}{$ params.paramList(member.parameters) | trim $}{$ params.returnType(member.returnType) $}</code>
-      </pre>
-      {%- if not member.notYetDocumented %}
-      {$ member.description | replace('### Example', '') | replace('## Example', '') | replace('# Example', '') | trimBlankLines | marked $}
-      {% endif -%}
-    </div>
-    {% if not loop.last %}<hr class="hr-margin">{% endif %}
+  {% if not loop.last %}<hr class="hr-margin">{% endif %}
   {% endif %}{% endfor %}
-  </div>
-</section>
+</div>
 {% endif %}
diff --git a/aio/tools/transforms/templates/includes/_metadata.html b/aio/tools/transforms/templates/includes/_metadata.html
index 5bca45a8e7..d3d1a09e24 100644
--- a/aio/tools/transforms/templates/includes/_metadata.html
+++ b/aio/tools/transforms/templates/includes/_metadata.html
@@ -1,7 +1,6 @@
 {% if doc.members.length %}
-<section class="meta-data">
+<div class="meta-data">
   <h2>Metadata Properties</h2>
-  <div class="description">
     {% for metadata in doc.members %}{% if not metadata.internal %}
     <div class="metadata-member">
       <a name="{$ metadata.name $}-anchor" class="anchor-offset"></a>
@@ -12,6 +11,5 @@
     </div>
     {% if not loop.last %}<hr class="hr-margin">{% endif %}
   {% endif %}{% endfor %}
-  </div>
-</section>
+</div>
 {% endif %}
diff --git a/aio/tools/transforms/templates/includes/_outputs.html b/aio/tools/transforms/templates/includes/_outputs.html
index a1b313a9d4..74aa43a23f 100644
--- a/aio/tools/transforms/templates/includes/_outputs.html
+++ b/aio/tools/transforms/templates/includes/_outputs.html
@@ -1,13 +1,11 @@
 {% if doc.outputs %}
-<section class="outputs">
+<div class="outputs">
   <h2>Outputs</h2>
-  <div class="description">
   {% for binding, property in doc.outputs %}
-    <div class="output">
-      <code>{$ property.bindingName $}</code>&nbsp;bound to&nbsp;<code>{$ property.memberDoc.classDoc.name $}.{$ property.propertyName $}</code>
-      {$ property.memberDoc.description | trimBlankLines | marked $}
-    </div>
-  {% endfor %}
+  <div class="output">
+    <code>{$ property.bindingName $}</code>&nbsp;bound to&nbsp;<code>{$ property.memberDoc.classDoc.name $}.{$ property.propertyName $}</code>
+    {$ property.memberDoc.description | trimBlankLines | marked $}
   </div>
-</section>
+  {% endfor %}
+</div>
 {% endif %}
diff --git a/aio/tools/transforms/templates/includes/_selectors.html b/aio/tools/transforms/templates/includes/_selectors.html
index 4b8ce6ee90..9c82dbdd2a 100644
--- a/aio/tools/transforms/templates/includes/_selectors.html
+++ b/aio/tools/transforms/templates/includes/_selectors.html
@@ -1,14 +1,10 @@
 {%- if doc.directiveOptions.selector.split(',').length %}
-<section class="selectors api-section">
-  <div class="api-section-header">
-    <h2>Selectors</h2>
-  </div>
-  <div class="api-section-content">
-    {% for selector in doc.directiveOptions.selector.split(',') %}
-    <p class="selector">
-      <code>{$ selector $}</code>
-    </p>
-    {% endfor %}
-  </div>
-</section>
+<div class="selectors api-section">
+  <h2>Selectors</h2>
+  {% for selector in doc.directiveOptions.selector.split(',') %}
+  <p class="selector">
+    <code>{$ selector $}</code>
+  </p>
+  {% endfor %}
+</div>
 {% endif %}
diff --git a/aio/tools/transforms/templates/includes/_statics.html b/aio/tools/transforms/templates/includes/_statics.html
index e3f0cfd626..00929c4c30 100644
--- a/aio/tools/transforms/templates/includes/_statics.html
+++ b/aio/tools/transforms/templates/includes/_statics.html
@@ -1,9 +1,6 @@
 {% if doc.statics.length %}
-<section class="static-members api-section">
-  <div class="api-section-header">
+<div class="static-members api-section">
     <h2>Static Members</h2>
-  </div>
-  <div class="api-section-content">
   {% for member in doc.statics %}{% if not member.internal %}
     <div class="static-member">
       <a name="{$ member.name $}-anchor" class="anchor-offset"></a>
@@ -20,6 +17,5 @@
     {% endif %}
 
   {% endif %}{% endfor %}
-  </div>
-</section>
+</div>
 {% endif %}