iSharkFly-Docs
/
angular-docs-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(aio): api page column layout

This commit is contained in:
Stefanie Fluin 2017-04-24 10:49:37 -07:00 committed by Pete Bacon Darwin
parent 249cd8c2ec
commit 64ef69fb34
14 changed files with 101 additions and 180 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
aio/src/styles/1-layouts/_api-page.scss
View File

@ -1,42 +1,7 @@
.api-section {
display: flex;
flex-direction: row;
vertical-align: top;
position: relative;
margin-bottom: 32px;
padding: 8px 0 16px;
pre {
white-space: pre-line;
}
&:after {
content:"";
display: block;
position: absolute;
bottom: 0;
left: 0;
right: 0;
border-bottom: 1px solid $lightgray;
width: 100%;
}
}
.api-section-header {
width: 30%;
display: inline-block;
margin-right: 32px;
h2, p {
margin: 0;
}
}
.api-section-content {
width: 60%;
display: inline-block;
p {
margin: 0 0 8px 0;
}
}

8
aio/tools/transforms/templates/includes/_annotations.html
View File

@ -1,15 +1,11 @@
{%- if doc.decorators.length %}
<section class="annotations api-section">
<div class="api-section-header">
<div class="annotations api-section">
<h2>Annotations</h2>
</div>
<div class="annotation api-section-content">
{%- for decorator in doc.decorators %}
<pre class="prettyprint no-bg">
<code>@{$ decorator.name $}{$ params.paramList(decorator.arguments) | indent(10, false) $}</code>
</pre>
{%- if not decorator.notYetDocumented %}{$ decorator.description | marked $}{% endif %}
{% endfor %}
</div>
</section>
</div>
{% endif %}

70
aio/tools/transforms/templates/includes/_class-overview.html
View File

@ -1,44 +1,40 @@
<section class="class-overview api-section">
<div class="api-section-header">
<h2>Class Overview</h2>
</div>
<div class="api-section-content">
<div class="api-doc-code">
<h2>Class Overview</h2>
<div class="api-doc-code">
<code class="no-bg openParens">class {$ doc.name $} {</code>
<code class="no-bg openParens">class {$ doc.name $} {</code>
{% 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>
{% endif %}
{% 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 $}
{% 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>
</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>
{% endif %}{% endfor %}
</div>
{% endif %}
{% 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>

28
aio/tools/transforms/templates/includes/_constructor.html
View File

@ -1,18 +1,14 @@
{%- if doc.constructorDoc and not doc.constructorDoc.internal %}
<section class="constructor api-section">
<div class="api-section-header">
<h2>Constructor</h2>
</div>
<div class="description api-section-content">
<a name="constructor" class="anchor-offset"></a>
<pre class="prettyprint no-bg" ng-class="{ 'anchor-focused': appCtrl.isApiDocMemberFocused('{$ doc.constructorDoc.name $}') }">
<code>
{$ doc.constructorDoc.name $}{$ params.paramList(doc.constructorDoc.parameters) | indent(8, false) | trim $}
</code>
</pre>
{%- if not doc.constructorDoc.notYetDocumented %}
{$ doc.constructorDoc.description | replace('### Example', '') | replace('## Example', '') | replace('# Example', '') | trimBlankLines | marked $}
{% endif %}
</div>
</section>
<div class="constructor api-section">
<h2>Constructor</h2>
<a name="constructor" class="anchor-offset"></a>
<pre class="prettyprint no-bg" ng-class="{ 'anchor-focused': appCtrl.isApiDocMemberFocused('{$ doc.constructorDoc.name $}') }">
<code>
{$ doc.constructorDoc.name $}{$ params.paramList(doc.constructorDoc.parameters) | indent(8, false) | trim $}
</code>
</pre>
{%- if not doc.constructorDoc.notYetDocumented %}
{$ doc.constructorDoc.description | replace('### Example', '') | replace('## Example', '') | replace('# Example', '') | trimBlankLines | marked $}
{% endif %}
</div>
{% endif %}

10
aio/tools/transforms/templates/includes/_description.html
View File

@ -1,10 +1,6 @@
<section class="api-section">
<div class="api-section-header">
<h2 class="text-display-1" id="api-description">Description<a href="#api-description" class="header-link"><i class="material-icons">link</i></a></h2>
</div>
<div class="api-section-content">
<div class="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 $}
{% endif %}
</div>
</section>
</div>

16
aio/tools/transforms/templates/includes/_export-as.html
View File

@ -1,12 +1,8 @@
{%- if doc.directiveOptions.exportAs %}
<section class="export-as api-section">
<div class="api-section-header">
<h2>Exported as</h2>
</div>
<div class="api-section-content">
<p>
<code>{$ doc.directiveOptions.exportAs $}</code>
</p>
</div>
</section>
<div class="export-as api-section">
<h2>Exported as</h2>
<p>
<code>{$ doc.directiveOptions.exportAs $}</code>
</p>
</div>
{% endif %}

12
aio/tools/transforms/templates/includes/_how-to-use.html
View File

@ -1,11 +1,7 @@
{%- if doc.howToUse %}
<!-- QUICK REFERENCE CODE EXAMPLE -->
<section class="how-to-use api-section">
<div class="api-section-header">
<h2>How To Use</h2>
</div>
<div class="api-section-content">
{$ doc.howToUse | marked $}
</div>
</section>
<div class="how-to-use api-section">
<h2>How To Use</h2>
{$ doc.howToUse | marked $}
</div>
{% endif %}

20
aio/tools/transforms/templates/includes/_inputs.html
View File

@ -1,15 +1,11 @@
{% if doc.inputs %}
<section class="inputs api-section">
<div class="api-section-header">
<h2>Inputs</h2>
<div class="inputs api-section">
<h2>Inputs</h2>
{% for binding, property in doc.inputs %}
<div class="input">
<code>{$ property.bindingName $}</code>&nbsp;bound to&nbsp;<code>{$ property.memberDoc.classDoc.name $}.{$ property.propertyName $}</code>
{$ property.memberDoc.description | trimBlankLines | marked $}
</div>
<div class="api-section-content">
{% for binding, property in doc.inputs %}
<div class="input">
<code>{$ property.bindingName $}</code>&nbsp;bound to&nbsp;<code>{$ property.memberDoc.classDoc.name $}.{$ property.propertyName $}</code>
{$ property.memberDoc.description | trimBlankLines | marked $}
</div>
{% endfor %}
</div>
</section>
{% endfor %}
</div>
{% endif %}

4
aio/tools/transforms/templates/includes/_interface-overview.html
View File

@ -1,4 +1,4 @@
<section class="class-overview">
<div class="class-overview">
<h2>Interface Overview</h2>
<div class="api-doc-code">
@ -16,4 +16,4 @@
<code class="endParens api-doc-code no-bg">}</code>
</div>
</section>
</div>

30
aio/tools/transforms/templates/includes/_members.html
View File

@ -1,21 +1,17 @@
{% if doc.members.length %}
<section class="instance-members api-section">
<div class="api-section-header">
<h2>Class Details</h2>
<div class="instance-members api-section">
<h2>Class Details</h2>
{% for member in doc.members %}{% if not member.internal %}
<div class="instance-member">
<a name="{$ member.name $}-anchor" class="anchor-offset"></a>
<pre class="prettyprint no-bg" ng-class="{ 'anchor-focused': appCtrl.isApiDocMemberFocused('{$ member.name $}') }">
<code>{$ member.name $}{$ params.paramList(member.parameters) | trim $}{$ params.returnType(member.returnType) $}</code>
</pre>
{%- if not member.notYetDocumented %}
{$ member.description | replace('### Example', '') | replace('## Example', '') | replace('# Example', '') | trimBlankLines | marked $}
{% endif -%}
</div>
<div class="description api-section-content">
{% for member in doc.members %}{% if not member.internal %}
<div class="instance-member">
<a name="{$ member.name $}-anchor" class="anchor-offset"></a>
<pre class="prettyprint no-bg" ng-class="{ 'anchor-focused': appCtrl.isApiDocMemberFocused('{$ member.name $}') }">
<code>{$ member.name $}{$ params.paramList(member.parameters) | trim $}{$ params.returnType(member.returnType) $}</code>
</pre>
{%- if not member.notYetDocumented %}
{$ member.description | replace('### Example', '') | replace('## Example', '') | replace('# Example', '') | trimBlankLines | marked $}
{% endif -%}
</div>
{% if not loop.last %}<hr class="hr-margin">{% endif %}
{% if not loop.last %}<hr class="hr-margin">{% endif %}
{% endif %}{% endfor %}
</div>
</section>
</div>
{% endif %}

6
aio/tools/transforms/templates/includes/_metadata.html
View File

@ -1,7 +1,6 @@
{% if doc.members.length %}
<section class="meta-data">
<div class="meta-data">
<h2>Metadata Properties</h2>
<div class="description">
{% for metadata in doc.members %}{% if not metadata.internal %}
<div class="metadata-member">
<a name="{$ metadata.name $}-anchor" class="anchor-offset"></a>
@ -12,6 +11,5 @@
</div>
{% if not loop.last %}<hr class="hr-margin">{% endif %}
{% endif %}{% endfor %}
</div>
</section>
</div>
{% endif %}

14
aio/tools/transforms/templates/includes/_outputs.html
View File

@ -1,13 +1,11 @@
{% if doc.outputs %}
<section class="outputs">
<div class="outputs">
<h2>Outputs</h2>
<div class="description">
{% for binding, property in doc.outputs %}
<div class="output">
<code>{$ property.bindingName $}</code>&nbsp;bound to&nbsp;<code>{$ property.memberDoc.classDoc.name $}.{$ property.propertyName $}</code>
{$ property.memberDoc.description | trimBlankLines | marked $}
</div>
{% endfor %}
<div class="output">
<code>{$ property.bindingName $}</code>&nbsp;bound to&nbsp;<code>{$ property.memberDoc.classDoc.name $}.{$ property.propertyName $}</code>
{$ property.memberDoc.description | trimBlankLines | marked $}
</div>
</section>
{% endfor %}
</div>
{% endif %}

20
aio/tools/transforms/templates/includes/_selectors.html
View File

@ -1,14 +1,10 @@
{%- if doc.directiveOptions.selector.split(',').length %}
<section class="selectors api-section">
<div class="api-section-header">
<h2>Selectors</h2>
</div>
<div class="api-section-content">
{% for selector in doc.directiveOptions.selector.split(',') %}
<p class="selector">
<code>{$ selector $}</code>
</p>
{% endfor %}
</div>
</section>
<div class="selectors api-section">
<h2>Selectors</h2>
{% for selector in doc.directiveOptions.selector.split(',') %}
<p class="selector">
<code>{$ selector $}</code>
</p>
{% endfor %}
</div>
{% endif %}

8
aio/tools/transforms/templates/includes/_statics.html
View File

@ -1,9 +1,6 @@
{% if doc.statics.length %}
<section class="static-members api-section">
<div class="api-section-header">
<div class="static-members api-section">
<h2>Static Members</h2>
</div>
<div class="api-section-content">
{% for member in doc.statics %}{% if not member.internal %}
<div class="static-member">
<a name="{$ member.name $}-anchor" class="anchor-offset"></a>
@ -20,6 +17,5 @@
{% endif %}
{% endif %}{% endfor %}
</div>
</section>
</div>
{% endif %}