Reorder elements on the page, fix input widths, move validation icon for inputs

styles/sections/_task_order.scss

@@ -69,6 +69,57 @@
     }
   }
 
+  .card {
+    padding: ($gap * 5);
+
+    .usa-input {
+      margin: 0 $gap 0 0;
+    }
+
+    span.icon.icon--ok.icon-validation {
+      left: 47.5em;
+    }
+
+    .form-row {
+      margin: 0;
+    }
+
+    .usa-input input {
+      max-width: -webkit-fill-available;
+    }
+
+    select {
+      max-width: -webkit-fill-available;
+    }
+
+    button {
+      margin-bottom: $gap * 3;
+    }
+
+    .task-order__loa-fieldset {
+      .usa-input__title {
+        padding: 0 0 0.4rem 0;
+        font-size: 1.7rem;
+      }
+
+      .usa-input {
+        margin: 0;
+      }
+
+      input {
+        margin: $gap 0;
+      }
+
+      input:first-child {
+        margin-top: 0;
+      }
+
+      input:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+
   .usa-input__title,
   .usa-input__title-inline {
     font-weight: $font-normal;
@@ -135,24 +186,6 @@
       }
     }
 
-    .task-order__loa-fieldset {
-      .usa-input {
-        margin: 0;
-      }
-
-      input {
-        margin: $gap 0;
-      }
-
-      input:first-child {
-        margin-top: 0;
-      }
-
-      input:last-child {
-        margin-bottom: 0;
-      }
-    }
-
     button.icon-link {
       margin-top: 0;
       margin-left: 0;

templates/components/options_input.html

@@ -1,7 +1,7 @@
 {% from "components/icon.html" import Icon %}
 {% from "components/tooltip.html" import Tooltip %}
 
-{% macro OptionsInput(field, tooltip, inline=False, label=True, disabled=False, watch=False, optional=True) -%}
+{% macro OptionsInput(field, tooltip, inline=False, label=True, show_validation=True, disabled=False, watch=False, optional=True) -%}
   <optionsinput
     name='{{ field.name }}'
     inline-template
@@ -27,8 +27,10 @@
               <span class='usa-input__help'>{{ field.description | safe }}</span>
             {% endif %}
 
+            {% if show_validation %}
               <span v-show='showError'>{{ Icon('alert',classes="icon-validation") }}</span>
               <span v-show='showValid'>{{ Icon('ok',classes="icon-validation") }}</span>
+            {% endif %}
           </legend>
         {% endif %}
 

templates/components/text_input.html

@@ -16,7 +16,8 @@
   noMaxWidth=False,
   optional=True,
   showLabel=True,
-  watch=False) -%}
+  watch=False,
+  show_validation=True) -%}
 
   <textinput
     v-cloak
@@ -101,12 +102,14 @@
         {% endif %}
       />
 
+      {% if show_validation %}
         <template v-if='showError'>
           <span class='usa-input__message' v-html='validationError'></span>
         </template>
         <template v-else>
           <span class='usa-input__message'></span>
         </template>
+      {% endif %}
 
     </div>
   </textinput>

templates/task_orders/step_3.html

@@ -30,13 +30,6 @@
         </masked-input>
 
         <input type='hidden' v-bind:value='rawValue' :name='name' />
-
-        <template v-if='showError'>
-          <span class='usa-input__message' v-html='validationError'></span>
-        </template>
-        <template v-else>
-          <span class='usa-input__message'></span>
-        </template>
       </div>
     </textinput>
   </div>
@@ -63,10 +56,13 @@
     {% endif %}
     inline-template>
     <div class="card">
+      <div class="h3">
+        Base CLIN Information
+      </div>
       <div class="form-row">
         <div class="form-col form-col--two-thirds">
           {% if fields %}
-            {{ OptionsInput(fields.jedi_clin_type, watch=True) }}
+            {{ OptionsInput(fields.jedi_clin_type, watch=True, show_validation=False) }}
           {% else %}
             <optionsinput :name="'clins-' + clinIndex + '-jedi_clin_type'" :watch='true' :optional='false' inline-template>
               <div class="usa-input">
@@ -127,26 +123,29 @@
         </div>
       </div>
 
-      <div class="usa-input">
+      <fieldset class="task-order__loa-fieldset">
-        <fieldset class="usa-input__choices task-order__loa-fieldset">
         <legend>
           <div class="usa-input__title">
             {{ 'task_orders.form.loa_label' | translate }}
           </div>
         </legend>
         {% for loa in fields.loas %}
-            {{ TextInput(loa, showLabel=False, watch=True) }}
+          {{ TextInput(loa, showLabel=False, watch=True, show_validation=False) }}
         {% endfor %}
 
         {{ LOAInput() }}
       </fieldset>
-      </div>
 
+      <div class="form-row">
         {% if fields %}
+          <div class="form-col">
             {{ DatePicker(fields.start_date, watch=True, optional=False) }}
+          </div>
+          <div class="form-col">
             {{ DatePicker(fields.end_date, watch=True, optional=False) }}
-        {{ TextInput(fields.obligated_amount, validation='dollars', watch=True) }}
+          </div>
         {% else %}
+          <div class="form-col">
             <date-selector :name-tag="'clins-' + clinIndex + '-start_date'" :watch='true' :optional='false' inline-template>
               <fieldset class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid }">
                 <legend>
@@ -203,7 +202,9 @@
                 </div>
               </fieldset>
             </date-selector>
+          </div>
 
+          <div class="form-col">
             <date-selector :name-tag="'clins-' + clinIndex + '-end_date'" :watch='true' :optional='false' inline-template>
               <fieldset class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid }">
                 <legend>
@@ -260,7 +261,13 @@
                 </div>
               </fieldset>
             </date-selector>
+          </div>
+        {% endif %}
+      </div>
 
+      {% if fields %}
+        {{ TextInput(fields.obligated_amount, validation='dollars', watch=True) }}
+      {% else %}
         <textinput
           v-cloak
           inline-template