vbatts/quay
Archived
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Restyle the billing invoices tab

Browse source
This commit is contained in:
Joseph Schorr 2015-04-01 15:04:01 -04:00
parent d408c74eaa
commit c31eea8f79
5 changed files with 39 additions and 86 deletions
Download patch file Download diff file Expand all files Collapse all files

32
static/directives/billing-invoices.html
View file

@ -1,25 +1,23 @@
<div class="billing-invoices-element">
<div ng-show="loading">
<div class="quay-spinner"></div>
</div>
<div class="cor-loader" ng-show="loading"></div>
<div ng-show="!loading && !invoices">
No invoices have been created
</div>
<div ng-show="!loading && invoices">
<table class="table">
<table class="co-table">
<thead>
<th>Billing Date/Time</th>
<th>Amount Due</th>
<th>Status</th>
<th></th>
<td>Billing Date/Time</td>
<td>Amount Due</td>
<td>Status</td>
<td class="options-col"></td>
</thead>
<tbody class="invoice" ng-repeat="invoice in invoices">
<tr class="invoice-title">
<td ng-click="toggleInvoice(invoice.id)"><span class="invoice-datetime">{{ invoice.date * 1000 | date:'medium' }}</span></td>
<td ng-click="toggleInvoice(invoice.id)"><span class="invoice-amount">{{ invoice.amount_due / 100 }}</span></td>
<td><span class="invoice-datetime">{{ invoice.date * 1000 | date:'medium' }}</span></td>
<td><span class="invoice-amount">{{ invoice.amount_due / 100 }}</span></td>
<td>
<span class="invoice-status">
<span class="success" ng-show="invoice.paid">Paid - Thank you!</span>
@ -28,24 +26,12 @@
<span class="pending" ng-show="!invoice.paid && !invoice.attempted">Payment pending</span>
</span>
</td>
<td>
<td class="options-col">
<a ng-show="invoice.paid" href="/receipt?id={{ invoice.id }}" download="receipt.pdf" target="_new">
<i class="fa fa-download" data-title="Download Receipt" bs-tooltip="tooltip.title"></i>
</a>
</td>
</tr>
<tr ng-class="invoiceExpanded[invoice.id] ? 'in' : 'out'" class="invoice-details panel-collapse collapse">
<td colspan="3">
<dl class="dl-normal">
<dt>Billing Period</dt>
<dd>
<span>{{ invoice.period_start * 1000 | date:'mediumDate' }}</span> -
<span>{{ invoice.period_end * 1000 | date:'mediumDate' }}</span>
</dd>
</dl>
</td>
</tr>
</tbody>
</table>
</div>