Merge pull request #981 from dod-ccpo/form-styling-updates

Form styling updates

templates/task_orders/builder_base.html

@@ -35,7 +35,9 @@
 
       {% include "fragments/flash.html" %}
 
-      {% block to_builder_form_field %}{% endblock %}
+      <div class="task-order">
+        {% block to_builder_form_field %}{% endblock %}
+      </div>
 
     </form>
   </base-form>

templates/task_orders/form_header.html

@@ -0,0 +1,19 @@
+{% macro TOFormStepHeader(title, description, to_number=None) %}
+  <div class="column">
+    <div class="form-row">
+      <div class="form-col form-col--two-thirds">
+        <div class="h2">
+          {{ title }}
+        </div>
+      </div>
+      <div class="form-col form-col--third">
+        {% if to_number %}
+          <strong>Task Order Number:</strong> {{ to_number }}
+        {% endif %}
+      </div>
+    </div>
+    <div class="form-row">
+      {{ description }}
+    </div>
+  </div>
+{% endmacro %}

templates/task_orders/step_1.html

@@ -2,6 +2,7 @@
 
 {% from 'components/icon.html' import Icon %}
 {% from "components/sticky_cta.html" import StickyCTA %}
+{% from "task_orders/form_header.html" import TOFormStepHeader %}
 {% from 'components/upload_input.html' import UploadInput %}
 
 {% if task_order_id %}
@@ -16,13 +17,6 @@
 
 
 {% block to_builder_form_field %}
-  <div class="h3">
+  {{ TOFormStepHeader('task_orders.form.supporting_docs_header' | translate, 'task_orders.form.supporting_docs_text' | translate) }}
-    {{ 'task_orders.form.supporting_docs_header' | translate }}
-  </div>
-
-  <div class="task-order__pdf-help-text">
-    {{ 'task_orders.form.supporting_docs_text' | translate }} {{ Icon('question')}}
-  </div>
-
   {{ UploadInput(form.pdf, watch=True) }}
 {% endblock %}

templates/task_orders/step_2.html

@@ -1,6 +1,7 @@
 {% extends "task_orders/builder_base.html" %}
 
 {% from 'components/text_input.html' import TextInput %}
+{% from "task_orders/form_header.html" import TOFormStepHeader %}
 
 {% set action = url_for("task_orders.submit_form_step_two_add_number", task_order_id=task_order_id) %}
 {% set next_button_text = "Next: Add Base CLIN" %}
@@ -8,9 +9,6 @@
 {% set step = "2" %}
 
 {% block to_builder_form_field %}
-  <div class="h1">
+  {{ TOFormStepHeader('task_orders.form.add_to_header' | translate, "Lorem ipsem")}}
-    {{ 'task_orders.form.add_to_header' | translate }}
-  </div>
-
   {{ TextInput(form.number, validation='taskOrderNumber', optional=False) }}
 {% endblock %}

templates/task_orders/step_3.html

@@ -4,6 +4,7 @@
 {% from 'components/icon.html' import Icon %}
 {% from 'components/options_input.html' import OptionsInput %}
 {% from 'components/text_input.html' import TextInput %}
+{% from 'task_orders/form_header.html' import TOFormStepHeader %}
 
 {% set action = url_for("task_orders.submit_form_step_three_add_clins", task_order_id=task_order_id) %}
 {% set next_button_text = "Next: Review Funding" %}
@@ -99,16 +100,11 @@
     inline-template
     v-bind:initial-clin-count="{{ form.clins.data | length }}">
       <div>
-      <div class="h3">
+        {{ TOFormStepHeader('task_orders.form.base_clin_title' | translate, 'task_orders.form.base_clin_description' | translate, task_order.number) }}
-        {{ 'task_orders.form.cloud_funding_header' | translate }}
-      </div>
-      <div>
-        {{ 'task_orders.form.cloud_funding_text' | translate }}
-      </div>
 
-      {% for clin in form.clins %}
+        {% for clin in form.clins %}
-        {{ CLINFields(clin, index=loop.index - 1) }}
+          {{ CLINFields(clin, index=loop.index - 1) }}
-      {% endfor %}
+        {% endfor %}
 
       <div v-for="clin in clins">
         <hr v-if="clinIndex !== 0">

templates/task_orders/step_5.html

@@ -2,6 +2,7 @@
 
 {% from "components/alert.html" import Alert %}
 {% from "components/checkbox_input.html" import CheckboxInput %}
+{% from 'task_orders/form_header.html' import TOFormStepHeader %}
 
 {% set action = url_for("task_orders.submit_task_order", task_order_id=task_order_id) %}
 {% set next_button_text = "Next: Confirm & Submit" %}
@@ -9,14 +10,11 @@
 {% set step = "5" %}
 
 {% block to_builder_form_field %}
-  <div>
+  {{ TOFormStepHeader("Signature confirmation", "Lorem ipsem", task_order_number) }}
-    <h1>Signature confirmation: <em>Task Order #{{task_order.number}}</em></h1>
-  </div>
 
   {% call Alert('',
     message="All task orders require a Contracting Officer signature."
   ) %}
-
     {{ CheckboxInput(form.signature) }}
   {% endcall %}
 {% endblock %}

translations.yaml

@@ -339,6 +339,8 @@ task_orders:
     add_clin: Add another CLIN or Sub-CLIN
     add_loa: Add another line of accounting
     add_to_header: Add your task order
+    base_clin_title: Add Base CLIN
+    base_clin_description: Next, continue to refer to your document to locate your CLINs (Contract Line Item Numbers). CLINs are how you break the contract down by the commodities being procured (labor hours of services, funding for travel, quantity product A, etc.).
     clin_number_label: CLIN
     clin_type_label: CLIN type
     cloud_funding_header: Add the summary of cloud funding