From e8dede201b6e0cd5c7ccc2f9a31787bd520980e1 Mon Sep 17 00:00:00 2001
From: leigh-mil <leigh-ctr@friends.dds.mil>
Date: Wed, 24 Jul 2019 13:04:39 -0400
Subject: [PATCH] Reorder elements on the page, fix input widths, move
 validation icon for inputs

---
 styles/sections/_task_order.scss        |  69 ++++--
 templates/components/options_input.html |   8 +-
 templates/components/text_input.html    |  17 +-
 templates/task_orders/step_3.html       | 279 ++++++++++++------------
 4 files changed, 209 insertions(+), 164 deletions(-)

diff --git a/styles/sections/_task_order.scss b/styles/sections/_task_order.scss
index 30304790..70699557 100644
--- a/styles/sections/_task_order.scss
+++ b/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;
diff --git a/templates/components/options_input.html b/templates/components/options_input.html
index 784fb9e8..b7d8d858 100644
--- a/templates/components/options_input.html
+++ b/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 %}
 
-            <span v-show='showError'>{{ Icon('alert',classes="icon-validation") }}</span>
-            <span v-show='showValid'>{{ Icon('ok',classes="icon-validation") }}</span>
+            {% 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 %}
 
diff --git a/templates/components/text_input.html b/templates/components/text_input.html
index a979bd81..1b7e5aa7 100644
--- a/templates/components/text_input.html
+++ b/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 %}
       />
 
-      <template v-if='showError'>
-        <span class='usa-input__message' v-html='validationError'></span>
-      </template>
-      <template v-else>
-        <span class='usa-input__message'></span>
-      </template>
+      {% 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>
diff --git a/templates/task_orders/step_3.html b/templates/task_orders/step_3.html
index bfb29b54..b027b18c 100644
--- a/templates/task_orders/step_3.html
+++ b/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,140 +123,151 @@
         </div>
       </div>
 
-      <div class="usa-input">
-        <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) }}
-          {% endfor %}
+      <fieldset class="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, show_validation=False) }}
+        {% endfor %}
 
-          {{ LOAInput() }}
-        </fieldset>
+        {{ LOAInput() }}
+      </fieldset>
+
+      <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) }}
+          </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>
+                  <div class="usa-input__title">
+                    {{ 'task_orders.form.pop_start' | translate }}
+                  </div>
+                </legend>
+
+                <div class="date-picker-component">
+                  <input :name="name" v-bind:value="formattedDate" v-on:change="onInput" type="hidden" />
+
+                  <div class="usa-form-group usa-form-group-month">
+                    <label>{{ 'components.date_selector.month' | translate }}</label>
+                    <input
+                      name="date-month"
+                      max="12"
+                      maxlength="2"
+                      min="1"
+                      type="number"
+                      v-bind:class="{ 'usa-input-error': (month && !isMonthValid) }"
+                      v-model="month"
+                      v-on:change="onInput"
+                      />
+                  </div>
+
+                  <div class="usa-form-group usa-form-group-day">
+                    <label>{{ 'components.date_selector.day' | translate }}</label>
+                    <input
+                      name="date-day"
+                      maxlength="2"
+                      min="1"
+                      type="number"
+                      v-bind:class="{ 'usa-input-error': (day && !isDayValid) }"
+                      v-bind:max="daysMaxCalculation"
+                      v-model="day"
+                      v-on:change="onInput"
+                      />
+                  </div>
+
+                  <div class="usa-form-group usa-form-group-year">
+                    <label>{{ 'components.date_selector.year' | translate }}</label>
+                    <input
+                      name="date-year"
+                      maxlength="4"
+                      type="number"
+                      v-model="year"
+                      v-on:change="onInput"
+                      />
+                  </div>
+
+                  <div class="usa-form-group-date-ok" v-if="isDateValid">
+                    {{ Icon("ok", classes="icon--green") }}
+                  </div>
+                </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>
+                  <div class="usa-input__title">
+                    {{ 'task_orders.form.pop_end' | translate }}
+                  </div>
+                </legend>
+
+                <div class="date-picker-component">
+                  <input :name="name" v-bind:value="formattedDate" v-on:change="onInput" type="hidden" />
+
+                    <div class="usa-form-group usa-form-group-month">
+                      <label>{{ 'components.date_selector.month' | translate }}</label>
+                      <input
+                        name="date-month"
+                        max="12"
+                        maxlength="2"
+                        min="1"
+                        type="number"
+                        v-bind:class="{ 'usa-input-error': (month && !isMonthValid) }"
+                        v-model="month"
+                        v-on:change="onInput"
+                        />
+                    </div>
+
+                    <div class="usa-form-group usa-form-group-day">
+                      <label>{{ 'components.date_selector.day' | translate }}</label>
+                      <input
+                        name="date-day"
+                        maxlength="2"
+                        min="1"
+                        type="number"
+                        v-bind:class="{ 'usa-input-error': (day && !isDayValid) }"
+                        v-bind:max="daysMaxCalculation"
+                        v-model="day"
+                        v-on:change="onInput"
+                        />
+                    </div>
+
+                    <div class="usa-form-group usa-form-group-year">
+                      <label>{{ 'components.date_selector.year' | translate }}</label>
+                      <input
+                        name="date-year"
+                        maxlength="4"
+                        type="number"
+                        v-model="year"
+                        v-on:change="onInput"
+                        />
+                    </div>
+
+                  <div class="usa-form-group-date-ok" v-if="isDateValid">
+                    {{ Icon("ok", classes="icon--green") }}
+                  </div>
+                </div>
+              </fieldset>
+            </date-selector>
+          </div>
+        {% endif %}
       </div>
 
       {% if fields %}
-        {{ DatePicker(fields.start_date, watch=True, optional=False) }}
-        {{ DatePicker(fields.end_date, watch=True, optional=False) }}
         {{ TextInput(fields.obligated_amount, validation='dollars', watch=True) }}
       {% else %}
-        <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>
-              <div class="usa-input__title">
-                {{ 'task_orders.form.pop_start' | translate }}
-              </div>
-            </legend>
-
-            <div class="date-picker-component">
-              <input :name="name" v-bind:value="formattedDate" v-on:change="onInput" type="hidden" />
-
-              <div class="usa-form-group usa-form-group-month">
-                <label>{{ 'components.date_selector.month' | translate }}</label>
-                <input
-                  name="date-month"
-                  max="12"
-                  maxlength="2"
-                  min="1"
-                  type="number"
-                  v-bind:class="{ 'usa-input-error': (month && !isMonthValid) }"
-                  v-model="month"
-                  v-on:change="onInput"
-                  />
-              </div>
-
-              <div class="usa-form-group usa-form-group-day">
-                <label>{{ 'components.date_selector.day' | translate }}</label>
-                <input
-                  name="date-day"
-                  maxlength="2"
-                  min="1"
-                  type="number"
-                  v-bind:class="{ 'usa-input-error': (day && !isDayValid) }"
-                  v-bind:max="daysMaxCalculation"
-                  v-model="day"
-                  v-on:change="onInput"
-                  />
-              </div>
-
-              <div class="usa-form-group usa-form-group-year">
-                <label>{{ 'components.date_selector.year' | translate }}</label>
-                <input
-                  name="date-year"
-                  maxlength="4"
-                  type="number"
-                  v-model="year"
-                  v-on:change="onInput"
-                  />
-              </div>
-
-              <div class="usa-form-group-date-ok" v-if="isDateValid">
-                {{ Icon("ok", classes="icon--green") }}
-              </div>
-            </div>
-          </fieldset>
-        </date-selector>
-
-        <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>
-              <div class="usa-input__title">
-                {{ 'task_orders.form.pop_end' | translate }}
-              </div>
-            </legend>
-
-            <div class="date-picker-component">
-              <input :name="name" v-bind:value="formattedDate" v-on:change="onInput" type="hidden" />
-
-                <div class="usa-form-group usa-form-group-month">
-                  <label>{{ 'components.date_selector.month' | translate }}</label>
-                  <input
-                    name="date-month"
-                    max="12"
-                    maxlength="2"
-                    min="1"
-                    type="number"
-                    v-bind:class="{ 'usa-input-error': (month && !isMonthValid) }"
-                    v-model="month"
-                    v-on:change="onInput"
-                    />
-                </div>
-
-                <div class="usa-form-group usa-form-group-day">
-                  <label>{{ 'components.date_selector.day' | translate }}</label>
-                  <input
-                    name="date-day"
-                    maxlength="2"
-                    min="1"
-                    type="number"
-                    v-bind:class="{ 'usa-input-error': (day && !isDayValid) }"
-                    v-bind:max="daysMaxCalculation"
-                    v-model="day"
-                    v-on:change="onInput"
-                    />
-                </div>
-
-                <div class="usa-form-group usa-form-group-year">
-                  <label>{{ 'components.date_selector.year' | translate }}</label>
-                  <input
-                    name="date-year"
-                    maxlength="4"
-                    type="number"
-                    v-model="year"
-                    v-on:change="onInput"
-                    />
-                </div>
-
-              <div class="usa-form-group-date-ok" v-if="isDateValid">
-                {{ Icon("ok", classes="icon--green") }}
-              </div>
-            </div>
-          </fieldset>
-        </date-selector>
-
         <textinput
           v-cloak
           inline-template