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

<table class="table table-hover table-condensed" id="sortable-piggy">
    <thead>
    <tr>
        <th colspan="2">&nbsp;</th>
        <th>{{ 'piggy_bank'|_ }}</th>
        <th style="text-align: right;">{{ 'saved_so_far'|_ }}</th>
        <th colspan="3" class="hidden-sm hidden-xs">&nbsp;</th>
        <th style="text-align: right;" class="hidden-sm hidden-xs">{{ 'target_amount'|_ }}</th>
        <th style="text-align: right;" class="hidden-sm hidden-xs">{{ 'left_to_save'|_ }}</th>
    </tr>
    </thead>
    <tbody>
    {% for piggyBank in piggyBanks %}
        <tr data-id="{{ piggyBank.id }}">
            <td class="visible-xs visible-sm hidden-md hidden-lg">
                &nbsp;
            </td>
            <td class="visible-xs visible-sm hidden-md hidden-lg">
                <div class="btn-group btn-group-xs">
                    <a href="{{ route('piggy-banks.remove-money-mobile', piggyBank.id) }}" class="btn btn-default btn-xs"><i class="fa fa-minus"></i></a>
                    <a href="{{ route('piggy-banks.add-money-mobile', piggyBank.id) }}" class="btn btn-default btn-xs"><i class="fa fa-plus"></i></a>
                </div>
            </td>
            <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.name }}">{{ piggyBank.name }}</a>
            </td>
            <td style="text-align: right;">
                <span title="Saved so far" style="text-align:right;">{{ piggyBank.savedSoFar|formatAmount }}</span>
            </td>
            <td class="hidden-sm hidden-xs" style="text-align:right;width:40px;">
                {% if piggyBank.savedSoFar > 0 %}
                    <a href="{{ route('piggy-banks.remove-money', 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.add-money', 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;text-align:right;">
                <span title="{{ 'target_amount'|_ }}">{{ piggyBank.targetamount|formatAmount }}</span>
            </td>
            <td class="hidden-sm hidden-xs" style="width:200px;text-align:right;">
                {% if piggyBank.leftToSave > 0 %}
                    <span title="{{ 'left_to_save'|_ }}">{{ piggyBank.leftToSave|formatAmount }}</span>
                {% endif %}
            </td>
        </tr>
    {% endfor %}
    </tbody>
</table>