Merge pull request #644 from dod-ccpo/ko-review-styling

KO Review styling

styles/components/_forms.scss

@@ -77,6 +77,7 @@
 .form__sub-fields {
   @include alert;
   @include alert-level('default');
+  margin-top: $gap * 2;
   display: block;
 
   .usa-input {

styles/elements/_panels.scss

@@ -68,6 +68,10 @@
     }
   }
 
+  .panel__body {
+    margin-right: $gap * 2;
+  }
+
   .panel__heading {
     padding: $gap * 2;
 

styles/sections/_task_order.scss

@@ -281,9 +281,6 @@
     }
   }
 
-  .usa-input__title {
-    color: $color-gray;
-  }
 
   .subheading, .description {
     color: $color-gray;

templates/components/review_field.html

@@ -1,5 +1,5 @@
 {% macro ReviewField(heading, field, filter=None) %}
-  <div class="col col--grow">
+  <div class="col col--grow panel__body">
     <h4 class='task-order-form__heading'>{{ heading }}</h4>
     {% if field %}
       <p>{{ field | findFilter(filter) }}</p>

templates/fragments/task_order_review/reporting.html

@@ -21,21 +21,25 @@
   }}
 </div>
 
-<h4 class='task-order-form__heading'>{{ "task_orders.new.review.complexity"| translate }}</h4>
+<div class="row">
-{% if task_order.complexity %}
+  <div class="col col--grow panel__body">
-  <ul class="checklist">
+    <h4 class='task-order-form__heading'>{{ "task_orders.new.review.complexity"| translate }}</h4>
-  {% for item in task_order.complexity %}
+    {% if task_order.complexity %}
-    <li>
+      <ul class="checklist">
-      {{ Icon('ok', classes='icon--gray icon--medium') }}{{ "forms.task_order.complexity.{}".format(item) | translate }}{% if item == 'other' %}: {{ task_order.complexity_other }}{% endif %}
+      {% for item in task_order.complexity %}
-    </li>
+        <li>
-  {% endfor %}
+          {{ Icon('ok', classes='icon--gray icon--medium') }}{{ "forms.task_order.complexity.{}".format(item) | translate }}{% if item == 'other' %}: {{ task_order.complexity_other }}{% endif %}
-  </ul>
+        </li>
-{% else %}
+      {% endfor %}
-  <p>{{ RequiredLabel() }}</p>
+      </ul>
-{% endif %}
+    {% else %}
+      <p>{{ RequiredLabel() }}</p>
+    {% endif %}
+  </div>
+</div>
 
 <div class="row">
-  <div class="col col--grow">
+  <div class="col col--grow panel__body">
     <h4 class='task-order-form__heading'>{{ "task_orders.new.review.team"| translate }}</h4>
     {% if task_order.dev_team %}
       <ul class="checklist">

templates/portfolios/task_orders/review.html

@@ -66,9 +66,9 @@
         <div class="h2">{{ "task_orders.ko_review.task_order_information"| translate }}</div>
 
         <div class="form__sub-fields">
-          {{ UploadInput(form.pdf) }}
+          {{ UploadInput(form.pdf, show_label=True) }}
-          {{ TextInput(form.number) }}
+          {{ TextInput(form.number, placeholder='1234567890') }}
-          {{ TextInput(form.loa) }}
+          {{ TextInput(form.loa, placeholder='1234567890') }}
           {{ TextInput(form.custom_clauses, paragraph=True) }}
         </div>
 

translations.yaml

@@ -62,7 +62,7 @@ forms:
     pdf_label: Upload a copy of your Task Order document
     pdf_description: Upload a PDF of the Task Order that you entered in your system of record for your organization.
     to_number: Task Order Number
-    loa: Line of Accounting (LOA) #1
+    loa: Line of Accounting (LOA) #1
     custom_clauses_label: Task Order Custom Clauses (optional)
     custom_clauses_description: This will put a pause on the CSP access once the KO signs until the CCPO reviews that language to make sure it is legal.
   edit_member: