feat(aio): api page column layout
This commit is contained in:
Stefanie Fluin
Pete Bacon Darwin
parent
249cd8c2ec
commit
64ef69fb34
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,9 +1,6 @@
|
|||
{%- 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>
|
||||
|
|
@ -11,5 +8,4 @@
|
|||
{%- if not decorator.notYetDocumented %}{$ decorator.description | marked $}{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</section>
|
||||
{% endif %}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,5 @@
|
|||
<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">
|
||||
|
||||
<code class="no-bg openParens">class {$ doc.name $} {</code>
|
||||
|
|
@ -40,5 +37,4 @@
|
|||
|
||||
<code class="endParens api-doc-code no-bg">}</code>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -1,9 +1,6 @@
|
|||
{%- if doc.constructorDoc and not doc.constructorDoc.internal %}
|
||||
<section class="constructor api-section">
|
||||
<div class="api-section-header">
|
||||
<div class="constructor api-section">
|
||||
<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>
|
||||
|
|
@ -14,5 +11,4 @@
|
|||
{$ doc.constructorDoc.description | replace('### Example', '') | replace('## Example', '') | replace('# Example', '') | trimBlankLines | marked $}
|
||||
{% endif %}
|
||||
</div>
|
||||
</section>
|
||||
{% endif %}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,6 @@
|
|||
<section class="api-section">
|
||||
<div class="api-section-header">
|
||||
<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>
|
||||
</div>
|
||||
<div class="api-section-content">
|
||||
{%- if doc.description.length > 2 %}
|
||||
{$ doc.description | trimBlankLines | marked $}
|
||||
{% endif %}
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,8 @@
|
|||
{%- if doc.directiveOptions.exportAs %}
|
||||
<section class="export-as api-section">
|
||||
<div class="api-section-header">
|
||||
<div class="export-as api-section">
|
||||
<h2>Exported as</h2>
|
||||
</div>
|
||||
<div class="api-section-content">
|
||||
<p>
|
||||
<code>{$ doc.directiveOptions.exportAs $}</code>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
{% endif %}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,7 @@
|
|||
{%- if doc.howToUse %}
|
||||
<!-- QUICK REFERENCE CODE EXAMPLE -->
|
||||
<section class="how-to-use api-section">
|
||||
<div class="api-section-header">
|
||||
<div class="how-to-use api-section">
|
||||
<h2>How To Use</h2>
|
||||
</div>
|
||||
<div class="api-section-content">
|
||||
{$ doc.howToUse | marked $}
|
||||
</div>
|
||||
</section>
|
||||
{% endif %}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,6 @@
|
|||
{% if doc.inputs %}
|
||||
<section class="inputs api-section">
|
||||
<div class="api-section-header">
|
||||
<div class="inputs api-section">
|
||||
<h2>Inputs</h2>
|
||||
</div>
|
||||
<div class="api-section-content">
|
||||
{% for binding, property in doc.inputs %}
|
||||
<div class="input">
|
||||
<code>{$ property.bindingName $}</code> bound to <code>{$ property.memberDoc.classDoc.name $}.{$ property.propertyName $}</code>
|
||||
|
|
@ -11,5 +8,4 @@
|
|||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</section>
|
||||
{% endif %}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -1,9 +1,6 @@
|
|||
{% if doc.members.length %}
|
||||
<section class="instance-members api-section">
|
||||
<div class="api-section-header">
|
||||
<div class="instance-members api-section">
|
||||
<h2>Class Details</h2>
|
||||
</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>
|
||||
|
|
@ -17,5 +14,4 @@
|
|||
{% if not loop.last %}<hr class="hr-margin">{% endif %}
|
||||
{% endif %}{% endfor %}
|
||||
</div>
|
||||
</section>
|
||||
{% endif %}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -13,5 +12,4 @@
|
|||
{% if not loop.last %}<hr class="hr-margin">{% endif %}
|
||||
{% endif %}{% endfor %}
|
||||
</div>
|
||||
</section>
|
||||
{% endif %}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
{% 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> bound to <code>{$ property.memberDoc.classDoc.name $}.{$ property.propertyName $}</code>
|
||||
|
|
@ -9,5 +8,4 @@
|
|||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</section>
|
||||
{% endif %}
|
||||
|
|
|
|||
|
|
@ -1,14 +1,10 @@
|
|||
{%- if doc.directiveOptions.selector.split(',').length %}
|
||||
<section class="selectors api-section">
|
||||
<div class="api-section-header">
|
||||
<div class="selectors api-section">
|
||||
<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>
|
||||
{% endif %}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -21,5 +18,4 @@
|
|||
|
||||
{% endif %}{% endfor %}
|
||||
</div>
|
||||
</section>
|
||||
{% endif %}
|
||||
|
|
|
|||
Loading…
Reference in New Issue