firefly-iii/resources/views/list/piggy-banks.twig

<table class="table table-hover table-condensed" id="sortable">
    <tbody>
    {% for piggyBank in piggyBanks %}
        <tr data-id="{{ piggyBank.id }}">
            <td style="width:60px;" class="hidden-sm hidden-xs">
                <i class="fa fa-fw fa-bars handle"></i>
                <i class="loadSpin"></i>
            </td>
            <td style="width:100px;" class="hidden-sm hidden-xs">
                <div class="btn-group btn-group-xs">
                    <a href="{{ route('piggy-banks.edit', piggyBank.id) }}" class="btn btn-default btn-xs"><i class="fa fa-pencil fa-fw"></i></a>
                    <a href="{{ route('piggy-banks.delete', piggyBank.id) }}" class="btn btn-danger btn-xs"><i class="fa fa-trash fa-fw"></i></a>
                </div>
            </td>
            <td>
                <a href="{{ route('piggy-banks.show', piggyBank.id) }}" title="{{ piggyBank.order }}">{{ piggyBank.name }}</a>
            </td>
            <td>
                <span title="Saved so far">{{ piggyBank.savedSoFar|formatAmountPlain }}</span>
            </td>
            <td class="hidden-sm hidden-xs" style="text-align:right;width:40px;">
                {% if piggyBank.savedSoFar > 0 %}
                    <a href="{{ route('piggy-banks.removeMoney', piggyBank.id) }}" class="btn btn-default btn-xs removeMoney" data-id="{{ piggyBank.id }}">
                        <i data-id="{{ piggyBank.id }}" class="fa fa-minus"></i></a>
                {% endif %}
            </td>

            <td class="hidden-sm hidden-xs">
                <div class="progress progress" style="margin-bottom:0;">
                    <div
                            {% if piggyBank.percentage == 100 %}
                                class="progress-bar progress-bar-success"
                            {% elseif piggyBank.percentage == 0 %}
                                class="progress-bar progress-bar-warning"
                            {% else %}
                                class="progress-bar progress-bar-info"
                            {% endif %}
                            role="progressbar" aria-valuenow="{{ piggyBank.percentage }}" aria-valuemin="0" aria-valuemax="100"
                            style="min-width: 30px;width: {{ piggyBank.percentage }}%;">
                        {{ piggyBank.percentage }}%
                    </div>
                </div>
            </td>


            <td class="hidden-sm hidden-xs" style="width:40px;">
                {% if piggyBank.leftToSave > 0 %}
                    <a href="{{ route('piggy-banks.addMoney', piggyBank.id) }}" class="btn btn-default btn-xs addMoney" data-id="{{ piggyBank.id }}">
                        <i data-id="{{ piggyBank.id }}" class="fa fa-plus"></i></a>
                {% endif %}
            </td>
            <td class="hidden-sm hidden-xs" style="width:200px;">
                <span title="Target amount">{{ piggyBank.targetamount|formatAmount }}</span>
                {% if piggyBank.leftToSave > 0 %}
                    <span title="Left to save">({{ piggyBank.leftToSave|formatAmount }})</span>
                {% endif %}
            </td>
        </tr>
    {% endfor %}
    </tbody>
</table>