From cf034f759ad6af8d3befcb7e69cf0ab87fff92ad Mon Sep 17 00:00:00 2001
From: Stefanie Fluin <sjtrimble@gmail.com>
Date: Thu, 20 Apr 2017 12:20:27 -0700
Subject: [PATCH] feat(aio): api page styles

Changed description from h3 to h2 to match the other header
Created api page classes for consistent styling
Add styles for info-bar section
Wrapped pre tags for code not to go off of screen
---
 aio/src/styles/1-layouts/_api-page.scss       | 42 ++++++++++++
 aio/src/styles/1-layouts/_layouts-dir.scss    |  3 +-
 aio/src/styles/2-modules/_api-info-bar.scss   |  5 ++
 aio/src/styles/2-modules/_modules-dir.scss    |  3 +-
 .../transforms/templates/class.template.html  |  2 +
 .../templates/includes/_annotations.html      |  8 ++-
 .../templates/includes/_class-overview.html   | 66 ++++++++++---------
 .../templates/includes/_constructor.html      |  8 ++-
 .../templates/includes/_description.html      | 11 ++--
 .../templates/includes/_export-as.html        |  8 ++-
 .../templates/includes/_how-to-use.html       |  8 ++-
 .../templates/includes/_info-bar.html         |  2 -
 .../templates/includes/_inputs.html           |  8 ++-
 .../templates/includes/_members.html          |  8 ++-
 .../templates/includes/_selectors.html        |  8 ++-
 .../templates/includes/_statics.html          |  8 ++-
 .../transforms/templates/includes/_title.html |  2 +-
 17 files changed, 135 insertions(+), 65 deletions(-)
 create mode 100644 aio/src/styles/1-layouts/_api-page.scss
 create mode 100644 aio/src/styles/2-modules/_api-info-bar.scss

diff --git a/aio/src/styles/1-layouts/_api-page.scss b/aio/src/styles/1-layouts/_api-page.scss
new file mode 100644
index 0000000000..ef3ee3d8f8
--- /dev/null
+++ b/aio/src/styles/1-layouts/_api-page.scss
@@ -0,0 +1,42 @@
+.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/src/styles/1-layouts/_layouts-dir.scss b/aio/src/styles/1-layouts/_layouts-dir.scss
index d11bc0fe0f..730a82fef5 100644
--- a/aio/src/styles/1-layouts/_layouts-dir.scss
+++ b/aio/src/styles/1-layouts/_layouts-dir.scss
@@ -9,4 +9,5 @@
 @import 'marketing-layout';
 @import 'footer';
 @import 'layout-global';
-@import 'not-found';
\ No newline at end of file
+@import 'not-found';
+@import 'api-page';
\ No newline at end of file
diff --git a/aio/src/styles/2-modules/_api-info-bar.scss b/aio/src/styles/2-modules/_api-info-bar.scss
new file mode 100644
index 0000000000..6f10e65fc5
--- /dev/null
+++ b/aio/src/styles/2-modules/_api-info-bar.scss
@@ -0,0 +1,5 @@
+.info-bar {
+    padding: 32px;
+    border-radius: 4px;
+    background-color: rgba($blue, 0.1);
+}
\ No newline at end of file
diff --git a/aio/src/styles/2-modules/_modules-dir.scss b/aio/src/styles/2-modules/_modules-dir.scss
index 04779aab5e..b2fd9a382a 100644
--- a/aio/src/styles/2-modules/_modules-dir.scss
+++ b/aio/src/styles/2-modules/_modules-dir.scss
@@ -24,4 +24,5 @@
    @import 'callout';
    @import 'resources';
    @import 'edit-page-cta';
-   @import 'heading-anchors';
\ No newline at end of file
+   @import 'heading-anchors';
+   @import 'api-info-bar';
\ No newline at end of file
diff --git a/aio/tools/transforms/templates/class.template.html b/aio/tools/transforms/templates/class.template.html
index 307823df42..6129e97692 100644
--- a/aio/tools/transforms/templates/class.template.html
+++ b/aio/tools/transforms/templates/class.template.html
@@ -2,6 +2,7 @@
 {% extends 'layout/api-base.template.html' -%}
 
 {% block details %}
+<div class="api-container">
   {% include "includes/_class-overview.html" %}
   {% block additional %}{% endblock %}
   {% include "includes/_description.html" %}
@@ -9,4 +10,5 @@
   {% include "includes/_constructor.html" %}
   {% include "includes/_statics.html" %}
   {% include "includes/_members.html" %}
+</div>
 {% endblock %}
diff --git a/aio/tools/transforms/templates/includes/_annotations.html b/aio/tools/transforms/templates/includes/_annotations.html
index 769fbf71c7..a8e4c7c57d 100644
--- a/aio/tools/transforms/templates/includes/_annotations.html
+++ b/aio/tools/transforms/templates/includes/_annotations.html
@@ -1,7 +1,9 @@
 {%- if doc.decorators.length %}
-<section class="annotations">
-  <h2>Annotations</h2>
-  <div class="annotation">
+<section class="annotations api-section">
+  <div class="api-section-header">
+    <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>
diff --git a/aio/tools/transforms/templates/includes/_class-overview.html b/aio/tools/transforms/templates/includes/_class-overview.html
index 3aa26f7c23..f2a43a948f 100644
--- a/aio/tools/transforms/templates/includes/_class-overview.html
+++ b/aio/tools/transforms/templates/includes/_class-overview.html
@@ -1,40 +1,44 @@
-<section class="class-overview">
-  <h2>Class Overview</h2>
-  <div class="api-doc-code">
+<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">
 
-    <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.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 $}
-      </code></pre>
-    </div>
-    {% endif %}
-
-    {% if doc.members.length %}
-    <div class="members">
-      {% for member in doc.members %}{% if not member.internal %}
+      {% if doc.constructorDoc.name %}
+      <div class="constructor">
         <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) $}
+          <a class="code-anchor" href="#constructor">{$ doc.constructorDoc.name $}</a>
+            {$ params.paramList(doc.constructorDoc.parameters) | indent(8, false) | trim $}
         </code></pre>
-      {% endif %}{% endfor %}
-    {% endif %}
+      </div>
+      {% endif %}
 
-    <code class="endParens api-doc-code no-bg">}</code>
+      {% 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>
   </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 b0b57209dd..1f9b08bc0f 100644
--- a/aio/tools/transforms/templates/includes/_constructor.html
+++ b/aio/tools/transforms/templates/includes/_constructor.html
@@ -1,7 +1,9 @@
 {%- if doc.constructorDoc and not doc.constructorDoc.internal %}
-<section class="constructor">
-  <h2>Constructor</h2>
-  <div class="description">
+<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>
diff --git a/aio/tools/transforms/templates/includes/_description.html b/aio/tools/transforms/templates/includes/_description.html
index 627b93df2c..c67bdad1e0 100644
--- a/aio/tools/transforms/templates/includes/_description.html
+++ b/aio/tools/transforms/templates/includes/_description.html
@@ -1,9 +1,10 @@
-<section class="l-content-block">
-  <h3 class="text-display-1" id="api-description">
-    Description
-    <a href="#api-description" class="header-link"><i class="material-icons">link</i></a>
-  </h3>
+<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">
   {%- if doc.description.length > 2 %}
   {$ doc.description | trimBlankLines | marked $}
   {% endif %}
+  </div>
 </section>
diff --git a/aio/tools/transforms/templates/includes/_export-as.html b/aio/tools/transforms/templates/includes/_export-as.html
index de0796f098..702b1bae1b 100644
--- a/aio/tools/transforms/templates/includes/_export-as.html
+++ b/aio/tools/transforms/templates/includes/_export-as.html
@@ -1,7 +1,9 @@
 {%- if doc.directiveOptions.exportAs %}
-<section class="export-as">
-  <h2>Exported as</h2>
-  <div class="description">
+<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>
diff --git a/aio/tools/transforms/templates/includes/_how-to-use.html b/aio/tools/transforms/templates/includes/_how-to-use.html
index b244ce60e1..45bea41235 100644
--- a/aio/tools/transforms/templates/includes/_how-to-use.html
+++ b/aio/tools/transforms/templates/includes/_how-to-use.html
@@ -1,8 +1,10 @@
 {%- if doc.howToUse %}
   <!-- QUICK REFERENCE CODE EXAMPLE -->
-  <section class="how-to-use">
-    <h2>How To Use</h2>
-    <div class="description">
+  <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>
diff --git a/aio/tools/transforms/templates/includes/_info-bar.html b/aio/tools/transforms/templates/includes/_info-bar.html
index 522773a183..46f996020f 100644
--- a/aio/tools/transforms/templates/includes/_info-bar.html
+++ b/aio/tools/transforms/templates/includes/_info-bar.html
@@ -13,6 +13,4 @@
   <span class="info-bar-item is-right">
     {$ github.githubViewLink(doc, versionInfo) $}
   </span>
-
-  <i class="material-icons l-right">create</i>
 </div>
\ No newline at end of file
diff --git a/aio/tools/transforms/templates/includes/_inputs.html b/aio/tools/transforms/templates/includes/_inputs.html
index d923f34f92..23bcfda2e3 100644
--- a/aio/tools/transforms/templates/includes/_inputs.html
+++ b/aio/tools/transforms/templates/includes/_inputs.html
@@ -1,7 +1,9 @@
 {% if doc.inputs %}
-<section class="inputs">
-  <h2>Inputs</h2>
-  <div class="description">
+<section class="inputs api-section">
+  <div class="api-section-header">
+    <h2>Inputs</h2>
+  </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>
diff --git a/aio/tools/transforms/templates/includes/_members.html b/aio/tools/transforms/templates/includes/_members.html
index 1c0bb8b988..3dda7e36e9 100644
--- a/aio/tools/transforms/templates/includes/_members.html
+++ b/aio/tools/transforms/templates/includes/_members.html
@@ -1,7 +1,9 @@
 {% if doc.members.length %}
-<section class="instance-members">
-  <h2>Class Details</h2>
-  <div class="description">
+<section class="instance-members api-section">
+  <div class="api-section-header">
+    <h2>Class Details</h2>
+  </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>
diff --git a/aio/tools/transforms/templates/includes/_selectors.html b/aio/tools/transforms/templates/includes/_selectors.html
index fbdab157a6..4b8ce6ee90 100644
--- a/aio/tools/transforms/templates/includes/_selectors.html
+++ b/aio/tools/transforms/templates/includes/_selectors.html
@@ -1,7 +1,9 @@
 {%- if doc.directiveOptions.selector.split(',').length %}
-<section class="selectors">
-  <h2>Selectors</h2>
-  <div class="description">
+<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>
diff --git a/aio/tools/transforms/templates/includes/_statics.html b/aio/tools/transforms/templates/includes/_statics.html
index d8ded2cec7..e3f0cfd626 100644
--- a/aio/tools/transforms/templates/includes/_statics.html
+++ b/aio/tools/transforms/templates/includes/_statics.html
@@ -1,7 +1,9 @@
 {% if doc.statics.length %}
-<section class="static-members">
-  <h2>Static Members</h2>
-  <div class="description">
+<section class="static-members api-section">
+  <div class="api-section-header">
+    <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>
diff --git a/aio/tools/transforms/templates/includes/_title.html b/aio/tools/transforms/templates/includes/_title.html
index 0057c04114..cc5d051005 100644
--- a/aio/tools/transforms/templates/includes/_title.html
+++ b/aio/tools/transforms/templates/includes/_title.html
@@ -1,5 +1,5 @@
 <!-- PAGE HERO -->
-<header>
+<header class="api-header">
   <h1>{$ doc.name $}</h1>
   <h2>{$ doc.docType $}</h2>
   <span class="version">{$ angular.version $}</span>