Merge pull request #982 from dod-ccpo/to-form-step-4-styling

TO form review styling

styles/elements/_icon_link.scss

@@ -83,7 +83,9 @@
   }
 
   &.icon-link--download {
-    @include icon-link-color($color-black) .icon {
+    font-weight: $font-normal;
+    padding-left: 0;
+    .icon {
       @include icon-color($color-green);
     }
   }

styles/sections/_task_order.scss

@@ -24,7 +24,7 @@
 
   hr {
     border: 0;
-    border-bottom: 1px solid $color-gray-light;
+    border-bottom: 1px solid $color-gray-lighter;
     margin-top: $gap * 4;
     margin-bottom: $gap * 4;
   }
@@ -53,19 +53,20 @@
     margin-top: $gap * 2;
   }
 
-  .task-order__details {
+  .task-order__review {
-    max-width: 65%;
+    .h2 {
-  }
+      margin-bottom: $gap * 4;
+    }
 
-  .totals-box {
+    .totals-box {
-    padding: $gap * 4;
+      padding: $gap * 4;
-    padding-top: $gap * 2;
+      padding-top: $gap * 2;
-    flex-grow: unset;
+      flex-grow: unset;
-    margin-left: $gap * 6;
+      margin-left: $gap * 6;
-    margin-top: $gap * 3;
+      display: table;
-    width: 35%;
+      background-color: $color-gray-lightest;
-    display: table;
+      min-width: 350px;
-    background-color: $color-gray-lightest;
+    }
   }
 
   .usa-input__title,

templates/components/totals_box.html

@@ -1,6 +1,6 @@
 {% macro TotalsBox(task_order=None, obligated_funds=0, contract_amount=0) -%}
 
-  <div class="col totals-box">
+  <div class="totals-box">
     {% if task_order %}
       {% set obligated_funds = task_order.total_obligated_funds %}
       {% set contract_amount = task_order.total_contract_amount %}

templates/fragments/task_order_review.html

@@ -3,83 +3,78 @@
 {% from "components/totals_box.html" import TotalsBox %}
 
 
-<div class="task-order">
+<div class="task-order__review">
-  {{ SemiCollapsibleText() }}
+  <div class="form-row">
-
+    <div class="form-col">
-  <hr>
+      <div class="h2">
-
+        {{ "task_orders.review.review_your_task_order" | translate }}
-  <div class="h1">
-    {{ "task_orders.review.review_your_task_order" | translate }}
-  </div>
-  <p>
-    {{ "task_orders.review.check_paragraph" | translate }}
-  </p>
-  <div class="row">
-    <div class="col task-order__details">
-      <div class="h4">
-        {{ "task_orders.review.task_order_number" | translate }}
       </div>
-      <div>{{task_order.number}}</div>
+
+      <div class="h3">
+        {{ 'task_orders.review.pdf_title' | translate }}
+      </div>
+      <a class="icon-link icon-link--download" href="{{ url_for('task_orders.download_task_order_pdf', task_order_id=task_order.id) }}">
+        {{ Icon('check-circle-solid') }}
+        {{ task_order.pdf.filename }}
+      </a>
 
       <hr>
 
-      <div class="h3">
+      <div class="col task-order__details">
-        {{ "task_orders.review.funding_summary" | translate }}
+        <div class="h3">
-      </div>
+          {{ "task_orders.review.task_order_number" | translate }}
-
-      {% for clin in task_order.clins %}
-        <div>
-          {{ "{}".format(clin.jedi_clin_type) | translate}}
         </div>
-        <table class="fixed-table-wrapper">
+        <div>{{task_order.number}}</div>
-          <thead>
-            <tr>
-              <th>{{ "task_orders.review.clins.amount" | translate }}</th>
-              <th>{{ "task_orders.review.clins.obligated" | translate }}</th>
-              <th>{{ "task_orders.review.clins.pop_start" | translate }}</th>
-              <th>{{ "task_orders.review.clins.pop_end" | translate }}</th>
-              <th>{{ "task_orders.review.clins.loa" | translate }}</th>
-            </tr>
-          </thead>
 
-          <tbody>
+        <hr>
-            <tr>
-              <td>{{ clin.obligated_amount | dollars }}</td>
-              <td>
-                {% if clin.is_obligated() %}
-                  {{ "common.yes" | translate }}
-                {% else %}
-                  {{ "common.no" | translate }}
-                {% endif %}
-              </td>
-              <td>{{ clin.start_date | formattedDate }}</td>
-              <td>{{ clin.end_date | formattedDate }}</td>
-              <td>
-                {% for loa in clin.loas %}
-                  <span title='{{ loa }}'>
-                    {{ loa }}
-                  </span>
-                  <br />
-                {% endfor %}
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      {% endfor %}
 
-      <hr>
+        <div class="h3">
+          {{ "task_orders.review.funding_summary" | translate }}
+        </div>
 
-      <div class="h3">
+        {% for clin in task_order.clins %}
-        {{ "task_orders.review.supporting_document.title" | translate }}
+          <div>
-      </div>
+            {{ "{}".format(clin.jedi_clin_type) | translate}}
-      <div class="h4">
+          </div>
-        <a class="icon-link icon-link--download" href="{{ url_for('task_orders.download_task_order_pdf', task_order_id=task_order.id) }}">
+          <table class="fixed-table-wrapper">
-          {{ Icon('check-circle-solid') }}
+            <thead>
-          {{ task_order.pdf.filename }}
+              <tr>
-        </a>
+                <th>{{ "task_orders.review.clins.amount" | translate }}</th>
+                <th>{{ "task_orders.review.clins.obligated" | translate }}</th>
+                <th>{{ "task_orders.review.clins.pop_start" | translate }}</th>
+                <th>{{ "task_orders.review.clins.pop_end" | translate }}</th>
+                <th>{{ "task_orders.review.clins.loa" | translate }}</th>
+              </tr>
+            </thead>
+
+            <tbody>
+              <tr>
+                <td>{{ clin.obligated_amount | dollars }}</td>
+                <td>
+                  {% if clin.is_obligated() %}
+                    {{ "common.yes" | translate }}
+                  {% else %}
+                    {{ "common.no" | translate }}
+                  {% endif %}
+                </td>
+                <td>{{ clin.start_date | formattedDate }}</td>
+                <td>{{ clin.end_date | formattedDate }}</td>
+                <td>
+                  {% for loa in clin.loas %}
+                    <span title='{{ loa }}'>
+                      {{ loa }}
+                    </span>
+                    <br />
+                  {% endfor %}
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        {% endfor %}
       </div>
     </div>
-  {{ TotalsBox(task_order=task_order) }}
+    <div class="form-col">
-
+      {{ TotalsBox(task_order=task_order) }}
+    </div>
   </div>
 </div>

translations.yaml

@@ -323,9 +323,10 @@ portfolios:
       reporting: Reporting
 task_orders:
   review:
+    pdf_title: Approved Task Order
     review_your_task_order: Review your task order
-    funding_summary: Funding summary
+    funding_summary: Task Order Summary
-    task_order_number: Task order number - 10 digit found in your system of record
+    task_order_number: Task Order Number
     check_paragraph: Check to make sure the information you entered is correct. After submission, you will confirm this task order was signed by a contracting officer. Thereafter, you will be informed as soon as CCPO completes their review.
     supporting_document:
       title: Supporting document
@@ -366,7 +367,7 @@ task_orders:
   sign:
     digital_signature_description: 'I acknowledge that I have read and fully understand the DoD CCPO JEDI agreements and completed all the necessary steps, as detailed in the Federal Acquisition Regulation (FAR).'
 JEDICLINType:
-  JEDI_CLIN_1: 'CLIN 1:'
+  JEDI_CLIN_1: 'Base CLIN 0001: Unclassified IaaS and PaaS'
   JEDI_CLIN_2: 'CLIN 2: Classified Cloud Services - 0002'
   JEDI_CLIN_3: 'CLIN 3:'
   JEDI_CLIN_4: 'CLIN 4:'