build(docs-infra): fix individual API overload templates (#24976)

* Make individual overloads collapsible
* Show only the first overload expanded, rest collapsed
* Text changes to 'collapse all' once 'show all' is clicked
* Fix chevron/carrot rotation animation when overloads / overload item is expanded or collapsed

PR Close #24976
This commit is contained in:
Pete Bacon Darwin
2018-08-13 07:23:45 +01:00
committed by Kara Erickson
parent 68dfa04f8a
commit 61cd5f7c0f
2 changed files with 43 additions and 10 deletions

View File

@ -124,7 +124,11 @@
<summary>
<div class="icon-action-header">
<h4 class="no-anchor">Overloads</h4>
<a>Show All <i class="material-icons">expand_more</i></a>
<a>
<span class="show-all">Show All</span>
<span class="collapse-all">Collapse All</span>
<i class="material-icons expand">expand_more</i>
</a>
</div>
</summary>
<div class="detail-contents">
@ -133,14 +137,17 @@
<hr class="hr-margin fullwidth">
{% endif %}
{% for overload in method.overloads %}
<div>
<h5 class="icon-action-header no-anchor">
<span>Overload #{$ loop.index $} of {$ method.overloads.length $}</span>
<i class="material-icons">expand_more</i></h5>
<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 %}
</div>
</div>
</details>
</td>