From 8ece47627ef4694f3cfc79f2d054864932dcf795 Mon Sep 17 00:00:00 2001 From: leigh-mil Date: Mon, 23 Dec 2019 10:33:20 -0500 Subject: [PATCH] Initial styling and layout of TO view fragment --- styles/elements/_tables.scss | 7 +- styles/sections/_reports.scss | 46 +++--- styles/sections/_task_order.scss | 16 -- templates/components/tooltip.html | 2 +- .../fragments/task_order_view.html | 155 +++++++++--------- translations.yaml | 12 +- 6 files changed, 120 insertions(+), 118 deletions(-) diff --git a/styles/elements/_tables.scss b/styles/elements/_tables.scss index f313756c..182b7770 100644 --- a/styles/elements/_tables.scss +++ b/styles/elements/_tables.scss @@ -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; + } + } } } diff --git a/styles/sections/_reports.scss b/styles/sections/_reports.scss index ee43ffa2..66cdb073 100644 --- a/styles/sections/_reports.scss +++ b/styles/sections/_reports.scss @@ -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; + } + } +} diff --git a/styles/sections/_task_order.scss b/styles/sections/_task_order.scss index c09f49a7..62d0db08 100644 --- a/styles/sections/_task_order.scss +++ b/styles/sections/_task_order.scss @@ -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; diff --git a/templates/components/tooltip.html b/templates/components/tooltip.html index 08a6f92f..052299f6 100644 --- a/templates/components/tooltip.html +++ b/templates/components/tooltip.html @@ -3,7 +3,7 @@ {% macro Tooltip(message,title='Help', classes="") %} {%- endmacro %} diff --git a/templates/task_orders/fragments/task_order_view.html b/templates/task_orders/fragments/task_order_view.html index a97d8e09..70d4c385 100644 --- a/templates/task_orders/fragments/task_order_view.html +++ b/templates/task_orders/fragments/task_order_view.html @@ -1,82 +1,87 @@ {% from "components/icon.html" import Icon %} {% from "components/semi_collapsible_text.html" import SemiCollapsibleText %} +{% from "components/tooltip.html" import Tooltip %} -
-
-
-
- {{ "task_orders.review.review_your_funding" | translate }} -
-
-
- {% 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 %} -
{{ 'components.totals_box.obligated_funds' | translate }}
-
{{ obligated_funds | dollars }}
-

{{ 'components.totals_box.obligated_text' | translate }}

-
{{ 'components.totals_box.total_amount' | translate }}
-
{{ contract_amount | dollars }}
-

{{ 'components.totals_box.total_text' | translate }}

- -
-
- -
- {{ 'task_orders.review.pdf_title' | translate }} -
- - {{ Icon('ok') }} - {{ task_order.pdf.filename }} - - -
- -
-
- {{ "task_orders.review.task_order_number" | translate }} -
-
{{task_order.number}}
- -
- -
- {{ "task_orders.review.funding_summary" | translate }} -
- - - - - - - - - - - - - - - - {% for clin in task_order.sorted_clins %} - - - - - - {# TODO: Swap in total CLIN amount #} - - - - {% endfor %} - -
{{ "task_orders.review.clins.number" | translate }}{{ "task_orders.review.clins.type" | translate }}{{ "task_orders.review.clins.idiq_clin_description" | translate }}{{ "task_orders.review.clins.pop" | translate }}{{ "task_orders.review.clins.total_amount" | translate }}{{ "task_orders.review.clins.obligated" | translate }}
{{ clin.number }}{{ clin.type }}{{ "{}".format(clin.jedi_clin_type) | translate}} - {{ clin.start_date | formattedDate }} - {{ clin.end_date | formattedDate }} - {{ clin.total_amount | dollars }}{{ clin.obligated_amount | dollars }}
-
+
+
+
+

+ Total obligated funds + {{ Tooltip(("task_orders.review.tooltip.obligated_funds" | translate), title="", classes="reporting-summary-item__header-icon") }} +

+

+ {{ obligated_funds | dollars }} +

-
+
+

+ Total Task Order value + {{ Tooltip(("task_orders.review.tooltip.total_value" | translate), title="", classes="reporting-summary-item__header-icon") }} +

+ {% set earliest_pop_start_date, latest_pop_end_date = portfolio.funding_duration %} + {% if earliest_pop_start_date and latest_pop_end_date %} +

+ {{ contract_amount | dollars }} +

+ {% else %} +

-

+ {% endif %} +
+
+

+ Total expended funds + {{ Tooltip(("task_orders.review.tooltip.expended_funds" | translate), title="", classes="reporting-summary-item__header-icon") }} +

+

+ {{ expended_funds | dollars }} +

+
+ +
+
+

Documents

+
+ + {{ task_order.pdf.filename }} + {{ Icon('link', classes="icon--primary icon--medium") }} + +
+
+
+
+

CLIN summary

+ + + + + + + + + + + + + + {% for clin in task_order.sorted_clins %} + + + + + + {# TODO: Swap in total CLIN amount #} + + + + {% endfor %} + +
{{ "task_orders.review.clins.number" | translate }}{{ "task_orders.review.clins.type" | translate }}{{ "task_orders.review.clins.idiq_clin_description" | translate }}{{ "task_orders.review.clins.pop" | translate }}{{ "task_orders.review.clins.total_amount" | translate }}{{ "task_orders.review.clins.obligated" | translate }}
{{ clin.number }}{{ clin.type }}{{ "{}".format(clin.jedi_clin_type) | translate}} + {{ clin.start_date | formattedDate }} - {{ clin.end_date | formattedDate }} + {{ clin.total_amount | dollars }}{{ clin.obligated_amount | dollars }}
+
diff --git a/translations.yaml b/translations.yaml index b4a127a8..d14a378b 100644 --- a/translations.yaml +++ b/translations.yaml @@ -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}!'