change class and directive template.
This commit is contained in:
parent
3547e4cc15
commit
5ea7738ad3
|
@ -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,
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
|
@ -1,6 +1,6 @@
|
|||
module.exports = [
|
||||
require('./deprecated'),
|
||||
require('./howToUse'),
|
||||
require('./whatItIs'),
|
||||
require('./whatItDoes'),
|
||||
require('./internal')
|
||||
];
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
module.exports = function() {
|
||||
return {
|
||||
name: 'whatItIs'
|
||||
name: 'whatItDoes'
|
||||
};
|
||||
};
|
|
@ -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 %}
|
||||
|
|
|
@ -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 -%}
|
||||
|
|
|
@ -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 $}
|
||||
| bound to
|
||||
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 $}
|
||||
| bound to
|
||||
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 $}
|
||||
| bound to
|
||||
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 $}
|
||||
| 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 %}
|
||||
|
|
|
@ -1 +1 @@
|
|||
{% extends 'class.template.html' -%}
|
||||
{% extends 'class.template.html' %}
|
|
@ -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
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue