From bb52e22ecfb70cf979bddd0f8fecff66e2709a60 Mon Sep 17 00:00:00 2001
From: Stefanie Fluin <sjtrimble@gmail.com>
Date: Tue, 25 Apr 2017 09:33:09 -0700
Subject: [PATCH] feat(aio): api pages styling

- Banner class code consolidation for API pages
- Set up temporary table of contents class and file
- API pages title styling
- Add color styling to doc-type listed on each API details page
- Classes and SCSS variables refactor
- Mobile optimization on headers, info-banner, and API pages
- API page table custom styling
- API Class Overview template code overview into table format
---
 aio/src/app/app.component.html                |   1 +
 .../app/embedded/api/api-list.component.html  |   2 +-
 aio/src/styles/0-base/_typography.scss        |  11 ++
 aio/src/styles/1-layouts/_api-page.scss       |  44 ++++++++
 aio/src/styles/1-layouts/_layouts-dir.scss    |   3 +-
 .../styles/1-layouts/_marketing-layout.scss   |   2 +-
 .../styles/1-layouts/_table-of-contents.scss  |  10 ++
 aio/src/styles/2-modules/_api-info-bar.scss   |  16 ++-
 aio/src/styles/2-modules/_api-list.scss       | 100 +++---------------
 aio/src/styles/2-modules/_banner.scss         |  24 ++---
 aio/src/styles/2-modules/_code.scss           |  13 ---
 aio/src/styles/2-modules/_hr.scss             |   1 -
 aio/src/styles/_constants.scss                |  78 +++++++++++++-
 .../templates/includes/_class-overview.html   | 100 ++++++++++++------
 .../templates/includes/_description.html      |   2 +-
 .../templates/includes/_info-bar.html         |   8 +-
 .../templates/includes/_members.html          |   6 +-
 .../transforms/templates/includes/_title.html |   4 +-
 18 files changed, 259 insertions(+), 166 deletions(-)
 create mode 100644 aio/src/styles/1-layouts/_table-of-contents.scss

diff --git a/aio/src/app/app.component.html b/aio/src/app/app.component.html
index 3563fe8046..74ae5198c0 100644
--- a/aio/src/app/app.component.html
+++ b/aio/src/app/app.component.html
@@ -28,6 +28,7 @@
 
 </md-sidenav-container>
 
+
 <aio-search-results #searchResults></aio-search-results>
 
 
diff --git a/aio/src/app/embedded/api/api-list.component.html b/aio/src/app/embedded/api/api-list.component.html
index 2a8df1f239..b4d73e7cc2 100644
--- a/aio/src/app/embedded/api/api-list.component.html
+++ b/aio/src/app/embedded/api/api-list.component.html
@@ -1,4 +1,4 @@
-<div class="l-flex-wrap banner is-plain l-content-small api-filter">
+<div class="l-flex-wrap info-banner api-filter">
 
   <div class="form-select-menu">
     <button class="form-select-button has-symbol" (click)="toggleTypeMenu()">
diff --git a/aio/src/styles/0-base/_typography.scss b/aio/src/styles/0-base/_typography.scss
index 7e73eaadb3..f462e71fdb 100755
--- a/aio/src/styles/0-base/_typography.scss
+++ b/aio/src/styles/0-base/_typography.scss
@@ -58,6 +58,17 @@
       margin: 8px 0px;
     }
 
+    h1, h2 {
+      @media screen and (max-width: 600px) {
+        margin: 16px 0;
+      }
+    }
+
+    h3, h4, h5, h6 {
+      @media screen and (max-width: 600px) {
+        margin: 8px 0;
+      }
+    }
 
     .mat-tab-body-wrapper h2 {
       margin-top: 0;
diff --git a/aio/src/styles/1-layouts/_api-page.scss b/aio/src/styles/1-layouts/_api-page.scss
index e0bf9cff60..4f17647fd3 100644
--- a/aio/src/styles/1-layouts/_api-page.scss
+++ b/aio/src/styles/1-layouts/_api-page.scss
@@ -4,4 +4,48 @@
     pre {
         white-space: pre-line;
     }
+
+    table.api-table {
+        min-width: 680px;
+        
+        tbody {
+            pre {
+                white-space: normal;
+                margin: 4px;
+                padding: 4px 16px;
+            }
+
+            td, th {
+                padding: 0;
+            }
+        }
+
+    }
+}
+
+.api-type-label {
+    border-radius: 4px;
+    padding: 4px 16px;
+    background-color: $accentblue;
+    display: inline;
+    margin: 0 16px;
+
+    @each $name, $symbol in $api-symbols {
+        &.#{$name} {
+            background: map-get($symbol, background);
+        }
+    }
+
+    @media screen and (max-width: 600px) {
+        display: block;
+        margin: 8px 0;
+    }
+
+    label {
+        font-size: 14px;
+        color: white;
+        font-weight: 500;
+        text-transform: uppercase;
+    }
+
 }
\ 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 730a82fef5..69359942d0 100644
--- a/aio/src/styles/1-layouts/_layouts-dir.scss
+++ b/aio/src/styles/1-layouts/_layouts-dir.scss
@@ -10,4 +10,5 @@
 @import 'footer';
 @import 'layout-global';
 @import 'not-found';
-@import 'api-page';
\ No newline at end of file
+@import 'api-page';
+@import 'table-of-contents';
\ No newline at end of file
diff --git a/aio/src/styles/1-layouts/_marketing-layout.scss b/aio/src/styles/1-layouts/_marketing-layout.scss
index 9b10944250..f4c98ae66a 100644
--- a/aio/src/styles/1-layouts/_marketing-layout.scss
+++ b/aio/src/styles/1-layouts/_marketing-layout.scss
@@ -130,4 +130,4 @@ header.bckground-sky.l-relative {
 
 .text-uppercase {
   text-transform: uppercase;
-}
+}
\ No newline at end of file
diff --git a/aio/src/styles/1-layouts/_table-of-contents.scss b/aio/src/styles/1-layouts/_table-of-contents.scss
new file mode 100644
index 0000000000..86a0e5194a
--- /dev/null
+++ b/aio/src/styles/1-layouts/_table-of-contents.scss
@@ -0,0 +1,10 @@
+nav#main-table-of-contents {
+    width: 200px;
+    height: 900px;
+    position: fixed;
+    right: 0;
+    top: 50px;
+    bottom: 100px;
+    margin-left: 32px;
+    background-color: $blue;
+}
\ 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
index 6f10e65fc5..b621a3f4fb 100644
--- a/aio/src/styles/2-modules/_api-info-bar.scss
+++ b/aio/src/styles/2-modules/_api-info-bar.scss
@@ -1,5 +1,13 @@
-.info-bar {
-    padding: 32px;
-    border-radius: 4px;
-    background-color: rgba($blue, 0.1);
+.api-info-bar {
+    max-width: 800px;
+    text-align: center;
+
+    span {
+        margin: 0 16px;
+
+        @media screen and (max-width: 600px) {
+            display: block;
+        }
+
+    }
 }
\ No newline at end of file
diff --git a/aio/src/styles/2-modules/_api-list.scss b/aio/src/styles/2-modules/_api-list.scss
index 13cc544d4d..25f080e71b 100644
--- a/aio/src/styles/2-modules/_api-list.scss
+++ b/aio/src/styles/2-modules/_api-list.scss
@@ -1,8 +1,11 @@
 /* API EDIT ICON */
 #api {
-  .info-bar .material-icons {
-    top: 24px;
+  .info-banner .material-icons {
     right: 48px;
+
+    @media screen and (max-width: 600px) {
+        left: 50px;
+    }
   }
 }
 
@@ -18,11 +21,6 @@ aio-api-list {
         width: 182px;
     }
 
-    .api-filter.banner {
-        border: 1px solid rgba($lightgray, 0.5);
-        border-radius: 4px;
-    }
-
     .api-list-container {
       display: flex;
       flex-direction: column;
@@ -33,8 +31,10 @@ aio-api-list {
 aio-api-list > div {
     display: flex;
     margin: 32px auto;
+    
     @media (max-width: 600px) {
         flex-direction: column;
+        margin: 16px auto;
     }
 
     > div {
@@ -45,32 +45,6 @@ aio-api-list > div {
 $phone-breakpoint: 480px;
 $tablet-breakpoint: 800px;
 
-$layer-1: 1;
-$layer-2: 2;
-$layer-3: 3;
-$layer-4: 4;
-$layer-5: 5;
-
-
-$amber-700: #FFA000;
-$blue-400: #42A5F5;
-$blue-500: #2196F3;
-$blue-600: #1E88E5;
-$blue-800: #1565C0;
-$blue-grey-50: #ECEFF1;
-$blue-grey-100: #CFD8DC;
-$blue-grey-500: #607D8B;
-$blue-grey-600: #546E7A;
-$green-500: #4CAF50;
-$green-800: #2E7D32;
-$light-green-600: #7CB342;
-$pink-600: #D81B60;
-$purple-600: #8E24AA;
-$teal-500: #009688;
-
-$lightgrey: #F5F6F7;
-
-
 /* LAYOUT */
 
 .docs-content {
@@ -219,51 +193,6 @@ $form-select-width: 200px;
 
 /* API SYMBOLS */
 
-/* VARIABLES */
-
-$api-symbols: (
-  all: (
-    content: ' ',
-    background: $white
-  ),
-  decorator: (
-    content: '@',
-    background: $blue-800
-  ),
-  directive: (
-    content: 'D',
-    background: $pink-600
-  ),
-  pipe: (
-    content: 'P',
-    background: $blue-grey-600
-  ),
-  class: (
-    content: 'C',
-    background: $blue-500
-  ),
-  interface: (
-    content: 'I',
-    background: $teal-500
-  ),
-  function: (
-    content: 'F',
-    background: $green-500
-  ),
-  enum: (
-    content: 'E',
-    background: $amber-700
-  ),
-  const: (
-    content: 'K',
-    background: $purple-600
-  ),
-  type-alias: (
-    content: 'T',
-    background: $light-green-600
-  )
-);
-
 /* SYMBOL CLASS */
 
 .symbol {
@@ -278,6 +207,7 @@ $api-symbols: (
   width: 16px;
 
   // SYMBOL TYPES
+  // Symbol mapping variables in *constants*
   @each $name, $symbol in $api-symbols {
     &.#{$name} {
       background: map-get($symbol, background);
@@ -311,6 +241,10 @@ $api-symbols: (
   padding: 0;
   overflow: hidden;
 
+  @media screen and (max-width: 600px) {
+        margin: 0;
+    }
+
   li {
     font-size: 14px;
     margin: 0 0 16px 0;
@@ -396,16 +330,6 @@ p {
   margin-bottom: $unit;
 }
 
-.hr-margin {
-  display: block;
-  height: 1px;
-  border: 0;
-  border-top: 1px solid $lightgrey;
-  margin-top: 15px;
-  margin-bottom: 20px;
-  padding: 0;
-}
-
 .no-bg {
   background: none;
   padding: 0;
diff --git a/aio/src/styles/2-modules/_banner.scss b/aio/src/styles/2-modules/_banner.scss
index b7d136f9a4..cbe380857a 100644
--- a/aio/src/styles/2-modules/_banner.scss
+++ b/aio/src/styles/2-modules/_banner.scss
@@ -1,26 +1,20 @@
-/* Banner */
+/* BANNER */
 
-.banner {
+.info-banner {
     justify-content: center;
     background: $white;
+    border: 1px solid rgba($lightgray, 0.5);
+    border-radius: 4px;
     box-sizing: border-box;
-    font-size: 18px;
-    font-weight: 200;
     padding: 16px;
-    min-height: 97px;
+    background: $white;
+    height: auto;
+    overflow: visible;
 
-
-    @media (max-width: 480px) {
-        padding: 16px;
+    @media screen and (max-width: 600px) {
+        text-align: center;
     }
 
-    &.is-plain {
-        background: $white;
-        height: auto;
-        overflow: visible;
-    }
-
-
     p, .text-body {
         color: $darkgray;
         font-size: 18px;
diff --git a/aio/src/styles/2-modules/_code.scss b/aio/src/styles/2-modules/_code.scss
index 9021c83f4e..2d451365ee 100644
--- a/aio/src/styles/2-modules/_code.scss
+++ b/aio/src/styles/2-modules/_code.scss
@@ -114,19 +114,6 @@ aio-code.headed-code {
   transform: none;
 }
 
-$blue-grey-50: #ECEFF1;
-$blue-grey-100: #CFD8DC;
-$blue-grey-200: #B0BEC5;
-$blue-grey-300: #90A4AE;
-$blue-grey-400: #78909C;
-$blue-grey-500: #607D8B;
-$blue-grey-600: #546E7A;
-$blue-grey-700: #455A64;
-$blue-grey-800: #37474F;
-$blue-grey-900: #263238;
-
-$white: #FFFFFF;
-
 /* SCREEN COLORS */
 
   .pnk,
diff --git a/aio/src/styles/2-modules/_hr.scss b/aio/src/styles/2-modules/_hr.scss
index c5de8d54c6..eacfad9b2d 100644
--- a/aio/src/styles/2-modules/_hr.scss
+++ b/aio/src/styles/2-modules/_hr.scss
@@ -8,7 +8,6 @@ hr {
     display: block;
     height: 1px;
     border: 0;
-    border-top: 1px solid $lightgray;
     margin-top: 16px;
     margin-bottom: 16px;
     padding: 0;
diff --git a/aio/src/styles/_constants.scss b/aio/src/styles/_constants.scss
index 8aa6b1a17b..d469f7d272 100755
--- a/aio/src/styles/_constants.scss
+++ b/aio/src/styles/_constants.scss
@@ -5,6 +5,13 @@ $unit: 8px;
 $main-font: "Roboto","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
 $code-font: "Droid Sans Mono", monospace;
 
+// Z-LAYER
+$layer-1: 1;
+$layer-2: 2;
+$layer-3: 3;
+$layer-4: 4;
+$layer-5: 5;
+
 // COLOR PALETTE
 $blue: #1976D2;
 $accentblue: #1E88E5;
@@ -18,11 +25,78 @@ $mist: #ECEFF1;
 $mediumgray: #7E7E7E;
 $darkgray: #333;
 $black: #0A1014;
-$codegreen: #17ff0b;
-$green-800: #2E7D32;
 $orange: #FF9800;
 $anti-pattern: $brightred;
 
+// API & CODE COLORS
+$amber-700: #FFA000;
+$blue-400: #42A5F5;
+$blue-500: #2196F3;
+$blue-600: #1E88E5;
+$blue-800: #1565C0;
+$blue-grey-50: #ECEFF1;
+$blue-grey-100: #CFD8DC;
+$blue-grey-200: #B0BEC5;
+$blue-grey-300: #90A4AE;
+$blue-grey-400: #78909C;
+$blue-grey-500: #607D8B;
+$blue-grey-600: #546E7A;
+$blue-grey-700: #455A64;
+$blue-grey-800: #37474F;
+$blue-grey-900: #263238;
+$codegreen: #17ff0b;
+$green-500: #4CAF50;
+$green-800: #2E7D32;
+$light-green-600: #7CB342;
+$pink-600: #D81B60;
+$purple-600: #8E24AA;
+$teal-500: #009688;
+$lightgrey: #F5F6F7;
+
 // GRADIENTS
 $bluegradient: linear-gradient(145deg,#0D47A1,#42A5F5);
 $redgradient: linear-gradient(145deg,$darkred,$brightred);
+
+// API LABEL COLOR AND SYMBOLS MAP
+$api-symbols: (
+  all: (
+    content: ' ',
+    background: $white
+  ),
+  decorator: (
+    content: '@',
+    background: $blue-800
+  ),
+  directive: (
+    content: 'D',
+    background: $pink-600
+  ),
+  pipe: (
+    content: 'P',
+    background: $blue-grey-600
+  ),
+  class: (
+    content: 'C',
+    background: $blue-500
+  ),
+  interface: (
+    content: 'I',
+    background: $teal-500
+  ),
+  function: (
+    content: 'F',
+    background: $green-500
+  ),
+  enum: (
+    content: 'E',
+    background: $amber-700
+  ),
+  const: (
+    content: 'K',
+    background: $purple-600
+  ),
+  type-alias: (
+    content: 'T',
+    background: $light-green-600
+  )
+);
\ No newline at end of file
diff --git a/aio/tools/transforms/templates/includes/_class-overview.html b/aio/tools/transforms/templates/includes/_class-overview.html
index 63cefabda1..0c47e669ba 100644
--- a/aio/tools/transforms/templates/includes/_class-overview.html
+++ b/aio/tools/transforms/templates/includes/_class-overview.html
@@ -1,40 +1,76 @@
 <section class="class-overview api-section">
-  <h2>Class Overview</h2>
+  <h2>Properties and Methods</h2>
   <div class="api-doc-code">
 
-    <code class="no-bg openParens">class {$ doc.name $} {</code>
+  <table class="api-table">
+      <thead>
+      <tr>
+        <th>{$ doc.name $} Properties</th>
+        <th></th>
+      </tr>
+      </thead>
+      <tbody>
+        
+      <!-- STATISTICS -->
+      {% if doc.statics.length %}
+        {% for member in doc.statics %}{% if not member.internal %}>
+          <tr class="statics">
+            <th>
+              <pre>
+                <code><a class="code-anchor" href="#{$ member.name $}-anchor">{$ member.name $}</a></code>
+              </pre>
+            </th>
+            <td>
+              <pre class="prettyprint">
+                <code>
+                  {$ params.paramList(member.parameters) | indent(8, false) | trim $}{$ params.returnType(member.returnType) $}
+                </code>
+              </pre>
+            </td>
+          </tr>
+        {% endif %}{% endfor %}
+      {% 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>
+      <!-- CONSTRUCTOR -->
+      {% if doc.constructorDoc.name %}
+        <tr class="constructor">
+          <th>
+            <pre class="prettyprint">
+              <code><a class="code-anchor" href="#constructor">{$ doc.constructorDoc.name $}</a></code>
+            </pre>
+          </th>
+          <td>
+            <pre>
+              <code>{$ params.paramList(member.parameters) | indent(8, false) | trim $}{$ params.returnType(member.returnType) $}</code>
+            </pre>
+          </td>
+        </tr>
+      {% endif %}
+
+      <!-- MEMBERS -->
+      {% if doc.members.length %}
+        {% for member in doc.members %}{% if not member.internal %}
+          <tr class="members">
+            <th>
+              <pre class="prettyprint">
+                <code>
+                  <a class="code-anchor" href="#{$ member.name $}-anchor">{$ member.name | indent(6, false) | trim $}</a>
+                </code>
+              </pre>
+            </th>
+            <td>
+              <pre>
+                <code>
+                  {$ params.paramList(member.parameters) | indent(8, false) | trim $}{$ params.returnType(member.returnType) $}
+                </code>
+              </pre>
+            </td>
+          </tr>
+        {% endif %}{% endfor %}
     {% endif %}
+    </tbody>
+    </table>
 
-
-    {% 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/_description.html b/aio/tools/transforms/templates/includes/_description.html
index d42e1762c3..31cfd9eef4 100644
--- a/aio/tools/transforms/templates/includes/_description.html
+++ b/aio/tools/transforms/templates/includes/_description.html
@@ -1,4 +1,4 @@
-<div class="api-section">
+<div class="description 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 $}
diff --git a/aio/tools/transforms/templates/includes/_info-bar.html b/aio/tools/transforms/templates/includes/_info-bar.html
index 46f996020f..21bfae1f8a 100644
--- a/aio/tools/transforms/templates/includes/_info-bar.html
+++ b/aio/tools/transforms/templates/includes/_info-bar.html
@@ -1,16 +1,16 @@
 {% import "lib/githubLinks.html" as github -%}
 
 <!-- INFO BAR -->
-<div class="info-bar">
-  <span class="info-bar-item is-left">
+<div class="info-banner api-info-bar">
+  <span class="info-bar-item">
     npm package: <a href="#">{$ doc.package $}</a>
   </span>
 
-  <span class="info-bar-item is-left">
+  <span class="info-bar-item">
     NgModule: <a href="#">{$ doc.moduleDoc.name $}</a>
   </span>
 
-  <span class="info-bar-item is-right">
+  <span class="info-bar-item">
     {$ github.githubViewLink(doc, versionInfo) $}
   </span>
 </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 22ca9c031a..e8481b0597 100644
--- a/aio/tools/transforms/templates/includes/_members.html
+++ b/aio/tools/transforms/templates/includes/_members.html
@@ -1,4 +1,6 @@
-{% if doc.members.length %}
+<!-- **** This is being duplicated - already in class overview content **** -->
+
+<!--{% if doc.members.length %}
 <div class="instance-members api-section">
   <h2>Class Details</h2>
   {% for member in doc.members %}{% if not member.internal %}
@@ -14,4 +16,4 @@
   {% if not loop.last %}<hr class="hr-margin">{% endif %}
   {% endif %}{% endfor %}
 </div>
-{% endif %}
+{% endif %}-->
diff --git a/aio/tools/transforms/templates/includes/_title.html b/aio/tools/transforms/templates/includes/_title.html
index cc5d051005..b11e5c22b2 100644
--- a/aio/tools/transforms/templates/includes/_title.html
+++ b/aio/tools/transforms/templates/includes/_title.html
@@ -1,6 +1,8 @@
 <!-- PAGE HERO -->
 <header class="api-header">
   <h1>{$ doc.name $}</h1>
-  <h2>{$ doc.docType $}</h2>
+  <div class="api-type-label {$ doc.docType $}">
+    <label>{$ doc.docType $}</label>
+  </div>
   <span class="version">{$ angular.version $}</span>
 </header>