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
2017-04-25 09:33:09 -07:00 · 2017-04-25 09:33:09 -07:00 · bb52e22ecf
parent 35a2dfc177
commit bb52e22ecf
18 changed files with 259 additions and 166 deletions
--- 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>


--- 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()">
--- 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;
--- 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;
+    }
+
 }
--- 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';
+@import 'api-page';
+@import 'table-of-contents';
--- 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;
-}
+}
--- a/aio/src/styles/1-layouts/_table-of-contents.scss
+++ 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;
+}
--- 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;
+        }
+
+    }
 }
--- 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;
--- 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;
--- 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,
--- 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;
--- 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
+  )
+);
--- 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>
--- 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 $}
--- 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>
--- 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 %}-->
--- 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>