change class and directive template.

public/resources/css/base/_type.scss

@@ -18,12 +18,19 @@ a {
 }
 
 code {
-  background: $lightgrey;
+  background: #eef1f2;
   border-radius: 2px;
   font-family: $mono-font;
-  color: $darkgrey;
+  color: $regal;
   padding: 0px 4px;
-  font-size: 90%;
+}
+
+p code {
+  border-bottom: 1px dotted $regal;
+
+  &:hover {
+    border-bottom: 1px solid $regal;
+  }
 }
 
 .location-badge {
@@ -103,7 +110,9 @@ code {
     opacity: 0.87;
   }
   h2 {
-    font-size: 20px;
+    font-size: 15px;
+    text-transform: uppercase;
+    color: #78909C;
   }
   h3 {
     font-size: 16px;
@@ -111,6 +120,11 @@ code {
   h4 {
     font-size: 16px;
   }
+  p {
+    font-size: 15px;
+    color: #5c7078;
+    line-height: 28pt;
+  }
 }
 
 table th,
@@ -213,8 +227,8 @@ table td {
     &[layout="row"] {
       -webkit-flex-direction: column;
       -ms-flex-direction: column;
-      flex-direction: column; 
+      flex-direction: column;
-      & > div {   
+      & > div {
         & > .card {
           margin-left: 0;
           margin-right: 0;

public/resources/css/main.scss

@@ -54,4 +54,4 @@
 * PRINT STYLES
 *
 */
-@import 'print';
+@import 'print';

public/resources/css/module/_api.scss

@@ -102,4 +102,79 @@ input.api-filter {
       }
     }
   }
+
+  a {
+    code {
+      color: $ocean;
+    }
+  }
+
+  p {
+    color: #1a2326;
+
+    &.selector {
+      margin: 0 0 8px 0;
+    }
+
+    &.location-badge {
+      margin: 0 0 16px 16px !important;
+    }
+
+    code {
+      border-bottom: 0px;
+
+      :hover {
+        border-bottom: none;
+      }
+    }
+  }
+
+  .row-margin {
+    margin-bottom: 36px;
+    h2 {
+      line-height: 28px;
+    }
+  }
+
+  .code-margin {
+    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;
+  }
+
+  code {
+    font-size: 14px;
+    color: #1a2326;
+
+    // Override highlight.js
+    &.no-pln {
+      .pln {
+        display: none;
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 600px) {
+  code {
+    font-size: 12px;
+  }
+
+  p.location-badge {
+    position: relative;
+    font-size: 11px;
+  }
 }

public/resources/css/module/_code-box.scss

@@ -1,7 +1,6 @@
 .code-box {
   border-radius: 4px;
   background: $lightgrey;
-  // box-shadow: 0px 2px 5px rgba($coal, .3);
   margin-bottom: $unit * 2;
 
   header {
@@ -11,6 +10,30 @@
     border-radius: 4px 4px 0px 0px;
   }
 
+  &__live-code {
+    background-color: #cfd8dc;
+    height: 36px;
+    color: $snow;
+    padding: 0 $unit;
+    border-radius: 4px 4px 0px 0px;
+    margin-bottom: 0;
+
+    & a {
+      font-size: 14px;
+      text-decoration: none;
+      border-bottom: 1px $regal dotted;
+
+      &:hover {
+        border-bottom: 1px $regal solid;
+      }
+    }
+
+    &--icon {
+      font-size: 14px;
+      color: $regal;
+    }
+  }
+
   nav {
     button {
       line-height: $unit * 3.5;
@@ -21,12 +44,11 @@
       background: #3F94E9;
       color: $snow;
       border-radius: 4px 4px 0px 0px;
-      // font-weight: 500;
       text-transform: none;
 
       &.is-selected,
       &.selected
-       {
+      {
         background: $lightgrey;
         color: $darkgrey;
       }
@@ -38,3 +60,7 @@
     margin: 0px;
   }
 }
+
+pre {
+  margin-top: 0;
+}

tools/api-builder/angular.io-package/tag-defs/index.js

@@ -1,6 +1,6 @@
 module.exports = [
   require('./deprecated'),
   require('./howToUse'),
-  require('./whatItIs'),
+  require('./whatItDoes'),
   require('./internal')
 ];

tools/api-builder/angular.io-package/tag-defs/whatItDoes.js

@@ -1,5 +1,5 @@
 module.exports = function() {
   return {
-    name: 'whatItIs'
+    name: 'whatItDoes'
   };
 };

tools/api-builder/angular.io-package/templates/class.template.html

@@ -1,6 +1,3 @@
-<!-- TODO: API design proposal section will use doc.howToUse and doc.whatItIs -->
-<!-- TODO: API design proposal badges will use doc.deprecated -->
-
 {% include "lib/githubLinks.html" -%}
 {% include "lib/paramList.html" -%}
 {% extends 'layout/base.template.html' -%}
@@ -8,91 +5,135 @@
 {% block body %}
 include {$ relativePath(doc.path, '_util-fns') $}
 
-h2(class="{$ doc.docType $} export")
+.div(layout="row" layout-xs="column" class="row-margin")
-  pre.prettyprint
+  div(flex="20" flex-xs="100")
-    code.
+    h2 What it does
-      export {$ doc.docType $} {$ doc.name $}
+  div(flex="80" flex-xs="100")
+    :marked
+    {%- if doc.whatItDoes %}
+{$ doc.whatItDoes | indentForMarkdown(6) $}
+    {% else %}
+      *Not yet documented*
+    {% endif %}
 
-p.location-badge.
+.div(layout="row" layout-xs="column" class="row-margin")
-  exported from {@link {$ doc.moduleDoc.id $} {$doc.moduleDoc.id $} }
+  div(flex="20" flex-xs="100")
-  defined in {$ githubViewLink(doc) $}
+    h2 How to use
-
+  div(flex="80" flex-xs="100")
-:marked
+    :marked
-{%- if doc.notYetDocumented %}
+    {%- if doc.howToUse %}
-  *Not Yet Documented*
+{$ doc.howToUse | indentForMarkdown(6) $}
-{% else %}
+    {% else %}
-{$ doc.description | indentForMarkdown(2) | trimBlankLines $}
+      *Not yet documented*
-{% endif %}
+    {% endif %}
 
 {% block additional %}
 {% endblock %}
 
-{% block annotations %}
+.div(class="row-margin" layout="row" layout-xs="column")
-{%- if doc.decorators.length %}
+  div(flex="20" flex-xs="100")
-.l-main-section
+    h2 Class Description
-  h2 Annotations
+  div(class="class-description-content" flex="80" flex-xs="100")
-{%- for decorator in doc.decorators %}
-  .l-sub-section
-    h3.annotation
-      pre.prettyprint
-        code.
-          @{$ decorator.name $}{$ paramList(decorator.arguments) | indent(10, false) $}{% endfor %}{% endif %}
-{% endblock %}
-
-
-{%- if doc.constructorDoc and not doc.constructorDoc.internal %}
-.l-main-section
-  h2 Constructor
-  .l-sub-section
-    h3#{$ doc.constructorDoc.name | toId $}
-      pre.prettyprint
-        code.
-          {$ doc.constructorDoc.name $}{$ paramList(doc.constructorDoc.parameters) | indent(8, false) | trim $}
     :marked
-      {%- if doc.constructorDoc.notYetDocumented %}
+    {%- if doc.description.length > 2 %}
-      *Not Yet Documented*
+{$ doc.description | indentForMarkdown(6) | trimBlankLines $}
+    {% else %}
+      *Not yet documented*
+    {% endif %}
+
+.div(layout="row" layout-xs="column" class="row-margin")
+  div(flex="20" flex-xs="100")
+    h2 Class Export
+  div(flex="80" flex-xs="100")
+    pre.prettyprint.no-bg
+      code.no-pln.
+        export {$ doc.docType $} {$ doc.name $}
+
+{%- if doc.decorators.length %}
+{% block annotations %}
+.div(layout="row" layout-xs="column" class="row-margin")
+  div(flex="20" flex-xs="100")
+    h2 Annotations
+  div(flex="80" flex-xs="100")
+    {%- for decorator in doc.decorators %}
+      pre.prettyprint.no-bg
+        code.
+          @{$ decorator.name $}{$ paramList(decorator.arguments) | indent(10, false) $}
+      :marked
+      {%- if decorator.notYetDocumented %}
+        *Not yet documented*
       {% else %}
-{$ doc.constructorDoc.description | indentForMarkdown(6) | replace('## Example', '') | replace('# Example', '') | trimBlankLines $}
+        {$ decorator.description | indentForMarkdown(8) | trimBlankLines $}
-      {% endif -%}
+      {% endif %}
+    {% endfor %}
+{% endblock %}
 {% endif %}
 
-{% if doc.statics.length -%}
+{%- if doc.constructorDoc and not doc.constructorDoc.internal %}
-.l-main-section
+.div(layout="row" layout-xs="column" class="row-margin")
-  h2 Static Members
+  div(flex="20" flex-xs="100")
-{%- for member in doc.statics %}{% if not member.internal %}
+    h2 Constructor
-  .l-sub-section
+  div(flex="80" flex-xs="100")
-    h3#{$ member.name | toId $}
+    pre.prettyprint.no-bg
-      pre.prettyprint
+      code.
-        code.
+        {$ doc.constructorDoc.name $}{$ paramList(doc.constructorDoc.parameters) | indent(8, false) | trim $}
-          {$ member.name $}{$ paramList(member.parameters) | indent(8, false) | trim $}{$ returnType(member.returnType) $}
+    :marked
+      {%- if doc.constructorDoc.notYetDocumented %}
+      *Not yet documented*
+      {% else %}
+{$ doc.constructorDoc.description | indentForMarkdown(6) | replace('### Example', '') | replace('## Example', '') | replace('# Example', '') | trimBlankLines $}
+      {% endif %}
+{% endif %}
 
+{% if doc.statics.length %}
+.div(layout="row" layout-xs="column" class="row-margin")
+  div(flex="20" flex-xs="100")
+    h2 Static Members
+  div(flex="80" flex-xs="100")
+  {% for member in doc.statics %}{% if not member.internal %}
+    pre.prettyprint.no-bg
+      code.
+        {$ member.name $}{$ paramList(member.parameters) | indent(8, false) | trim $}{$ returnType(member.returnType) $}
     :marked
       {%- if member.notYetDocumented %}
-        *Not Yet Documented*
+      *Not yet documented*
       {% else %}
 {$ member.description | indentForMarkdown(6) | replace('## Example', '') | replace('# Example', '') | trimBlankLines $}
       {% endif %}
-{% endif %}{% endfor %}
-{%- endif -%}
 
+    {% if not loop.last %}
+    .hr(class="hr-margin")
+    {% endif %}
 
-{% if doc.members.length -%}
+  {% endif %}{% endfor %}
-.l-main-section
+{% endif %}
-  h2 Instance Members
+
-{%- for member in doc.members %}{% if not member.internal %}
+{% if doc.members.length %}
-  .l-sub-section
+.div(layout="row" layout-xs="column" class="instance-members" class="row-margin")
-    h3#{$ member.name | toId $}
+  div(flex="20" flex-xs="100")
-      pre.prettyprint
+    h2 Instance Members
-        code.
+  div(flex="80" flex-xs="100")
-          {$ member.name $}{$ paramList(member.parameters) | indent(8, false) | trim $}{$ returnType(member.returnType) $}
+    {% for member in doc.members %}{% if not member.internal %}
+    pre.prettyprint.no-bg
+      code.
+        {$ member.name $}{$ paramList(member.parameters) | indent(8, false) | trim $}{$ returnType(member.returnType) $}
 
     :marked
       {%- if member.notYetDocumented %}
-        *Not Yet Documented*
+      *Not yet documented*
       {% else %}
-{$ member.description | indentForMarkdown(6) | replace('## Example', '') | replace('# Example', '') | trimBlankLines $}
+{$ member.description | indentForMarkdown(6) | replace('### Example', '') | replace('## Example', '') | replace('# Example', '') | trimBlankLines $}
-      {% endif %}
+      {% endif -%}
-{% endif %}{% endfor %}
+
-{%- endif -%}
+    {% if not loop.last %}
+    .hr(class="hr-margin")
+    {% endif %}
+
+  {% endif %}{% endfor %}
+{% endif %}
+
+.p(class="location-badge")
+  exported from {@link {$ doc.moduleDoc.id $} {$doc.moduleDoc.id $} }
+  defined in {$ githubViewLink(doc) $}
 
 {% endblock %}

tools/api-builder/angular.io-package/templates/decorator.template.html

@@ -16,7 +16,7 @@ include {$ relativePath(doc.path, '_util-fns') $}
 
   :marked
 {%- if doc.notYetDocumented %}
-    *Not Yet Documented*
+    *Not yet documented*
 {% else %}
 {$ doc.description | indentForMarkdown(4) | trimBlankLines $}
 {% endif -%}

tools/api-builder/angular.io-package/templates/directive.template.html

@@ -5,44 +5,55 @@
 {% block annotations %}
 {% endblock %}
 
-
 {% block additional -%}
-.l-main-section
-  h2 Selectors
-  .l-sub-section{% for selector in doc.directiveOptions.selector.split(',') %}
-    h3.selector
-      code {$ selector $}{% endfor %}
 
-{% if doc.inputs %}
+{%- if doc.directiveOptions.selector.split(',').length %}
-.l-main-section
+.div(layout="row" layout-xs="column" class="row-margin")
-  h2 Inputs
+  div(flex="20" flex-xs="100")
-  .l-sub-section{% for binding, property in doc.inputs %}
+    h2 Selectors
-    h3.input
+  div(flex="80" flex-xs="100")
-      code {$ property.bindingName $}
+    {% for selector in doc.directiveOptions.selector.split(',') %}
-      |  bound to 
+    p.selector
-      code {$ property.memberDoc.classDoc.name $}.{$ property.propertyName $}
+      code {$ selector $}
-    :marked
+    {% endfor %}
-{$ property.memberDoc.description | indentForMarkdown(2) | trimBlankLines $}{% endfor %}
 {% endif %}
 
 {% if doc.outputs %}
-.l-main-section
+.div(layout="row" layout-xs="column" class="row-margin")
-  h2 Outputs
+  div(flex="20" flex-xs="100")
-  .l-sub-section{% for binding, property in doc.outputs %}
+    h2 Outputs
-    h3.output
+  div(flex="80" flex-xs="100")
+  {% for binding, property in doc.outputs %}
+    div(class="code-margin")
       code {$ property.bindingName $}
       |  bound to 
       code {$ property.memberDoc.classDoc.name $}.{$ property.propertyName $}
     :marked
-{$ event.memberDoc.description | indentForMarkdown(2) | trimBlankLines $}
+{$ event.memberDoc.description | indentForMarkdown(6) | trimBlankLines $}
-{% endfor %}
+  {% endfor %}
 {% endif %}
 
-{% if doc.directiveOptions.exportAs %}
+{% if doc.inputs %}
-.l-main-section
+.div(layout="row" layout-xs="column" class="row-margin")
-  h2 Exported As
+  div(flex="20" flex-xs="100")
-  .l-sub-section
+    h2 Inputs
-    h3.export-as
+  div(flex="80" flex-xs="100")
+    {% for binding, property in doc.inputs %}
+    div(class="code-margin")
+      code {$ property.bindingName $}
+      |  bound to 
+      code {$ property.memberDoc.classDoc.name $}.{$ property.propertyName $}
+    :marked
+{$ event.memberDoc.description | indentForMarkdown(4) | trimBlankLines $}
+    {% endfor %}
+{% endif %}
+
+{%- if doc.directiveOptions.exportAs %}
+.div(layout="row" layout-xs="column" class="row-margin")
+  div(flex="20" flex-xs="100")
+    h2 Exported as
+  div(flex="80" flex-xs="100")
+    p.input
       code {$ doc.directiveOptions.exportAs $}
 {% endif %}
 {% endblock %}

tools/api-builder/angular.io-package/templates/interface.template.html

@@ -1 +1 @@
-{% extends 'class.template.html' -%}
+{% extends 'class.template.html' %}

tools/api-builder/docs-package/processors/convertBackticksToCodeBlocks.js

@@ -44,7 +44,9 @@ module.exports = function convertBackticksToCodeBlocks() {
             var replaceVal = '\n' + newPrePad + codeExamplePrefix + escapeHtml(blockContents) + '\n';
             // if nextBlock does NOT start with a '.' then we want to restart a markdown block.
             // and that block needs to be exdented from the preceding code-example content.
-            if (nextBlockStartChar != '.') {
+            // There is also a case where immediately after the backticks, an @example (aka +makeExample) is created.
+            // In this case a markdown block is not needed.
+            if (nextBlockStartChar !== '.' && nextBlockStartChar !== '+') {
               if (postPad.length >= 2) {
                 // modulo op in next line insures that pad is always a multiple of 2 ( jade whitespace).
                 postPad = postPad.substr(2 + (postPad.length % 2)); // exdent

tools/api-builder/links-package/inline-tag-defs/example.js

@@ -32,7 +32,8 @@ module.exports = function exampleInlineTagDef(getLinkInfo, parseArgString, getAp
         log.warn(createDocMessage('Invalid example (unable to locate fragment file: ' + quote(fragFileName) + ")", doc));
       }
 
-      var comma = ', '
+      var comma = ', ';
+      // the '+' character is a jade thing for mixins http://jade-lang.com/reference/mixins/
       var res = [ "+makeExample(", quote(mixinFilePath), comma, region ? quote(region) : 'null', comma, title ? quote(title) : 'null', ")" ].join('');
       return res;
     }