MVC: base_dialog: apply collapsible table headers to the standard dialog form as well.

This commit is contained in:
Stephan de Wit 2023-04-07 16:51:36 +02:00
parent 0a0b961e61
commit 1cd2811382
3 changed files with 12 additions and 5 deletions

View File

@ -107,10 +107,16 @@
</colgroup>
<thead>
<tr{% if field['advanced']|default(false)=='true' %} data-advanced="true"{% endif %}>
<th colspan="3"><h2>{{field['label']}}</h2></th>
<th colspan="3">
<div style="padding-bottom: 5px; padding-top: 5px; font-size: 16px;">
<i class="fa fa-angle-down" aria-hidden="true"></i>
&nbsp;
<b>{{field['label']}}</b>
</div>
</th>
</tr>
</thead>
<tbody>
<tbody class="collapsible">
{#- endmacro #}
{% else %}

View File

@ -85,13 +85,13 @@
</colgroup>
<thead>
<tr {% if field['advanced']|default(false)=='true' %} data-advanced="true"{% endif %}>
<td colspan="3">
<th colspan="3">
<div style="padding-bottom: 5px; padding-top: 5px; font-size: 16px;">
<i class="fa fa-angle-down" aria-hidden="true"></i>
&nbsp;
<b>{{field['label']}}</b>
</div>
</td>
</th>
</tr>
</thead>
<tbody class="collapsible">

View File

@ -112,11 +112,12 @@
});
}, 500);
// Register collapsible table headers
$('.table').on('click', 'thead', function(event) {
let collapse = $(event.currentTarget).next();
let id = collapse.attr('class');
if (collapse != undefined && id !== undefined && id === "collapsible") {
let icon = $('> tr > td > div > i', event.currentTarget);
let icon = $('> tr > th > div > i', event.currentTarget);
icon.toggleClass("fa-angle-down fa-angle-right");
$('> tr > td', collapse).fadeToggle(150);
}