Styling

atst/models/task_order.py

@@ -73,7 +73,7 @@ class TaskOrder(Base, mixins.TimestampsMixin):
     so_dod_id = Column(String)  # DOD ID
     number = Column(String, unique=True)  # Task Order Number
     loa = Column(String)  # Line of Accounting (LOA)
-    custom_clauses = Column(String) # Custom Clauses
+    custom_clauses = Column(String)  # Custom Clauses
 
     @hybrid_property
     def csp_estimate(self):

styles/components/_forms.scss

@@ -126,6 +126,10 @@
     width: 100%;
   }
 
+  legend {
+    @include h4;
+  }
+
   label {
     font-weight: 400;
   }

templates/components/date_picker.html

@@ -1,6 +1,11 @@
 {% from "components/icon.html" import Icon %}
 
-{% macro DatePicker(field, mindate=None, maxdate=None) -%}
+{% macro DatePicker(
+  field,
+  label=field.label | striptags,
+  description=field.description,
+  mindate=None,
+  maxdate=None) -%}
 
 <date-selector
   {% if maxdate %}maxdate="{{ maxdate.strftime("%Y-%m-%d") }}"{% endif %}
@@ -10,7 +15,16 @@
   initialyear="{{ field.data.year }}"
   inline-template>
 
-    <div class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid }">
+    <fieldset class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid }">
+      <legend>
+        <div class="usa-input__title">
+          {{ label }}
+        </div>
+
+        {% if description %}
+          <span class='usa-input__help'>{{ description | safe }}</span>
+        {% endif %}
+      </legend>
 
       <div class="date-picker-component">
         <input name="{{ field.name }}" v-bind:value="formattedDate" type="hidden" />
@@ -63,7 +77,7 @@
         {% if maxdate and not mindate %}Date must be before or on {{maxdate.strftime("%m/%d/%Y")}}{% endif %}
         {% if mindate and not maxdate %}Date must be after or on {{mindate.strftime("%m/%d/%Y")}}{% endif %}
       </p>
-    </div>
+    </fieldset>
   </date-selector>
 
 {%- endmacro %}

templates/fragments/ko_review_alert.html

@@ -0,0 +1,7 @@
+<br>
+<p>{{ "fragments.ko_review_alert.make_sure" | translate }}:</p>
+<ul>
+<li>{{ "fragments.ko_review_alert.bullet_1" | translate }}</li>
+<li>{{ "fragments.ko_review_alert.bullet_2" | translate }}</li>
+<li>{{ "fragments.ko_review_alert.bullet_3" | translate }}</li>
+</ul>

templates/portfolios/task_orders/review.html

@@ -5,6 +5,7 @@
 {% from "components/icon.html" import Icon %}
 {% from "components/date_picker.html" import DatePicker %}
 {% from "components/text_input.html" import TextInput %}
+{% from "components/alert.html" import Alert %}
 
 
 {% block content %}
@@ -56,6 +57,11 @@
     </div>
   {% endmacro %}
 
+    {% set message = "task_orders.ko_review.submitted_by" | translate({"name": task_order.creator.full_name}) %}
+
+    {{ Alert(("task_orders.ko_review.alert_title" | translate), message, level='warning',
+    fragment="fragments/ko_review_alert.html") }}
+
     <div class="panel">
 
       <div class="panel__heading">
@@ -191,8 +197,10 @@
           </div>
         </div>
 
-        {{ DatePicker(form.start_date) }}
+        <div class="form__sub-fields">
-        {{ DatePicker(form.end_date) }}
+          {{ DatePicker(form.start_date) }}
+          {{ DatePicker(form.end_date) }}
+        </div>
 
         <hr>
 
@@ -210,13 +218,16 @@
 
         <div class="h2">{{ "task_orders.ko_review.task_order_information"| translate }}</div>
 
-        {{ form.pdf.label }}
+        <div class="form__sub-fields">
-        {{ form.pdf.description }}
+          <div class="usa-input">
-        {{ form.pdf }}
+            <div class="usa-input__title">{{ form.pdf.label }}</div>
-        {{ TextInput(form.number) }}
+            {{ form.pdf.description }}
-
+            {{ form.pdf }}
-        {{ TextInput(form.loa) }}
+          </div>
-        {{ TextInput(form.custom_clauses, paragraph=True) }}
+          {{ TextInput(form.number) }}
+          {{ TextInput(form.loa) }}
+          {{ TextInput(form.custom_clauses, paragraph=True) }}
+        </div>
 
       </div>
     </div>

translations.yaml

@@ -274,6 +274,11 @@ fragments:
     learn_more_link_text: Learn more about the JEDI Cloud Task Order and the Financial Verification process.
     paragraph_1: 'The next step is to create a Task Order associated with JEDI Cloud.  Please contact a Contracting Officer (KO), Contracting Officer Representative (COR), or a Financial Manager to help with this step.'
     paragraph_2: 'Once the Task Order has been created, you will be asked to provide details about the task order in the Financial Verification step.'
+  ko_review_alert:
+    make_sure: Make sure to take a moment to
+    bullet_1: Verify that all information is accurate and up-to-date
+    bullet_2: Upload your Task Order (TO) document
+    bullet_3: Add both the Task Order (TO) and Lines of Accounting (LOA)
 login:
   ccpo_logo_alt_text: Cloud Computing Program Office Logo
   certificate_selection:
@@ -467,6 +472,8 @@ task_orders:
       add_button_text: Add / Invite Security Officer
       invite_button_text: Invite Security Officer
   ko_review:
+    alert_title: Verify Your Info
+    submitted_by: Below is an overview of the projected portfolio submitted by {name}
     task_order_information: Task Order Information
 testing:
   example_string: Hello World