From daec01eba0c187a09cfb92de4d7473ec31d969d5 Mon Sep 17 00:00:00 2001
From: leigh-mil <leigh-ctr@friends.dds.mil>
Date: Wed, 12 Jun 2019 15:58:35 -0400
Subject: [PATCH] Format LOA fields

---
 styles/sections/_task_order.scss | 19 ++++++++++++++++++
 templates/task_orders/edit.html  | 34 +++++++++++++++++++++++---------
 2 files changed, 44 insertions(+), 9 deletions(-)

diff --git a/styles/sections/_task_order.scss b/styles/sections/_task_order.scss
index e9fcc9b8..9b84e463 100644
--- a/styles/sections/_task_order.scss
+++ b/styles/sections/_task_order.scss
@@ -77,6 +77,25 @@
     .usa-alert {
       margin: 1.5em 0;
     }
+
+    .task-order__loa-fieldset {
+      .usa-input {
+        margin: 0;
+      }
+
+      input {
+        margin: $gap 0;
+        max-width: unset;
+      }
+
+      input:first-child {
+        margin-top: 0;
+      }
+
+      input:last-child {
+        margin-bottom: 0;
+      }
+    }
   }
 
   .row.row__form-fields {
diff --git a/templates/task_orders/edit.html b/templates/task_orders/edit.html
index 6e0c9007..3bcf58f3 100644
--- a/templates/task_orders/edit.html
+++ b/templates/task_orders/edit.html
@@ -13,8 +13,7 @@
 {% macro LOAInput() %}
   <div v-for="loa in loas">
     <textinput :name="'clins-' + clinIndex + '-loas-' + loaIndex(loa)" inline-template>
-      <div>
-
+      <div class="usa-input usa-input--validation--anything">
         <masked-input
           v-on:input='onInput'
           v-on:blur='onBlur'
@@ -70,12 +69,21 @@
         </div>
       </div>
 
-      <div>Line of accounting (43 characters)</div>
-      {% for loa in fields.loas %}
-        {{ TextInput(loa, showLabel=False) }}
-      {% endfor %}
+      <div class="usa-input">
+        <fieldset class="usa-input__choices task-order__loa-fieldset">
+          <legend>
+            <div class="usa-input__title">
+              Line of accounting (43 characters)
+            </div>
+          </legend>
+          {% for loa in fields.loas %}
+            {{ TextInput(loa, showLabel=False) }}
+          {% endfor %}
+
+          {{ LOAInput() }}
+        </fieldset>
+      </div>
 
-      {{ LOAInput() }}
       {{ DatePicker(fields.start_date) }}
       {{ DatePicker(fields.end_date) }}
       {{ TextInput(fields.obligated_amount, validation='dollars') }}
@@ -190,8 +198,16 @@
                       </div>
                     </div>
 
-                    <div>Line of accounting (43 characters)</div>
-                    {{ LOAInput() }}
+                    <div class="usa-input">
+                      <fieldset class="usa-input__choices task-order__loa-fieldset">
+                        <legend>
+                          <div class="usa-input__title">
+                            Line of accounting (43 characters)
+                          </div>
+                        </legend>
+                        {{ LOAInput() }}
+                      </fieldset>
+                    </div>
 
                     <date-selector :name-tag="'clins-' + clinIndex + '-start_date'" inline-template>
                       <fieldset class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid }">