Update styles on "total spend" panel

This commit is contained in:
Patrick Smith
2019-02-09 09:57:55 -05:00
parent 43cb6477f1
commit 4d999d1423
3 changed files with 39 additions and 38 deletions

View File

@@ -12,31 +12,33 @@
<div class='funding-summary-row__col'>
<div class='panel spend-summary'>
<h4 class='spend-summary__heading'>Portfolio Total Spend</h4>
<div class='row'>
<h2 class='spend-summary__heading col'>Portfolio Total Spend</h2>
<dl class='spend-summary__budget'>
<dl class='spend-summary__budget col col--grow row'>
{% set budget = portfolio_totals['budget'] %}
{% set spent = portfolio_totals['spent'] %}
{% set remaining = budget - spent %}
<div>
<dt>Budget </dt>
<dl class='col col--grow'>
<dt>Budget</dt>
<dd>{{ budget | dollars }}</dd>
</div>
</dl>
<div>
<dl class='col col--grow'>
<dt>Remaining</dt>
<dd>{{ remaining | dollars }}</dd>
</div>
</dl>
</dl>
</div>
<hr></hr>
<div>
<meter value='{{ spent }}' min='0' max='{{ budget }}' title='{{ spent | dollars }} Total spend to date'>
<div class='meter__fallback' style='width:{{ (spent / budget) * 100 if budget else 0 }}%;'></div>
</meter>
<dl class='spend-summary__spent'>
<dt>Total spend to date</dt>
<dt>Total spending to date</dt>
<dd>{{ spent | dollars }}</dd>
</dl>
</div>