honeymoose/angular-cn
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(aio): api page styles

Browse Source 
Changed description from h3 to h2 to match the other header
Created api page classes for consistent styling
Add styles for info-bar section
Wrapped pre tags for code not to go off of screen
This commit is contained in:
Stefanie Fluin 2017-04-20 12:20:27 -07:00 committed by Pete Bacon Darwin
parent b0c5d21f31
commit cf034f759a
17 changed files with 135 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
aio/src/styles/1-layouts/_api-page.scss Normal file
View File

@ -0,0 +1,42 @@
.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;
}
}

3
aio/src/styles/1-layouts/_layouts-dir.scss
View File

@ -9,4 +9,5 @@
@import 'marketing-layout';
@import 'footer';
@import 'layout-global';
@import 'not-found';
@import 'not-found';
@import 'api-page';

5
aio/src/styles/2-modules/_api-info-bar.scss Normal file
View File

@ -0,0 +1,5 @@
.info-bar {
padding: 32px;
border-radius: 4px;
background-color: rgba($blue, 0.1);
}

3
aio/src/styles/2-modules/_modules-dir.scss
View File

@ -24,4 +24,5 @@
@import 'callout';
@import 'resources';
@import 'edit-page-cta';
@import 'heading-anchors';
@import 'heading-anchors';
@import 'api-info-bar';

2
aio/tools/transforms/templates/class.template.html
View File

@ -2,6 +2,7 @@
{% extends 'layout/api-base.template.html' -%}
{% block details %}
<div class="api-container">
{% include "includes/_class-overview.html" %}
{% block additional %}{% endblock %}
{% include "includes/_description.html" %}
@ -9,4 +10,5 @@
{% include "includes/_constructor.html" %}
{% include "includes/_statics.html" %}
{% include "includes/_members.html" %}
</div>
{% endblock %}

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

@ -1,7 +1,9 @@
{%- if doc.decorators.length %}
<section class="annotations">
<h2>Annotations</h2>
<div class="annotation">
<section class="annotations api-section">
<div class="api-section-header">
<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>

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

@ -1,40 +1,44 @@
<section class="class-overview">
<h2>Class Overview</h2>
<div class="api-doc-code">
<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>
<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.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 $}
</code></pre>
</div>
{% endif %}
{% if doc.members.length %}
<div class="members">
{% for member in doc.members %}{% if not member.internal %}
{% if doc.constructorDoc.name %}
<div class="constructor">
<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) $}
<a class="code-anchor" href="#constructor">{$ doc.constructorDoc.name $}</a>
{$ params.paramList(doc.constructorDoc.parameters) | indent(8, false) | trim $}
</code></pre>
{% endif %}{% endfor %}
{% endif %}
</div>
{% endif %}
<code class="endParens api-doc-code no-bg">}</code>
{% 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>
</div>
</section>

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

@ -1,7 +1,9 @@
{%- if doc.constructorDoc and not doc.constructorDoc.internal %}
<section class="constructor">
<h2>Constructor</h2>
<div class="description">
<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>

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

@ -1,9 +1,10 @@
<section class="l-content-block">
<h3 class="text-display-1" id="api-description">
Description
<a href="#api-description" class="header-link"><i class="material-icons">link</i></a>
</h3>
<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">
{%- if doc.description.length > 2 %}
{$ doc.description | trimBlankLines | marked $}
{% endif %}
</div>
</section>

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

@ -1,7 +1,9 @@
{%- if doc.directiveOptions.exportAs %}
<section class="export-as">
<h2>Exported as</h2>
<div class="description">
<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>

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

@ -1,8 +1,10 @@
{%- if doc.howToUse %}
<!-- QUICK REFERENCE CODE EXAMPLE -->
<section class="how-to-use">
<h2>How To Use</h2>
<div class="description">
<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>

2
aio/tools/transforms/templates/includes/_info-bar.html
View File

@ -13,6 +13,4 @@
<span class="info-bar-item is-right">
{$ github.githubViewLink(doc, versionInfo) $}
</span>
<i class="material-icons l-right">create</i>
</div>

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

@ -1,7 +1,9 @@
{% if doc.inputs %}
<section class="inputs">
<h2>Inputs</h2>
<div class="description">
<section class="inputs api-section">
<div class="api-section-header">
<h2>Inputs</h2>
</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>

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

@ -1,7 +1,9 @@
{% if doc.members.length %}
<section class="instance-members">
<h2>Class Details</h2>
<div class="description">
<section class="instance-members api-section">
<div class="api-section-header">
<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>

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

@ -1,7 +1,9 @@
{%- if doc.directiveOptions.selector.split(',').length %}
<section class="selectors">
<h2>Selectors</h2>
<div class="description">
<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>

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

@ -1,7 +1,9 @@
{% if doc.statics.length %}
<section class="static-members">
<h2>Static Members</h2>
<div class="description">
<section class="static-members api-section">
<div class="api-section-header">
<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>

2
aio/tools/transforms/templates/includes/_title.html
View File

@ -1,5 +1,5 @@
<!-- PAGE HERO -->
<header>
<header class="api-header">
<h1>{$ doc.name $}</h1>
<h2>{$ doc.docType $}</h2>
<span class="version">{$ angular.version $}</span>