fix(docs-infra): update overload rendering (#24976)
Based on the review here: https://github.com/angular/angular/pull/24976#issuecomment-415535125 PR Close #24976
This commit is contained in:
Pete Bacon Darwin
Kara Erickson
parent
03417df54e
commit
18b6d580c5
|
|
@ -123,7 +123,7 @@ td {
|
|||
padding: 8px 30px;
|
||||
letter-spacing: 0.30px;
|
||||
|
||||
p {
|
||||
p:first-child, p:last-child {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,280 +0,0 @@
|
|||
.api-body {
|
||||
max-width: 1200px;
|
||||
|
||||
table {
|
||||
margin: 12px 0 24px;
|
||||
|
||||
th {
|
||||
text-transform: none;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
tr {
|
||||
border-bottom: 1px solid $lightgray;
|
||||
}
|
||||
|
||||
td {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
tbody > tr > td tr td:first-child {
|
||||
@media screen and (max-width: 480px) {
|
||||
background-color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
tr:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
&.item-table {
|
||||
td {
|
||||
padding: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
&.list-table {
|
||||
td {
|
||||
padding: 16px 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.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 0 8px;
|
||||
|
||||
h4 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.show-all {
|
||||
display: initial;
|
||||
}
|
||||
.collapse-all {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&[open] > summary {
|
||||
.show-all {
|
||||
display: none;
|
||||
}
|
||||
.collapse-all {
|
||||
display: initial;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
details.overload {
|
||||
box-shadow: none;
|
||||
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;
|
||||
}
|
||||
|
||||
// Rotate the icon
|
||||
summary i.material-icons.expand {
|
||||
@include rotate(0deg);
|
||||
}
|
||||
&[open] > summary i.material-icons.expand {
|
||||
@include rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
|
@ -2,7 +2,6 @@
|
|||
LAYOUT STYLES
|
||||
============================== */
|
||||
|
||||
@import 'api-pages';
|
||||
@import 'content-layout';
|
||||
@import 'doc-viewer';
|
||||
@import 'footer';
|
||||
|
|
|
|||
|
|
@ -1,13 +1,111 @@
|
|||
.github-links {
|
||||
float: right;
|
||||
.material-icons {
|
||||
border-radius: 4px;
|
||||
padding: 4px;
|
||||
font-size: 20px;
|
||||
&:hover {
|
||||
background-color: $mist;
|
||||
.api-body {
|
||||
max-width: 1200px;
|
||||
|
||||
table {
|
||||
margin: 12px 0 24px;
|
||||
|
||||
th {
|
||||
text-transform: none;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
tr {
|
||||
border-bottom: 1px solid $lightgray;
|
||||
}
|
||||
|
||||
td {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
// This is overriding a style here:
|
||||
// https://github.com/angular/angular/blob/95993e1/aio/src/styles/2-modules/_table.scss#L58-L62
|
||||
tbody > tr > td tr td:first-child {
|
||||
@media screen and (max-width: 480px) {
|
||||
background-color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
tr:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
&.item-table {
|
||||
td {
|
||||
padding: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
&.list-table {
|
||||
td {
|
||||
padding: 16px 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
width: 20%;
|
||||
}
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 8px 8px 8px 0;
|
||||
border: 0;
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.class-overview {
|
||||
position: relative;
|
||||
|
||||
code-example {
|
||||
clear: left;
|
||||
}
|
||||
}
|
||||
|
||||
.short-description {
|
||||
margin: 6px 0 0 10px;
|
||||
}
|
||||
|
||||
.properties-table {
|
||||
font-size: 14px;
|
||||
|
||||
thead th {
|
||||
&:nth-child(1) {
|
||||
width: 20%;
|
||||
}
|
||||
&:nth-child(2) {
|
||||
width: 20%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.breadcrumb-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.api-header {
|
||||
|
|
@ -18,6 +116,22 @@
|
|||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin-top: -4px;
|
||||
}
|
||||
}
|
||||
|
||||
.github-links {
|
||||
float: right;
|
||||
.material-icons {
|
||||
border-radius: 4px;
|
||||
padding: 4px;
|
||||
font-size: 20px;
|
||||
&:hover {
|
||||
background-color: $mist;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.api-body {
|
||||
|
|
@ -65,10 +179,10 @@
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
.api-heading {
|
||||
padding: 5px 0;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.parameters-table {
|
||||
|
|
@ -80,21 +194,71 @@
|
|||
}
|
||||
|
||||
details.overloads {
|
||||
margin-left: -8px;
|
||||
box-shadow: none;
|
||||
|
||||
.icon-action-header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
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: 8px 12px;
|
||||
padding: 0;
|
||||
|
||||
h4 {
|
||||
margin: 0;
|
||||
clear: left;
|
||||
}
|
||||
|
||||
.show-all {
|
||||
display: initial;
|
||||
}
|
||||
.collapse-all {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&[open] > summary {
|
||||
.show-all {
|
||||
display: none;
|
||||
}
|
||||
.collapse-all {
|
||||
display: initial;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
details.overload {
|
||||
box-shadow: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
.from-constructor, .read-only-property, .write-only-property {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.5px;
|
||||
font-style: italic;
|
||||
color: $blue;
|
||||
background-color: $lightgray;
|
||||
border-radius: 4px;
|
||||
padding: 4px 6px;
|
||||
}
|
||||
|
||||
.ngmodule-list {
|
||||
|
|
@ -120,10 +284,6 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.member-name {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.deprecated-api-item {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,45 @@
|
|||
/*
|
||||
* 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
|
||||
}
|
||||
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
details {
|
||||
box-shadow: 0 1px 4px 0 rgba($black, 0.37);
|
||||
|
||||
.detail-contents {
|
||||
padding: 16px 24px;
|
||||
}
|
||||
|
||||
// Rotate the icon
|
||||
summary i.material-icons.expand {
|
||||
@include rotate(0deg);
|
||||
}
|
||||
&[open] > summary i.material-icons.expand {
|
||||
@include rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
|
@ -4,6 +4,7 @@
|
|||
|
||||
@import 'alert';
|
||||
@import 'api-list';
|
||||
@import 'api-pages';
|
||||
@import 'buttons';
|
||||
@import 'callout';
|
||||
@import 'card';
|
||||
|
|
@ -11,6 +12,7 @@
|
|||
@import 'code';
|
||||
@import 'contribute';
|
||||
@import 'contributor';
|
||||
@import 'details';
|
||||
@import 'edit-page-cta';
|
||||
@import 'features';
|
||||
@import 'filetree';
|
||||
|
|
|
|||
|
|
@ -40,46 +40,47 @@
|
|||
{%- endmacro -%}
|
||||
|
||||
{%- macro renderOverloadInfo(overload, cssClass, method) -%}
|
||||
<div class="overload-info">
|
||||
{% if overload.shortDescription and (overload.shortDescription != method.shortDescription) %}
|
||||
<div class="short-description">
|
||||
{$ overload.shortDescription | marked $}
|
||||
</div>{% endif %}
|
||||
|
||||
{% if overload.shortDescription and (overload.shortDescription != method.shortDescription) %}
|
||||
<div class="short-description">
|
||||
{$ overload.shortDescription | marked $}
|
||||
</div>{% endif %}
|
||||
<code-example language="ts" hideCopy="true" linenums="false" class="no-box api-heading">{$ renderMemberSyntax(overload) $}</code-example>
|
||||
|
||||
<code-example language="ts" hideCopy="true" linenums="false" class="no-box api-heading">{$ renderMemberSyntax(overload) $}</code-example>
|
||||
{% if overload.deprecated !== undefined %}
|
||||
<div class="deprecated">
|
||||
{$ ('**Deprecated** ' + overload.deprecated) | marked $}
|
||||
</div>{% endif %}
|
||||
|
||||
{% if overload.deprecated !== undefined %}
|
||||
<div class="deprecated">
|
||||
{$ ('**Deprecated** ' + overload.deprecated) | marked $}
|
||||
</div>{% endif %}
|
||||
<h6 class="no-anchor">Parameters</h6>
|
||||
{$ params.renderParameters(overload.parameterDocs, cssClass + '-parameters', cssClass + '-parameter', true) $}
|
||||
|
||||
<h6 class="no-anchor">Parameters</h6>
|
||||
{$ params.renderParameters(overload.parameterDocs, cssClass + '-parameters', cssClass + '-parameter', true) $}
|
||||
|
||||
{% if overload.type or overload.returns.type %}
|
||||
<h6 class="no-anchor">Returns</h6>
|
||||
{% marked %}`{$ (overload.type or overload.returns.type) $}`{% if overload.returns %}: {$ overload.returns.description $}{% endif %}{% endmarked %}
|
||||
{% endif %}
|
||||
{% if overload.type or overload.returns.type %}
|
||||
<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 %}
|
||||
<h6 class="no-anchor">Throws</h6>
|
||||
{% for error in overload.throws %}
|
||||
{% marked %}`{$ (error.typeList or 'Error') $}` {$ error.description $}{% endmarked %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
{% if overload.throws.length %}
|
||||
<h6 class="no-anchor">Throws</h6>
|
||||
{% for error in overload.throws %}
|
||||
{% marked %}`{$ (error.typeList or 'Error') $}` {$ error.description $}{% endmarked %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
|
||||
{% if overload.description and (overload.description != method.description) -%}
|
||||
<div class="description">
|
||||
{$ overload.description | marked $}
|
||||
{% if overload.description and (overload.description != method.description) -%}
|
||||
<div class="description">
|
||||
{$ overload.description | marked $}
|
||||
</div>
|
||||
{%- endif %}
|
||||
</div>
|
||||
{%- endif %}
|
||||
{%- endmacro -%}
|
||||
|
||||
{%- 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 class="icon-action-header">
|
||||
{% if method.name !== 'constructor' %}<thead><tr><th>
|
||||
<div class="with-github-links">
|
||||
<h3>
|
||||
{% if method.isCallMember %}<i>call signature</i>
|
||||
|
|
@ -123,10 +124,10 @@
|
|||
<details class="overloads">
|
||||
<summary>
|
||||
<div class="icon-action-header">
|
||||
<h4 class="no-anchor">Overloads</h4>
|
||||
<h4 class="no-anchor">{$ method.overloads.length $} overloads...</h4>
|
||||
<a>
|
||||
<span class="show-all">Show All</span>
|
||||
<span class="collapse-all">Collapse All</span>
|
||||
<span class="collapse-all">Hide All</span>
|
||||
<i class="material-icons expand">expand_more</i>
|
||||
</a>
|
||||
</div>
|
||||
|
|
@ -137,17 +138,10 @@
|
|||
<hr class="hr-margin fullwidth">
|
||||
{% endif %}
|
||||
{% for overload in method.overloads %}
|
||||
<details class="overload"{% if loop.first %} open{% endif %}>
|
||||
<summary>
|
||||
<div class="icon-action-header">
|
||||
<h5 class="no-anchor">Overload #{$ loop.index $} of {$ method.overloads.length $}</h5>
|
||||
<a><i class="material-icons expand">expand_more</i></a>
|
||||
</div>
|
||||
</summary>
|
||||
{$ renderOverloadInfo(overload, cssClass + '-overload', method) $}
|
||||
{% if not loop.last %}<hr class="hr-margin">{% endif %}
|
||||
</details>
|
||||
{% endfor %}
|
||||
<h5 class="no-anchor">Overload #{$ loop.index $}</h5>
|
||||
{$ renderOverloadInfo(overload, cssClass + '-overload', method) $}
|
||||
{% if not loop.last %}<hr class="hr-margin">{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</details>
|
||||
</td>
|
||||
|
|
|
|||
Loading…
Reference in New Issue