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

feat(aio): api pages styling 

- Banner class code consolidation for API pages
- Set up temporary table of contents class and file
- API pages title styling
- Add color styling to doc-type listed on each API details page
- Classes and SCSS variables refactor
- Mobile optimization on headers, info-banner, and API pages
- API page table custom styling
- API Class Overview template code overview into table format
This commit is contained in:
Stefanie Fluin 2017-04-25 09:33:09 -07:00 committed by Pete Bacon Darwin
parent 35a2dfc177
commit bb52e22ecf
18 changed files with 259 additions and 166 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
aio/src/app/app.component.html
View File

@ -28,6 +28,7 @@
</md-sidenav-container>
<aio-search-results #searchResults></aio-search-results>

2
aio/src/app/embedded/api/api-list.component.html
View File

@ -1,4 +1,4 @@
<div class="l-flex-wrap banner is-plain l-content-small api-filter">
<div class="l-flex-wrap info-banner api-filter">
<div class="form-select-menu">
<button class="form-select-button has-symbol" (click)="toggleTypeMenu()">

11
aio/src/styles/0-base/_typography.scss
View File

@ -58,6 +58,17 @@
margin: 8px 0px;
}
h1, h2 {
@media screen and (max-width: 600px) {
margin: 16px 0;
}
}
h3, h4, h5, h6 {
@media screen and (max-width: 600px) {
margin: 8px 0;
}
}
.mat-tab-body-wrapper h2 {
margin-top: 0;

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

@ -4,4 +4,48 @@
pre {
white-space: pre-line;
}
table.api-table {
min-width: 680px;
tbody {
pre {
white-space: normal;
margin: 4px;
padding: 4px 16px;
}
td, th {
padding: 0;
}
}
}
}
.api-type-label {
border-radius: 4px;
padding: 4px 16px;
background-color: $accentblue;
display: inline;
margin: 0 16px;
@each $name, $symbol in $api-symbols {
&.#{$name} {
background: map-get($symbol, background);
}
}
@media screen and (max-width: 600px) {
display: block;
margin: 8px 0;
}
label {
font-size: 14px;
color: white;
font-weight: 500;
text-transform: uppercase;
}
}

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

@ -11,3 +11,4 @@
@import 'layout-global';
@import 'not-found';
@import 'api-page';
@import 'table-of-contents';

10
aio/src/styles/1-layouts/_table-of-contents.scss Normal file
View File

@ -0,0 +1,10 @@
nav#main-table-of-contents {
width: 200px;
height: 900px;
position: fixed;
right: 0;
top: 50px;
bottom: 100px;
margin-left: 32px;
background-color: $blue;
}

16
aio/src/styles/2-modules/_api-info-bar.scss
View File

@ -1,5 +1,13 @@
.info-bar {
padding: 32px;
border-radius: 4px;
background-color: rgba($blue, 0.1);
.api-info-bar {
max-width: 800px;
text-align: center;
span {
margin: 0 16px;
@media screen and (max-width: 600px) {
display: block;
}
}
}

100
aio/src/styles/2-modules/_api-list.scss
View File

@ -1,8 +1,11 @@
/* API EDIT ICON */
#api {
.info-bar .material-icons {
top: 24px;
.info-banner .material-icons {
right: 48px;
@media screen and (max-width: 600px) {
left: 50px;
}
}
}
@ -18,11 +21,6 @@ aio-api-list {
width: 182px;
}
.api-filter.banner {
border: 1px solid rgba($lightgray, 0.5);
border-radius: 4px;
}
.api-list-container {
display: flex;
flex-direction: column;
@ -33,8 +31,10 @@ aio-api-list {
aio-api-list > div {
display: flex;
margin: 32px auto;
@media (max-width: 600px) {
flex-direction: column;
margin: 16px auto;
}
> div {
@ -45,32 +45,6 @@ aio-api-list > div {
$phone-breakpoint: 480px;
$tablet-breakpoint: 800px;
$layer-1: 1;
$layer-2: 2;
$layer-3: 3;
$layer-4: 4;
$layer-5: 5;
$amber-700: #FFA000;
$blue-400: #42A5F5;
$blue-500: #2196F3;
$blue-600: #1E88E5;
$blue-800: #1565C0;
$blue-grey-50: #ECEFF1;
$blue-grey-100: #CFD8DC;
$blue-grey-500: #607D8B;
$blue-grey-600: #546E7A;
$green-500: #4CAF50;
$green-800: #2E7D32;
$light-green-600: #7CB342;
$pink-600: #D81B60;
$purple-600: #8E24AA;
$teal-500: #009688;
$lightgrey: #F5F6F7;
/* LAYOUT */
.docs-content {
@ -219,51 +193,6 @@ $form-select-width: 200px;
/* API SYMBOLS */
/* VARIABLES */
$api-symbols: (
all: (
content: ' ',
background: $white
),
decorator: (
content: '@',
background: $blue-800
),
directive: (
content: 'D',
background: $pink-600
),
pipe: (
content: 'P',
background: $blue-grey-600
),
class: (
content: 'C',
background: $blue-500
),
interface: (
content: 'I',
background: $teal-500
),
function: (
content: 'F',
background: $green-500
),
enum: (
content: 'E',
background: $amber-700
),
const: (
content: 'K',
background: $purple-600
),
type-alias: (
content: 'T',
background: $light-green-600
)
);
/* SYMBOL CLASS */
.symbol {
@ -278,6 +207,7 @@ $api-symbols: (
width: 16px;
// SYMBOL TYPES
// Symbol mapping variables in *constants*
@each $name, $symbol in $api-symbols {
&.#{$name} {
background: map-get($symbol, background);
@ -311,6 +241,10 @@ $api-symbols: (
padding: 0;
overflow: hidden;
@media screen and (max-width: 600px) {
margin: 0;
}
li {
font-size: 14px;
margin: 0 0 16px 0;
@ -396,16 +330,6 @@ p {
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;

20
aio/src/styles/2-modules/_banner.scss
View File

@ -1,25 +1,19 @@
/* Banner */
/* BANNER */
.banner {
.info-banner {
justify-content: center;
background: $white;
border: 1px solid rgba($lightgray, 0.5);
border-radius: 4px;
box-sizing: border-box;
font-size: 18px;
font-weight: 200;
padding: 16px;
min-height: 97px;
@media (max-width: 480px) {
padding: 16px;
}
&.is-plain {
background: $white;
height: auto;
overflow: visible;
}
@media screen and (max-width: 600px) {
text-align: center;
}
p, .text-body {
color: $darkgray;

13
aio/src/styles/2-modules/_code.scss
View File

@ -114,19 +114,6 @@ aio-code.headed-code {
transform: none;
}
$blue-grey-50: #ECEFF1;
$blue-grey-100: #CFD8DC;
$blue-grey-200: #B0BEC5;
$blue-grey-300: #90A4AE;
$blue-grey-400: #78909C;
$blue-grey-500: #607D8B;
$blue-grey-600: #546E7A;
$blue-grey-700: #455A64;
$blue-grey-800: #37474F;
$blue-grey-900: #263238;
$white: #FFFFFF;
/* SCREEN COLORS */
.pnk,

1
aio/src/styles/2-modules/_hr.scss
View File

@ -8,7 +8,6 @@ hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid $lightgray;
margin-top: 16px;
margin-bottom: 16px;
padding: 0;

78
aio/src/styles/_constants.scss
View File

@ -5,6 +5,13 @@ $unit: 8px;
$main-font: "Roboto","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
$code-font: "Droid Sans Mono", monospace;
// Z-LAYER
$layer-1: 1;
$layer-2: 2;
$layer-3: 3;
$layer-4: 4;
$layer-5: 5;
// COLOR PALETTE
$blue: #1976D2;
$accentblue: #1E88E5;
@ -18,11 +25,78 @@ $mist: #ECEFF1;
$mediumgray: #7E7E7E;
$darkgray: #333;
$black: #0A1014;
$codegreen: #17ff0b;
$green-800: #2E7D32;
$orange: #FF9800;
$anti-pattern: $brightred;
// API & CODE COLORS
$amber-700: #FFA000;
$blue-400: #42A5F5;
$blue-500: #2196F3;
$blue-600: #1E88E5;
$blue-800: #1565C0;
$blue-grey-50: #ECEFF1;
$blue-grey-100: #CFD8DC;
$blue-grey-200: #B0BEC5;
$blue-grey-300: #90A4AE;
$blue-grey-400: #78909C;
$blue-grey-500: #607D8B;
$blue-grey-600: #546E7A;
$blue-grey-700: #455A64;
$blue-grey-800: #37474F;
$blue-grey-900: #263238;
$codegreen: #17ff0b;
$green-500: #4CAF50;
$green-800: #2E7D32;
$light-green-600: #7CB342;
$pink-600: #D81B60;
$purple-600: #8E24AA;
$teal-500: #009688;
$lightgrey: #F5F6F7;
// GRADIENTS
$bluegradient: linear-gradient(145deg,#0D47A1,#42A5F5);
$redgradient: linear-gradient(145deg,$darkred,$brightred);
// API LABEL COLOR AND SYMBOLS MAP
$api-symbols: (
all: (
content: ' ',
background: $white
),
decorator: (
content: '@',
background: $blue-800
),
directive: (
content: 'D',
background: $pink-600
),
pipe: (
content: 'P',
background: $blue-grey-600
),
class: (
content: 'C',
background: $blue-500
),
interface: (
content: 'I',
background: $teal-500
),
function: (
content: 'F',
background: $green-500
),
enum: (
content: 'E',
background: $amber-700
),
const: (
content: 'K',
background: $purple-600
),
type-alias: (
content: 'T',
background: $light-green-600
)
);

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

@ -1,40 +1,76 @@
<section class="class-overview api-section">
<h2>Class Overview</h2>
<h2>Properties and Methods</h2>
<div class="api-doc-code">
<code class="no-bg openParens">class {$ doc.name $} {</code>
<table class="api-table">
<thead>
<tr>
<th>{$ doc.name $} Properties</th>
<th></th>
</tr>
</thead>
<tbody>
<!-- STATISTICS -->
{% 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>
{% for member in doc.statics %}{% if not member.internal %}>
<tr class="statics">
<th>
<pre>
<code><a class="code-anchor" href="#{$ member.name $}-anchor">{$ member.name $}</a></code>
</pre>
</th>
<td>
<pre class="prettyprint">
<code>
{$ params.paramList(member.parameters) | indent(8, false) | trim $}{$ params.returnType(member.returnType) $}
</code></pre>
</code>
</pre>
</td>
</tr>
{% endif %}{% endfor %}
</div>
{% endif %}
<!-- CONSTRUCTOR -->
{% 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>
<tr class="constructor">
<th>
<pre class="prettyprint">
<code><a class="code-anchor" href="#constructor">{$ doc.constructorDoc.name $}</a></code>
</pre>
</th>
<td>
<pre>
<code>{$ params.paramList(member.parameters) | indent(8, false) | trim $}{$ params.returnType(member.returnType) $}</code>
</pre>
</td>
</tr>
{% endif %}
<!-- MEMBERS -->
{% if doc.members.length %}
<div class="members">
{% for member in doc.members %}{% if not member.internal %}
<pre class="prettyprint no-bg-with-indent"><code>
<tr class="members">
<th>
<pre class="prettyprint">
<code>
<a class="code-anchor" href="#{$ member.name $}-anchor">{$ member.name | indent(6, false) | trim $}</a>
</code>
</pre>
</th>
<td>
<pre>
<code>
{$ params.paramList(member.parameters) | indent(8, false) | trim $}{$ params.returnType(member.returnType) $}
</code></pre>
</code>
</pre>
</td>
</tr>
{% endif %}{% endfor %}
{% endif %}
</tbody>
</table>
<code class="endParens api-doc-code no-bg">}</code>
</div>
</section>

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

@ -1,4 +1,4 @@
<div class="api-section">
<div class="description 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 $}

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

@ -1,16 +1,16 @@
{% import "lib/githubLinks.html" as github -%}
<!-- INFO BAR -->
<div class="info-bar">
<span class="info-bar-item is-left">
<div class="info-banner api-info-bar">
<span class="info-bar-item">
npm package: <a href="#">{$ doc.package $}</a>
</span>
<span class="info-bar-item is-left">
<span class="info-bar-item">
NgModule: <a href="#">{$ doc.moduleDoc.name $}</a>
</span>
<span class="info-bar-item is-right">
<span class="info-bar-item">
{$ github.githubViewLink(doc, versionInfo) $}
</span>
</div>

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

@ -1,4 +1,6 @@
{% if doc.members.length %}
<!-- **** This is being duplicated - already in class overview content **** -->
<!--{% if doc.members.length %}
<div class="instance-members api-section">
<h2>Class Details</h2>
{% for member in doc.members %}{% if not member.internal %}
@ -14,4 +16,4 @@
{% if not loop.last %}<hr class="hr-margin">{% endif %}
{% endif %}{% endfor %}
</div>
{% endif %}
{% endif %}-->

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

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