pk/atst
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial styling and layout of TO view fragment

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

7
styles/elements/_tables.scss
View File

@@ -53,7 +53,6 @@ table.atat-table {
padding: $gap * 2; padding: $gap * 2;
border: 1px solid $color-gray-lighter; border: 1px solid $color-gray-lighter;
display: table-cell; display: table-cell;
white-space: nowrap;
vertical-align: top; vertical-align: top;
&:first-child { &:first-child {
@@ -64,6 +63,12 @@ table.atat-table {
border-right: none; border-right: none;
} }
} }
&:last-child {
td {
border-bottom: none;
}
}
} }
} }

46
styles/sections/_reports.scss
View File

@@ -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 { .reporting-expended-funding {
&__header { &__header {
margin: 0; 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;
}
}
}

16
styles/sections/_task_order.scss
View File

@@ -36,22 +36,6 @@
margin-top: $gap * 2; 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 { .card {
padding: ($gap * 4) ($gap * 5) 0; padding: ($gap * 4) ($gap * 5) 0;

2
templates/components/tooltip.html
View File

@@ -3,7 +3,7 @@
{% macro Tooltip(message,title='Help', classes="") %} {% macro Tooltip(message,title='Help', classes="") %}
<button type="button" tabindex="0" class="icon-tooltip {{classes}}" v-tooltip.top="{content: '{{message}}', container: false}"> <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> </button>
{%- endmacro %} {%- endmacro %}

89
templates/task_orders/fragments/task_order_view.html
View File

@@ -1,54 +1,61 @@
{% from "components/icon.html" import Icon %} {% from "components/icon.html" import Icon %}
{% from "components/semi_collapsible_text.html" import SemiCollapsibleText %} {% from "components/semi_collapsible_text.html" import SemiCollapsibleText %}
{% from "components/tooltip.html" import Tooltip %}
<div class="task-order__review"> {% set obligated_funds = task_order.total_obligated_funds %}
<div class="form-row"> {% set contract_amount = task_order.total_contract_amount %}
<div class="form-col"> {% set expended_funds = task_order.invoiced_funds %}
<div class="h2">
{{ "task_orders.review.review_your_funding" | translate }} <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> <div class='col col--grow reporting-summary-item'>
<div class="totals-box"> <h4 class="reporting-summary-item__header">
{% if task_order %} <span class="reporting-summary-item__header-text">Total Task Order value</span>
{% set obligated_funds = task_order.total_obligated_funds %} {{ Tooltip(("task_orders.review.tooltip.total_value" | translate), title="", classes="reporting-summary-item__header-icon") }}
{% set contract_amount = task_order.total_contract_amount %} </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 %} {% endif %}
<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='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> </div>
</section>
<div class="h3"> <hr>
{{ 'task_orders.review.pdf_title' | translate }} <section>
</div> <h4>Documents</h4>
<a class="icon-link icon-link--download" href="{{ pdf_download_url }}"> <div class="panel panel__content">
{{ Icon('ok') }} <a href="{{ pdf_download_url }}">
{{ task_order.pdf.filename }} {{ task_order.pdf.filename }}
{{ Icon('link', classes="icon--primary icon--medium") }}
</a> </a>
<hr>
<div class="col task-order__details">
<div class="h3">
{{ "task_orders.review.task_order_number" | translate }}
</div> </div>
<div>{{task_order.number}}</div> </section>
<hr> <hr>
<section>
<div class="h3"> <h4>CLIN summary</h4>
{{ "task_orders.review.funding_summary" | translate }} <table class="fixed-table-wrapper atat-table">
</div>
<table class="fixed-table-wrapper">
<thead> <thead>
<tr> <tr>
<th>{{ "task_orders.review.clins.number" | translate }}</th> <th>{{ "task_orders.review.clins.number" | translate }}</th>
@@ -76,7 +83,5 @@
{% endfor %} {% endfor %}
</tbody> </tbody>
</table> </table>
</div> </section>
</div>
</div>
</div> </div>

12
translations.yaml
View File

@@ -491,6 +491,10 @@ task_orders:
pop: PoP pop: PoP
total_amount: CLIN Value total_amount: CLIN Value
obligated: Amount Obligated 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: form:
add_clin: Add another CLIN add_clin: Add another CLIN
add_to_header: Add your task order add_to_header: Add your task order
@@ -549,10 +553,10 @@ task_orders:
status_empty_state: 'This Portfolio has no {status} Task Orders.' status_empty_state: 'This Portfolio has no {status} Task Orders.'
status_list_title: '{status} Task Orders' status_list_title: '{status} Task Orders'
JEDICLINType: JEDICLINType:
JEDI_CLIN_1: 'IDIQ CLIN 0001 Unclassified IaaS/PaaS' JEDI_CLIN_1: 'Unclassified IaaS and PaaS (IDIQ CLIN 0001)'
JEDI_CLIN_2: 'IDIQ CLIN 0002 Classified IaaS/PaaS' JEDI_CLIN_2: 'Classified IaaS and PaaS (IDIQ CLIN 0002)'
JEDI_CLIN_3: 'IDIQ CLIN 0003 Unclassified Cloud Support Package' JEDI_CLIN_3: 'Unclassified Cloud Support Package (IDIQ CLIN 0003)'
JEDI_CLIN_4: 'IDIQ CLIN 0004 Classified Cloud Support Package' JEDI_CLIN_4: 'Classified Cloud Support Package (IDIQ CLIN 0004)'
testing: testing:
example_string: Hello World example_string: Hello World
example_with_variables: 'Hello, {name}!' example_with_variables: 'Hello, {name}!'