change class and directive template.

This commit is contained in:
Eric Jimenez 2016-04-07 12:54:24 -04:00 committed by Naomi Black
parent 3547e4cc15
commit 5ea7738ad3
12 changed files with 281 additions and 111 deletions

View File

@ -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,

View File

@ -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;
}
}

View File

@ -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,7 +44,6 @@
background: #3F94E9;
color: $snow;
border-radius: 4px 4px 0px 0px;
// font-weight: 500;
text-transform: none;
&.is-selected,
@ -38,3 +60,7 @@
margin: 0px;
}
}
pre {
margin-top: 0;
}

View File

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

View File

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

View File

@ -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")
pre.prettyprint
code.
export {$ doc.docType $} {$ doc.name $}
p.location-badge.
exported from {@link {$ doc.moduleDoc.id $} {$doc.moduleDoc.id $} }
defined in {$ githubViewLink(doc) $}
.div(layout="row" layout-xs="column" class="row-margin")
div(flex="20" flex-xs="100")
h2 What it does
div(flex="80" flex-xs="100")
:marked
{%- if doc.notYetDocumented %}
*Not Yet Documented*
{%- if doc.whatItDoes %}
{$ doc.whatItDoes | indentForMarkdown(6) $}
{% else %}
{$ doc.description | indentForMarkdown(2) | trimBlankLines $}
*Not yet documented*
{% endif %}
.div(layout="row" layout-xs="column" class="row-margin")
div(flex="20" flex-xs="100")
h2 How to use
div(flex="80" flex-xs="100")
:marked
{%- if doc.howToUse %}
{$ doc.howToUse | indentForMarkdown(6) $}
{% else %}
*Not yet documented*
{% endif %}
{% block additional %}
{% endblock %}
{% block annotations %}
{%- if doc.decorators.length %}
.l-main-section
h2 Annotations
{%- for decorator in doc.decorators %}
.l-sub-section
h3.annotation
pre.prettyprint
code.
@{$ decorator.name $}{$ paramList(decorator.arguments) | indent(10, false) $}{% endfor %}{% endif %}
{% endblock %}
.div(class="row-margin" layout="row" layout-xs="column")
div(flex="20" flex-xs="100")
h2 Class Description
div(class="class-description-content" flex="80" flex-xs="100")
:marked
{%- if doc.description.length > 2 %}
{$ 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 %}
{$ decorator.description | indentForMarkdown(8) | trimBlankLines $}
{% endif %}
{% endfor %}
{% endblock %}
{% endif %}
{%- if doc.constructorDoc and not doc.constructorDoc.internal %}
.l-main-section
.div(layout="row" layout-xs="column" class="row-margin")
div(flex="20" flex-xs="100")
h2 Constructor
.l-sub-section
h3#{$ doc.constructorDoc.name | toId $}
pre.prettyprint
div(flex="80" flex-xs="100")
pre.prettyprint.no-bg
code.
{$ doc.constructorDoc.name $}{$ paramList(doc.constructorDoc.parameters) | indent(8, false) | trim $}
:marked
{%- if doc.constructorDoc.notYetDocumented %}
*Not Yet Documented*
*Not yet documented*
{% else %}
{$ doc.constructorDoc.description | indentForMarkdown(6) | replace('## Example', '') | replace('# Example', '') | trimBlankLines $}
{% endif -%}
{$ doc.constructorDoc.description | indentForMarkdown(6) | replace('### Example', '') | replace('## Example', '') | replace('# Example', '') | trimBlankLines $}
{% endif %}
{% endif %}
{% if doc.statics.length -%}
.l-main-section
{% if doc.statics.length %}
.div(layout="row" layout-xs="column" class="row-margin")
div(flex="20" flex-xs="100")
h2 Static Members
{%- for member in doc.statics %}{% if not member.internal %}
.l-sub-section
h3#{$ member.name | toId $}
pre.prettyprint
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 %}
{% if not loop.last %}
.hr(class="hr-margin")
{% endif %}
{% endif %}{% endfor %}
{%- endif -%}
{% endif %}
{% if doc.members.length -%}
.l-main-section
{% if doc.members.length %}
.div(layout="row" layout-xs="column" class="instance-members" class="row-margin")
div(flex="20" flex-xs="100")
h2 Instance Members
{%- for member in doc.members %}{% if not member.internal %}
.l-sub-section
h3#{$ member.name | toId $}
pre.prettyprint
div(flex="80" flex-xs="100")
{% 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 -%}
{% if not loop.last %}
.hr(class="hr-margin")
{% endif %}
{% endif %}{% endfor %}
{%- endif -%}
{% endif %}
.p(class="location-badge")
exported from {@link {$ doc.moduleDoc.id $} {$doc.moduleDoc.id $} }
defined in {$ githubViewLink(doc) $}
{% endblock %}

View File

@ -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 -%}

View File

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

View File

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

View File

@ -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

View File

@ -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;
}