Initial styling and layout of TO view fragment
This commit is contained in:
leigh-mil
parent
cbcac2b142
commit
8ece47627e
@ -53,7 +53,6 @@ table.atat-table {
|
||||
padding: $gap * 2;
|
||||
border: 1px solid $color-gray-lighter;
|
||||
display: table-cell;
|
||||
white-space: nowrap;
|
||||
vertical-align: top;
|
||||
|
||||
&:first-child {
|
||||
@ -64,6 +63,12 @@ table.atat-table {
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
td {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -118,27 +118,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.reporting-summary-item {
|
||||
border-right: 1px solid $color-gray-light;
|
||||
margin-right: $gap * 3;
|
||||
padding-right: $gap * 3;
|
||||
&:last-child {
|
||||
border-right: none;
|
||||
margin-right: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
&__header {
|
||||
margin: 0;
|
||||
&-icon {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
&__value {
|
||||
font-size: $lead-font-size;
|
||||
}
|
||||
}
|
||||
|
||||
.reporting-expended-funding {
|
||||
&__header {
|
||||
margin: 0;
|
||||
@ -167,3 +146,28 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.reporting-summary-item {
|
||||
border-right: 1px solid $color-gray-light;
|
||||
margin-right: $gap * 3;
|
||||
padding-right: $gap * 3;
|
||||
&:last-child {
|
||||
border-right: none;
|
||||
margin-right: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
&__header {
|
||||
margin: 0;
|
||||
&-icon {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
&__value {
|
||||
font-size: $lead-font-size;
|
||||
&--large {
|
||||
font-size: 3.4rem;
|
||||
font-weight: $font-bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -36,22 +36,6 @@
|
||||
margin-top: $gap * 2;
|
||||
}
|
||||
|
||||
.task-order__review {
|
||||
.h2 {
|
||||
margin-bottom: $gap * 4;
|
||||
}
|
||||
|
||||
.task-order__number {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.totals-box {
|
||||
flex-grow: unset;
|
||||
display: table;
|
||||
min-width: 350px;
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: ($gap * 4) ($gap * 5) 0;
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
{% macro Tooltip(message,title='Help', classes="") %}
|
||||
|
||||
<button type="button" tabindex="0" class="icon-tooltip {{classes}}" v-tooltip.top="{content: '{{message}}', container: false}">
|
||||
{{ Icon('help') }}<span>{{ title }}</span>
|
||||
{{ Icon('question') }}<span>{{ title }}</span>
|
||||
</button>
|
||||
|
||||
{%- endmacro %}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -491,6 +491,10 @@ task_orders:
|
||||
pop: PoP
|
||||
total_amount: CLIN Value
|
||||
obligated: Amount Obligated
|
||||
tooltip:
|
||||
obligated_funds: Funds committed to fund your portfolio. This may represent 100% of your total Task Order value, or a portion of it.
|
||||
total_value: All obligated and projected funds for the Task Order’s Base and Option CLINs.
|
||||
expended_funds: All funds spend from the Task Order so far.
|
||||
form:
|
||||
add_clin: Add another CLIN
|
||||
add_to_header: Add your task order
|
||||
@ -549,10 +553,10 @@ task_orders:
|
||||
status_empty_state: 'This Portfolio has no {status} Task Orders.'
|
||||
status_list_title: '{status} Task Orders'
|
||||
JEDICLINType:
|
||||
JEDI_CLIN_1: 'IDIQ CLIN 0001 Unclassified IaaS/PaaS'
|
||||
JEDI_CLIN_2: 'IDIQ CLIN 0002 Classified IaaS/PaaS'
|
||||
JEDI_CLIN_3: 'IDIQ CLIN 0003 Unclassified Cloud Support Package'
|
||||
JEDI_CLIN_4: 'IDIQ CLIN 0004 Classified Cloud Support Package'
|
||||
JEDI_CLIN_1: 'Unclassified IaaS and PaaS (IDIQ CLIN 0001)'
|
||||
JEDI_CLIN_2: 'Classified IaaS and PaaS (IDIQ CLIN 0002)'
|
||||
JEDI_CLIN_3: 'Unclassified Cloud Support Package (IDIQ CLIN 0003)'
|
||||
JEDI_CLIN_4: 'Classified Cloud Support Package (IDIQ CLIN 0004)'
|
||||
testing:
|
||||
example_string: Hello World
|
||||
example_with_variables: 'Hello, {name}!'
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user