build(docs-infra): improve API overload templates (#24976)
PR Close #24976
This commit is contained in:
Stefanie Fluin
Kara Erickson
parent
28104828d5
commit
4d4e85b708
@ -1,5 +1,4 @@
|
||||
.api-body {
|
||||
|
||||
max-width: 1200px;
|
||||
|
||||
table {
|
||||
@ -19,6 +18,12 @@
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
tbody > tr > td tr td:first-child {
|
||||
@media screen and (max-width: 480px) {
|
||||
background-color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
margin: 16px 0;
|
||||
}
|
||||
@ -42,5 +47,208 @@
|
||||
.short-description {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
&.parameters-table {
|
||||
margin-top: 0;
|
||||
font-size: 14px;
|
||||
box-shadow: none;
|
||||
|
||||
tr {
|
||||
@media screen and (max-width: 480px) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
td:first-child {
|
||||
font-weight: 600;
|
||||
padding-left: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 8px 8px 8px 0;
|
||||
border: 0;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
td:nth-child(1) {
|
||||
width: 20%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.class-overview {
|
||||
position: relative;
|
||||
|
||||
code-example {
|
||||
clear: left;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-action-header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.method-table th {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.method-table, .option-table {
|
||||
th {
|
||||
|
||||
.action-icons {
|
||||
a {
|
||||
color: $mediumgray;
|
||||
|
||||
.material-icons:hover {
|
||||
background: none;
|
||||
color: $blue;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 6px 0;
|
||||
font-weight: bold;
|
||||
clear: left;
|
||||
}
|
||||
}
|
||||
|
||||
.api-heading {
|
||||
padding: 5px 0;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.short-description {
|
||||
margin: 6px 0 0 10px;
|
||||
}
|
||||
|
||||
.properties-table {
|
||||
font-size: 14px;
|
||||
|
||||
thead th {
|
||||
&:nth-child(1) {
|
||||
width: 20%;
|
||||
}
|
||||
&:nth-child(2) {
|
||||
width: 20%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
details.overloads {
|
||||
box-shadow: none;
|
||||
|
||||
.icon-action-header a {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.detail-contents {
|
||||
padding: 0;
|
||||
border: 1px solid $lightgray;
|
||||
border-radius: 2px;
|
||||
box-shadow: none;
|
||||
|
||||
> *:not(hr) {
|
||||
margin: 16px 24px;
|
||||
}
|
||||
}
|
||||
|
||||
summary {
|
||||
height: inherit;
|
||||
padding: 0 8px 8px;
|
||||
|
||||
h4 {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.from-constructor, .read-only-property {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.5px;
|
||||
font-style: italic;
|
||||
background-color: $lightgray;
|
||||
border-radius: 4px;
|
||||
padding: 4px 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.breadcrumb-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.github-links {
|
||||
.material-icons {
|
||||
border-radius: 4px;
|
||||
padding: 4px;
|
||||
font-size: 20px;
|
||||
&:hover {
|
||||
background-color: $mist;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.api-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin-top: -4px;
|
||||
}
|
||||
}
|
||||
|
||||
// ____________________________________________
|
||||
|
||||
/*
|
||||
* General styling to make detail/summary tags look a bit more material
|
||||
* To get the best out of it you should structure your usage like this:
|
||||
*
|
||||
* ```
|
||||
* <details>
|
||||
* <summary>Some title</summary>
|
||||
* <div class="details-content">
|
||||
* Some content
|
||||
* </div>
|
||||
* </details>
|
||||
*
|
||||
*/
|
||||
|
||||
summary {
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
position: relative;
|
||||
padding: 16px 24px;
|
||||
color: $black;
|
||||
height: 16px;
|
||||
display: block; // Remove the built in details marker in FF
|
||||
|
||||
&::-webkit-details-marker {
|
||||
display: none; // Remove the built in details marker in webkit
|
||||
}
|
||||
}
|
||||
|
||||
details {
|
||||
box-shadow: 0 1px 4px 0 rgba($black, 0.37);
|
||||
|
||||
.detail-contents {
|
||||
padding: 16px 24px;
|
||||
}
|
||||
|
||||
&[open] > i.material-icons {
|
||||
@include rotate(180deg); // Rotate the icon
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,48 +0,0 @@
|
||||
/*
|
||||
* General styling to make detail/summary tags look a bit more material
|
||||
* To get the best out of it you should structure your usage like this:
|
||||
*
|
||||
* ```
|
||||
* <details>
|
||||
* <summary>Some title</summary>
|
||||
* <div class="details-content">
|
||||
* Some content
|
||||
* </div>
|
||||
* </details>
|
||||
*
|
||||
*/
|
||||
|
||||
summary {
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
position: relative;
|
||||
padding: 16px 24px;
|
||||
color: $black;
|
||||
height: 16px;
|
||||
display: block; // Remove the built in details marker in FF
|
||||
|
||||
&::-webkit-details-marker {
|
||||
display: none; // Remove the built in details marker in webkit
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: '\E5CE'; // See https://material.io/icons/#ic_expand_less
|
||||
font-family: 'Material Icons';
|
||||
font-size: 24px;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
@include rotate(0deg); // We will rotate 180 degrees when details is open
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
details {
|
||||
box-shadow: 0 1px 4px 0 rgba($black, 0.37);
|
||||
|
||||
.detail-contents {
|
||||
padding: 16px 24px;
|
||||
}
|
||||
|
||||
&[open] > summary::before {
|
||||
@include rotate(180deg); // Rotate the icon
|
||||
}
|
||||
}
|
||||
@ -3,12 +3,3 @@ hr {
|
||||
background: $lightgray;
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
.hr-margin {
|
||||
display: block;
|
||||
height: 1px;
|
||||
border: 0;
|
||||
margin-top: 16px;
|
||||
margin-bottom: 16px;
|
||||
padding: 0;
|
||||
}
|
||||
@ -3,7 +3,6 @@
|
||||
============================== */
|
||||
|
||||
@import 'alert';
|
||||
@import 'api-pages';
|
||||
@import 'api-list';
|
||||
@import 'buttons';
|
||||
@import 'callout';
|
||||
@ -12,7 +11,6 @@
|
||||
@import 'code';
|
||||
@import 'contribute';
|
||||
@import 'contributor';
|
||||
@import 'details';
|
||||
@import 'edit-page-cta';
|
||||
@import 'features';
|
||||
@import 'filetree';
|
||||
|
||||
@ -2,19 +2,21 @@
|
||||
{% set comma = joiner(',') %}
|
||||
{% set breadcrumbDelimiter = joiner('>') %}
|
||||
<article>
|
||||
{$ github.githubLinks(doc, versionInfo) $}
|
||||
<div class="breadcrumb">
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
"@context": "http://schema.org",
|
||||
"@type": "BreadcrumbList",
|
||||
"itemListElement": [
|
||||
{%- for crumb in doc.breadCrumbs %}{$ comma() $}
|
||||
{ "@type": "ListItem", "position": {$ loop.index $}, "item": { "@id": "https://angular.io/{$ crumb.path $}", "name": "{$ crumb.text $}" } }{% endfor %}
|
||||
]
|
||||
}
|
||||
</script>
|
||||
{% for crumb in doc.breadCrumbs %}{% if not loop.last %} {$ breadcrumbDelimiter() $} {% if crumb.path %}<a href="{$ crumb.path $}">{$ crumb.text $}</a>{% else %}{$ crumb.text $}{% endif %}{% endif %}{% endfor %}
|
||||
<div class="breadcrumb-container">
|
||||
<div class="breadcrumb">
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
"@context": "http://schema.org",
|
||||
"@type": "BreadcrumbList",
|
||||
"itemListElement": [
|
||||
{%- for crumb in doc.breadCrumbs %}{$ comma() $}
|
||||
{ "@type": "ListItem", "position": {$ loop.index $}, "item": { "@id": "https://angular.io/{$ crumb.path $}", "name": "{$ crumb.text $}" } }{% endfor %}
|
||||
]
|
||||
}
|
||||
</script>
|
||||
{% for crumb in doc.breadCrumbs %}{% if not loop.last %} {$ breadcrumbDelimiter() $} {% if crumb.path %}<a href="{$ crumb.path $}">{$ crumb.text $}</a>{% else %}{$ crumb.text $}{% endif %}{% endif %}{% endfor %}
|
||||
</div>
|
||||
{$ github.githubLinks(doc, versionInfo) $}
|
||||
</div>
|
||||
{% block header %}
|
||||
<header class="api-header">
|
||||
|
||||
@ -53,17 +53,17 @@
|
||||
{$ ('**Deprecated** ' + overload.deprecated) | marked $}
|
||||
</div>{% endif %}
|
||||
|
||||
<h4 class="no-anchor">Parameters</h4>
|
||||
<h6 class="no-anchor">Parameters</h6>
|
||||
{$ params.renderParameters(overload.parameterDocs, cssClass + '-parameters', cssClass + '-parameter') $}
|
||||
|
||||
{% if overload.type or overload.returns.type %}
|
||||
<h4 class="no-anchor">Returns</h4>
|
||||
<h6 class="no-anchor">Returns</h6>
|
||||
{% marked %}`{$ (overload.type or overload.returns.type) $}`{% if overload.returns %}: {$ overload.returns.description $}{% endif %}{% endmarked %}
|
||||
{% endif %}
|
||||
|
||||
|
||||
{% if overload.throws.length %}
|
||||
<h4 class="no-anchor">Throws</h4>
|
||||
<h6 class="no-anchor">Throws</h6>
|
||||
{% for error in overload.throws %}
|
||||
{% marked %}`{$ (error.typeList or 'Error') $}` {$ error.description $}{% endmarked %}
|
||||
{% endfor %}
|
||||
@ -79,15 +79,15 @@
|
||||
{%- macro renderMethodDetail(versionInfo, method, cssClass) -%}
|
||||
<a id="{$ method.anchor $}"></a>
|
||||
<table class="is-full-width method-table {$ cssClass $}">
|
||||
{% if method.name !== 'constructor' %}<thead><tr><th>
|
||||
{% if method.name !== 'constructor' %}<thead><tr><th class="icon-action-header">
|
||||
<div class="with-github-links">
|
||||
<h3>
|
||||
{% if method.isCallMember %}<i>call signature</i>
|
||||
{% elseif method.isNewMember %}<i>construct signature</i>
|
||||
{% else %}{$ method.name $}()
|
||||
{% endif %}
|
||||
</h3>
|
||||
{$ github.githubLinks(method, versionInfo) $}
|
||||
<h3>
|
||||
{% if method.isCallMember %}<i>call signature</i>
|
||||
{% elseif method.isNewMember %}<i>construct signature</i>
|
||||
{% else %}{$ method.name $}()
|
||||
{% endif %}
|
||||
</h3>
|
||||
{$ github.githubLinks(method, versionInfo) $}
|
||||
</div>
|
||||
</th></tr></thead>{% endif %}
|
||||
<tbody>
|
||||
@ -121,16 +121,26 @@
|
||||
<tr>
|
||||
<td>
|
||||
<details class="overloads">
|
||||
<summary><h4 class="no-anchor">{$ method.overloads.length $} overloads...</h4></summary>
|
||||
<summary>
|
||||
<div class="icon-action-header">
|
||||
<h4 class="no-anchor">Overloads</h4>
|
||||
<a>Show All <i class="material-icons">expand_more</i></a>
|
||||
</div>
|
||||
</summary>
|
||||
<div class="detail-contents">
|
||||
{% if method.isAbstract %}
|
||||
{$ renderOverloadInfo(method, cssClass + '-overload', method) $}
|
||||
<hr class="hr-margin fullwidth">
|
||||
{% endif %}
|
||||
{% for overload in method.overloads %}
|
||||
{% if method.isAbstract %}
|
||||
{$ renderOverloadInfo(method, cssClass + '-overload', method) $}
|
||||
<hr class="hr-margin fullwidth">
|
||||
{% endif %}
|
||||
{% for overload in method.overloads %}
|
||||
<div>
|
||||
<h5 class="icon-action-header no-anchor">
|
||||
<span>Overload #_ of {$ method.overloads.length $}</span>
|
||||
<i class="material-icons">expand_more</i></h5>
|
||||
{$ renderOverloadInfo(overload, cssClass + '-overload', method) $}
|
||||
{% if not loop.last %}<hr class="hr-margin fullwidth">{% endif %}
|
||||
{% if not loop.last %}<hr class="hr-margin">{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
</td>
|
||||
|
||||
@ -17,12 +17,17 @@
|
||||
<tbody>
|
||||
{% for parameter in parameters %}
|
||||
<tr class="{$ parameterClass $}">
|
||||
<td class="param-name"><a id="{$ parameter.anchor $}"></a>{$ parameter.name $}</td>
|
||||
<td class="param-name">
|
||||
<a id="{$ parameter.anchor $}"></a>
|
||||
<code>{$ parameter.name $}</code>
|
||||
</td>
|
||||
<td class="param-type">
|
||||
<a><span><code>{$ parameter.type $}</code></span></a>
|
||||
</td>
|
||||
{% if showType %}<td class="param-type"><code>{$ parameter.type $}</code></td>{% endif %}
|
||||
<td class="param-description">
|
||||
{% marked %}
|
||||
{% if (parameter.shortDescription | trim) or (parameter.description | trim) %}{$ parameter.shortDescription + '\n\n' + parameter.description $}
|
||||
{% elseif not showType and parameter.type %}<p>Type: <code>{$ parameter.type $}</code>.</p>
|
||||
{% endif %}
|
||||
|
||||
{% if parameter.isOptional or parameter.defaultValue !== undefined %}Optional. Default is `{$ parameter.defaultValue === undefined and 'undefined' or parameter.defaultValue $}`.{% endif %}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user