Use accordion-table styles for application environment table

This commit is contained in:
Montana 2019-04-09 14:08:28 -04:00
parent f6f093ef85
commit 5a10e0658a

View File

@ -23,26 +23,25 @@
<th scope='col' class='table-cell--align-right'>{{ "portfolios.applications.environments.members" | translate }}</th> <th scope='col' class='table-cell--align-right'>{{ "portfolios.applications.environments.members" | translate }}</th>
</thead> </thead>
<tbody v-for='(members_list, name) in environments' class='spend-table__portfolio'> <tbody v-for='(members_list, name) in environments' class='accordion-table__items'>
<tr> <tr>
<th scope='rowgroup' v-on:click="toggle($event, name)" v-html='name'></th> <th scope='rowgroup' v-on:click="toggle($event, name)" v-html='name'></th>
<template v-if="environmentsState[name].isVisible"> <template v-if="environmentsState[name].isVisible">
<span v-on:click="toggle($event, name)" class='icon-link icon-link--large spend-table__application__toggler'> <td v-on:click="toggle($event, name)" class='icon-link icon-link--large accordion-table__item__toggler'>Hide Members(<span v-html='members_list.length'></span>){{ Icon('caret_up') }}</td>
<td>Hide Members(<span v-html='members_list.length'></span>){{ Icon('caret_up') }}</td>
</template> </template>
<template v-else> <template v-else>
<span v-on:click="toggle($event, name)" class='icon-link icon-link--large spend-table__application__toggler'> <td v-on:click="toggle($event, name)" class='icon-link icon-link--large accordion-table__item__toggler'>Show Members(<span v-html='members_list.length'></span>){{ Icon('caret_down') }}</td>
<td>Show Members(<span v-html='members_list.length'></span>){{ Icon('caret_down') }}</td>
</template> </template>
</tr> </tr>
<tr scope='rowgroup' v-for='member in members_list' v-show='environmentsState[name].isVisible' class='spend-table__application__env'> <tr scope='rowgroup' v-for='member in members_list' v-show='environmentsState[name].isVisible' class='accordion-table__item__expanded'>
<td class='accordion__item application-list-item__environment table-cell--expand'> <td class='table-cell--expand'>
<div class='application-list-item__environment__name'> <div>
<span v-html='member'></span> <span v-html='member'></span>
</div> </div>
</td> </td>
<td class='table-cell--expand'></td>
</tr> </tr>
</tbody> </tbody>