Initial styling and layout of TO view fragment

This commit is contained in:
leigh-mil
2019-12-23 10:33:20 -05:00
parent cbcac2b142
commit 8ece47627e
6 changed files with 120 additions and 118 deletions

View File

@@ -1,82 +1,87 @@
{% from "components/icon.html" import Icon %}
{% from "components/semi_collapsible_text.html" import SemiCollapsibleText %}
{% from "components/tooltip.html" import Tooltip %}
<div class="task-order__review">
<div class="form-row">
<div class="form-col">
<div class="h2">
{{ "task_orders.review.review_your_funding" | translate }}
</div>
<div>
<div class="totals-box">
{% if task_order %}
{% set obligated_funds = task_order.total_obligated_funds %}
{% set contract_amount = task_order.total_contract_amount %}
{% endif %}
{% set obligated_funds = task_order.total_obligated_funds %}
{% set contract_amount = task_order.total_contract_amount %}
{% set expended_funds = task_order.invoiced_funds %}
<div class="h4">{{ 'components.totals_box.obligated_funds' | translate }}</div>
<div class="h3">{{ obligated_funds | dollars }}</div>
<p>{{ 'components.totals_box.obligated_text' | translate }}</p>
<div class="h4">{{ 'components.totals_box.total_amount' | translate }}</div>
<div class="h3">{{ contract_amount | dollars }}</div>
<p>{{ 'components.totals_box.total_text' | translate }}</p>
</div>
</div>
<div class="h3">
{{ 'task_orders.review.pdf_title' | translate }}
</div>
<a class="icon-link icon-link--download" href="{{ pdf_download_url }}">
{{ Icon('ok') }}
{{ task_order.pdf.filename }}
</a>
<hr>
<div class="col task-order__details">
<div class="h3">
{{ "task_orders.review.task_order_number" | translate }}
</div>
<div>{{task_order.number}}</div>
<hr>
<div class="h3">
{{ "task_orders.review.funding_summary" | translate }}
</div>
<table class="fixed-table-wrapper">
<thead>
<tr>
<th>{{ "task_orders.review.clins.number" | translate }}</th>
<th>{{ "task_orders.review.clins.type" | translate }}</th>
<th>{{ "task_orders.review.clins.idiq_clin_description" | translate }}</th>
<th>{{ "task_orders.review.clins.pop" | translate }}</th>
<th class="task-order__amount">{{ "task_orders.review.clins.total_amount" | translate }}</th>
<th class="task-order__amount">{{ "task_orders.review.clins.obligated" | translate }}</th>
</tr>
</thead>
<tbody>
{% for clin in task_order.sorted_clins %}
<tr>
<td>{{ clin.number }}</td>
<td>{{ clin.type }}</td>
<td>{{ "{}".format(clin.jedi_clin_type) | translate}}</td>
<td>
{{ clin.start_date | formattedDate }} - {{ clin.end_date | formattedDate }}
</td>
{# TODO: Swap in total CLIN amount #}
<td class="task-order__amount">{{ clin.total_amount | dollars }}</td>
<td class="task-order__amount">{{ clin.obligated_amount | dollars }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<div>
<section class="row">
<div class='col col--grow reporting-summary-item'>
<h4 class="reporting-summary-item__header">
<span class="reporting-summary-item__header-text">Total obligated funds</span>
{{ Tooltip(("task_orders.review.tooltip.obligated_funds" | translate), title="", classes="reporting-summary-item__header-icon") }}
</h4>
<p class="reporting-summary-item__value--large">
{{ obligated_funds | dollars }}
</p>
</div>
</div>
<div class='col col--grow reporting-summary-item'>
<h4 class="reporting-summary-item__header">
<span class="reporting-summary-item__header-text">Total Task Order value</span>
{{ Tooltip(("task_orders.review.tooltip.total_value" | translate), title="", classes="reporting-summary-item__header-icon") }}
</h4>
{% set earliest_pop_start_date, latest_pop_end_date = portfolio.funding_duration %}
{% if earliest_pop_start_date and latest_pop_end_date %}
<p class="reporting-summary-item__value--large">
{{ contract_amount | dollars }}
</p>
{% else %}
<p class="reporting-summary-item__value--large"> - </p>
{% endif %}
</div>
<div class='col col--grow reporting-summary-item'>
<h4 class="reporting-summary-item__header">
<span class="reporting-summary-item__header-text">Total expended funds</span>
{{ Tooltip(("task_orders.review.tooltip.expended_funds" | translate), title="", classes="reporting-summary-item__header-icon") }}
</h4>
<p class="reporting-summary-item__value--large">
{{ expended_funds | dollars }}
</p>
</div>
</section>
<hr>
<section>
<h4>Documents</h4>
<div class="panel panel__content">
<a href="{{ pdf_download_url }}">
{{ task_order.pdf.filename }}
{{ Icon('link', classes="icon--primary icon--medium") }}
</a>
</div>
</section>
<hr>
<section>
<h4>CLIN summary</h4>
<table class="fixed-table-wrapper atat-table">
<thead>
<tr>
<th>{{ "task_orders.review.clins.number" | translate }}</th>
<th>{{ "task_orders.review.clins.type" | translate }}</th>
<th>{{ "task_orders.review.clins.idiq_clin_description" | translate }}</th>
<th>{{ "task_orders.review.clins.pop" | translate }}</th>
<th class="task-order__amount">{{ "task_orders.review.clins.total_amount" | translate }}</th>
<th class="task-order__amount">{{ "task_orders.review.clins.obligated" | translate }}</th>
</tr>
</thead>
<tbody>
{% for clin in task_order.sorted_clins %}
<tr>
<td>{{ clin.number }}</td>
<td>{{ clin.type }}</td>
<td>{{ "{}".format(clin.jedi_clin_type) | translate}}</td>
<td>
{{ clin.start_date | formattedDate }} - {{ clin.end_date | formattedDate }}
</td>
{# TODO: Swap in total CLIN amount #}
<td class="task-order__amount">{{ clin.total_amount | dollars }}</td>
<td class="task-order__amount">{{ clin.obligated_amount | dollars }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</section>
</div>