cargdev/angular
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 'marketing-layout';
@import 'footer'; @import 'footer';
@import 'layout-global'; @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 'callout';
@import 'resources'; @import 'resources';
@import 'edit-page-cta'; @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' -%} {% extends 'layout/api-base.template.html' -%}
{% block details %} {% block details %}
<div class="api-container">
{% include "includes/_class-overview.html" %} {% include "includes/_class-overview.html" %}
{% block additional %}{% endblock %} {% block additional %}{% endblock %}
{% include "includes/_description.html" %} {% include "includes/_description.html" %}
@ -9,4 +10,5 @@
{% include "includes/_constructor.html" %} {% include "includes/_constructor.html" %}
{% include "includes/_statics.html" %} {% include "includes/_statics.html" %}
{% include "includes/_members.html" %} {% include "includes/_members.html" %}
</div>
{% endblock %} {% endblock %}

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

@ -1,7 +1,9 @@
{%- if doc.decorators.length %} {%- if doc.decorators.length %}
<section class="annotations"> <section class="annotations api-section">
<h2>Annotations</h2> <div class="api-section-header">
<div class="annotation"> <h2>Annotations</h2>
</div>
<div class="annotation api-section-content">
{%- for decorator in doc.decorators %} {%- for decorator in doc.decorators %}
<pre class="prettyprint no-bg"> <pre class="prettyprint no-bg">
<code>@{$ decorator.name $}{$ params.paramList(decorator.arguments) | indent(10, false) $}</code> <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"> <section class="class-overview api-section">
<h2>Class Overview</h2> <div class="api-section-header">
<div class="api-doc-code"> <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 %} {% if doc.statics.length %}
<div class="statics"> <div class="statics">
{% for member in doc.statics %}{% if not member.internal %} {% for member in doc.statics %}{% if not member.internal %}
<pre class="prettyprint no-bg-with-indent"><code>static <pre class="prettyprint no-bg-with-indent"><code>static
<a class="code-anchor" href="#{$ member.name $}-anchor">{$ member.name | indent(6, false) | trim $}</a> <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) $} {$ params.paramList(member.parameters) | indent(8, false) | trim $}{$ params.returnType(member.returnType) $}
</code></pre> </code></pre>
{% endif %}{% endfor %} {% endif %}{% endfor %}
</div> </div>
{% endif %} {% endif %}
{% if doc.constructorDoc.name %} {% if doc.constructorDoc.name %}
<div class="constructor"> <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> <pre class="prettyprint no-bg-with-indent"><code>
<a class="code-anchor" href="#{$ member.name $}-anchor">{$ member.name | indent(6, false) | trim $}</a> <a class="code-anchor" href="#constructor">{$ doc.constructorDoc.name $}</a>
{$ params.paramList(member.parameters) | indent(8, false) | trim $}{$ params.returnType(member.returnType) $} {$ params.paramList(doc.constructorDoc.parameters) | indent(8, false) | trim $}
</code></pre> </code></pre>
{% endif %}{% endfor %} </div>
{% endif %} {% 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> </div>
</section> </section>

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

@ -1,7 +1,9 @@
{%- if doc.constructorDoc and not doc.constructorDoc.internal %} {%- if doc.constructorDoc and not doc.constructorDoc.internal %}
<section class="constructor"> <section class="constructor api-section">
<h2>Constructor</h2> <div class="api-section-header">
<div class="description"> <h2>Constructor</h2>
</div>
<div class="description api-section-content">
<a name="constructor" class="anchor-offset"></a> <a name="constructor" class="anchor-offset"></a>
<pre class="prettyprint no-bg" ng-class="{ 'anchor-focused': appCtrl.isApiDocMemberFocused('{$ doc.constructorDoc.name $}') }"> <pre class="prettyprint no-bg" ng-class="{ 'anchor-focused': appCtrl.isApiDocMemberFocused('{$ doc.constructorDoc.name $}') }">
<code> <code>

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

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

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

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

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

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

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

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

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

@ -1,7 +1,9 @@
{% if doc.inputs %} {% if doc.inputs %}
<section class="inputs"> <section class="inputs api-section">
<h2>Inputs</h2> <div class="api-section-header">
<div class="description"> <h2>Inputs</h2>
</div>
<div class="api-section-content">
{% for binding, property in doc.inputs %} {% for binding, property in doc.inputs %}
<div class="input"> <div class="input">
<code>{$ property.bindingName $}</code>&nbsp;bound to&nbsp;<code>{$ property.memberDoc.classDoc.name $}.{$ property.propertyName $}</code> <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 %} {% if doc.members.length %}
<section class="instance-members"> <section class="instance-members api-section">
<h2>Class Details</h2> <div class="api-section-header">
<div class="description"> <h2>Class Details</h2>
</div>
<div class="description api-section-content">
{% for member in doc.members %}{% if not member.internal %} {% for member in doc.members %}{% if not member.internal %}
<div class="instance-member"> <div class="instance-member">
<a name="{$ member.name $}-anchor" class="anchor-offset"></a> <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 %} {%- if doc.directiveOptions.selector.split(',').length %}
<section class="selectors"> <section class="selectors api-section">
<h2>Selectors</h2> <div class="api-section-header">
<div class="description"> <h2>Selectors</h2>
</div>
<div class="api-section-content">
{% for selector in doc.directiveOptions.selector.split(',') %} {% for selector in doc.directiveOptions.selector.split(',') %}
<p class="selector"> <p class="selector">
<code>{$ selector $}</code> <code>{$ selector $}</code>

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

@ -1,7 +1,9 @@
{% if doc.statics.length %} {% if doc.statics.length %}
<section class="static-members"> <section class="static-members api-section">
<h2>Static Members</h2> <div class="api-section-header">
<div class="description"> <h2>Static Members</h2>
</div>
<div class="api-section-content">
{% for member in doc.statics %}{% if not member.internal %} {% for member in doc.statics %}{% if not member.internal %}
<div class="static-member"> <div class="static-member">
<a name="{$ member.name $}-anchor" class="anchor-offset"></a> <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 --> <!-- PAGE HERO -->
<header> <header class="api-header">
<h1>{$ doc.name $}</h1> <h1>{$ doc.name $}</h1>
<h2>{$ doc.docType $}</h2> <h2>{$ doc.docType $}</h2>
<span class="version">{$ angular.version $}</span> <span class="version">{$ angular.version $}</span>