From 4285477f4dc447c989b3f8d61c7c11ebcb38f794 Mon Sep 17 00:00:00 2001
From: leigh-mil <leigh-ctr@friends.dds.mil>
Date: Mon, 10 Jun 2019 20:02:23 -0400
Subject: [PATCH] Use rows and columns to position TotalsBox correctly

---
 templates/task_orders/edit.html | 466 ++++++++++++++++----------------
 1 file changed, 232 insertions(+), 234 deletions(-)

diff --git a/templates/task_orders/edit.html b/templates/task_orders/edit.html
index 9ccbacb4..9a63cb0f 100644
--- a/templates/task_orders/edit.html
+++ b/templates/task_orders/edit.html
@@ -4,6 +4,7 @@
 {% from 'components/icon.html' import Icon %}
 {% from 'components/options_input.html' import OptionsInput %}
 {% from 'components/save_button.html' import SaveButton %}
+{% from "components/semi_collapsible_text.html" import SemiCollapsibleText %}
 {% from "components/sticky_cta.html" import StickyCTA %}
 {% from 'components/text_input.html' import TextInput %}
 {% from "components/totals_box.html" import TotalsBox %}
@@ -77,7 +78,6 @@
 {% endmacro %}
 
 {% block portfolio_content %}
-
   {% call StickyCTA(text="Add Funding") %}
     <span class="action-group">
       <input type="submit" tabindex="0" value="Review task order" form="new-task-order" class="usa-button usa-button-primary">
@@ -89,6 +89,7 @@
       </a>
     </span>
   {% endcall %}
+
   <to-form inline-template v-bind:initial-clin-count="{{ form.clins.data | length }}">
     <div class="task-order-summary">
       {% include "fragments/flash.html" %}
@@ -100,250 +101,247 @@
         <form id="new-task-order" action='{{ action }}' method="POST" autocomplete="off" enctype="multipart/form-data">
           {{ form.csrf_token }}
 
-          <semi-collapsible-text inline-template>
-            <div>
-              <div v-bind:class="{ 'semi-collapsed' : !open }">
-                {{ "task_orders.new.form_help_text" | translate }}
-              </div>
-              <a v-on:click='toggle' v-show="!open" class="right more">More{{ Icon('caret_down') }}</a>
-              <a v-on:click='toggle' v-show="open" class="right more">Less{{ Icon('caret_up') }}</a>
-            </div>
-          </semi-collapsible-text>
+          {{ SemiCollapsibleText(paragraph="task_orders.new.form_help_text" | translate) }}
 
           <hr>
 
           <div class="h1">Add your task order</div>
-          {{ TextInput(form.number, validation='taskOrderNumber') }}
+          <div class="row">
+            <div class="col">
+              {{ TextInput(form.number, validation='taskOrderNumber') }}
 
-          <div class="h3">Add the summary of cloud funding</div>
-          <div>
-            Data must match with what is in your uploaded document.
-          </div>
+              <hr>
 
-          {% for clin in form.clins %}
-            {{ CLINFields(clin, index=loop.index - 1) }}
-          {% endfor %}
-
-          <div v-for="clin in clins">
-            <hr v-if="clinIndex !== 0">
-            <clin-fields v-bind:initial-clin-index='clinIndex' inline-template>
+              <div class="h3">Add the summary of cloud funding</div>
               <div>
-                <div class="usa-input">
-                  <fieldset data-ally-disabled="true" class="usa-input__choices">
-                      <legend>
-                        <div class="usa-input__title">
-                          CLIN type
-                        </div>
-                      </legend>
-                      <select :id="'clins-' + clinIndex + '-jedi_clin_type'" :name="'clins-' + clinIndex + '-jedi_clin_type'">
-                        <option value="JEDI_CLIN_1">{{ "forms.task_order.clin_01_label" | translate }}</option>
-                        <option value="JEDI_CLIN_2">{{ "forms.task_order.clin_02_label" | translate }}</option>
-                        <option value="JEDI_CLIN_3">{{ "forms.task_order.clin_03_label" | translate }}</option>
-                        <option value="JEDI_CLIN_4">{{ "forms.task_order.clin_04_label" | translate }}</option>
-                      </select>
-                  </fieldset>
-                </div>
-
-                <textinput :name="'clins-' + clinIndex + '-number'" inline-template>
-                  <div>
-                    <label :for="name">
-                      <span v-show='showError'>{{ Icon('alert',classes="icon-validation") }}</span>
-                      <span v-show='showValid'>{{ Icon('ok',classes="icon-validation") }}</span>
-                      <div class="usa-input__title">CLIN</div>
-                    </label>
-
-                    <masked-input
-                      v-on:input='onInput'
-                      v-on:blur='onBlur'
-                      v-on:change='onChange'
-                      v-bind:value='value'
-                      v-bind:mask='mask'
-                      v-bind:pipe='pipe'
-                      v-bind:keep-char-positions='keepCharPositions'
-                      v-bind:aria-invalid='showError'
-                      type='text'
-                      :id='name'
-                      ref='input'>
-                    </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>Line of accounting (43 characters)</div>
-                {{ LOAInput() }}
-
-                <date-selector :name-tag="'clins-' + clinIndex + '-start_date'" inline-template>
-                  <fieldset class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid }">
-                    <legend>
-                      <div class="usa-input__title">
-                        Start of period of performance (PoP)
-                      </div>
-                    </legend>
-
-                    <div class="date-picker-component">
-                      <input :name="name" v-bind:value="formattedDate" type="hidden" />
-
-                      <div class="usa-form-group usa-form-group-month">
-                        <label>Month</label>
-                        <input
-                          name="date-month"
-                          max="12"
-                          maxlength="2"
-                          min="1"
-                          type="number"
-                          v-bind:class="{ 'usa-input-error': (month && !isMonthValid) }"
-                          v-model="month"
-                        />
-                      </div>
-
-                      <div class="usa-form-group usa-form-group-day">
-                        <label>Day</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"
-                        />
-                      </div>
-
-                      <div class="usa-form-group usa-form-group-year">
-                        <label>Year</label>
-                        <input
-                          name="date-year"
-                          maxlength="4"
-                          type="number"
-                          v-model="year"
-                        />
-
-                      </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'" inline-template>
-                  <fieldset class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid }">
-                    <legend>
-                      <div class="usa-input__title">
-                        End of period of performance (PoP)
-                      </div>
-                    </legend>
-
-                    <div class="date-picker-component">
-                      <input :name="name" v-bind:value="formattedDate" type="hidden" />
-
-                      <div class="usa-form-group usa-form-group-month">
-                        <label>Month</label>
-                        <input
-                          name="date-month"
-                          max="12"
-                          maxlength="2"
-                          min="1"
-                          type="number"
-                          v-bind:class="{ 'usa-input-error': (month && !isMonthValid) }"
-                          v-model="month"
-                        />
-                      </div>
-
-                      <div class="usa-form-group usa-form-group-day">
-                        <label>Day</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"
-                        />
-                      </div>
-
-                      <div class="usa-form-group usa-form-group-year">
-                        <label>Year</label>
-                        <input
-                          name="date-year"
-                          maxlength="4"
-                          type="number"
-                          v-model="year"
-                        />
-
-                      </div>
-
-                      <div class="usa-form-group-date-ok" v-if="isDateValid">
-                        {{ Icon("ok", classes="icon--green") }}
-                      </div>
-                    </div>
-                  </fieldset>
-                </date-selector>
-
-                <textinput :name="'clins-' + clinIndex + '-obligated_amount'" validation="dollars" inline-template>
-                  <div>
-                    <label :for="name">
-                      <span v-show='showError'>{{ Icon('alert',classes="icon-validation") }}</span>
-                      <span v-show='showValid'>{{ Icon('ok',classes="icon-validation") }}</span>
-                      <div class="usa-input__title">Funds obligated for cloud</div>
-                    </label>
-
-                    <masked-input
-                      v-on:input='onInput'
-                      v-on:blur='onBlur'
-                      v-on:change='onChange'
-                      v-bind:value='value'
-                      v-bind:mask='mask'
-                      v-bind:pipe='pipe'
-                      v-bind:keep-char-positions='keepCharPositions'
-                      v-bind:aria-invalid='showError'
-                      v-bind:show-mask='true'
-                      type='text'
-                      :id='name'
-                      ref='input'>
-                    </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>
+                Data must match with what is in your uploaded document.
               </div>
-            </clin-fields>
+
+              {% for clin in form.clins %}
+                {{ CLINFields(clin, index=loop.index - 1) }}
+              {% endfor %}
+
+              <div v-for="clin in clins">
+                <hr v-if="clinIndex !== 0">
+                <clin-fields v-bind:initial-clin-index='clinIndex' inline-template>
+                  <div>
+                    <div class="usa-input">
+                      <fieldset data-ally-disabled="true" class="usa-input__choices">
+                          <legend>
+                            <div class="usa-input__title">
+                              CLIN type
+                            </div>
+                          </legend>
+                          <select :id="'clins-' + clinIndex + '-jedi_clin_type'" :name="'clins-' + clinIndex + '-jedi_clin_type'">
+                            <option value="JEDI_CLIN_1">{{ "forms.task_order.clin_01_label" | translate }}</option>
+                            <option value="JEDI_CLIN_2">{{ "forms.task_order.clin_02_label" | translate }}</option>
+                            <option value="JEDI_CLIN_3">{{ "forms.task_order.clin_03_label" | translate }}</option>
+                            <option value="JEDI_CLIN_4">{{ "forms.task_order.clin_04_label" | translate }}</option>
+                          </select>
+                      </fieldset>
+                    </div>
+
+                    <textinput :name="'clins-' + clinIndex + '-number'" inline-template>
+                      <div>
+                        <label :for="name">
+                          <span v-show='showError'>{{ Icon('alert',classes="icon-validation") }}</span>
+                          <span v-show='showValid'>{{ Icon('ok',classes="icon-validation") }}</span>
+                          <div class="usa-input__title">CLIN</div>
+                        </label>
+
+                        <masked-input
+                          v-on:input='onInput'
+                          v-on:blur='onBlur'
+                          v-on:change='onChange'
+                          v-bind:value='value'
+                          v-bind:mask='mask'
+                          v-bind:pipe='pipe'
+                          v-bind:keep-char-positions='keepCharPositions'
+                          v-bind:aria-invalid='showError'
+                          type='text'
+                          :id='name'
+                          ref='input'>
+                        </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>Line of accounting (43 characters)</div>
+                    {{ LOAInput() }}
+
+                    <date-selector :name-tag="'clins-' + clinIndex + '-start_date'" inline-template>
+                      <fieldset class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid }">
+                        <legend>
+                          <div class="usa-input__title">
+                            Start of period of performance (PoP)
+                          </div>
+                        </legend>
+
+                        <div class="date-picker-component">
+                          <input :name="name" v-bind:value="formattedDate" type="hidden" />
+
+                          <div class="usa-form-group usa-form-group-month">
+                            <label>Month</label>
+                            <input
+                              name="date-month"
+                              max="12"
+                              maxlength="2"
+                              min="1"
+                              type="number"
+                              v-bind:class="{ 'usa-input-error': (month && !isMonthValid) }"
+                              v-model="month"
+                            />
+                          </div>
+
+                          <div class="usa-form-group usa-form-group-day">
+                            <label>Day</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"
+                            />
+                          </div>
+
+                          <div class="usa-form-group usa-form-group-year">
+                            <label>Year</label>
+                            <input
+                              name="date-year"
+                              maxlength="4"
+                              type="number"
+                              v-model="year"
+                            />
+
+                          </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'" inline-template>
+                      <fieldset class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid }">
+                        <legend>
+                          <div class="usa-input__title">
+                            End of period of performance (PoP)
+                          </div>
+                        </legend>
+
+                        <div class="date-picker-component">
+                          <input :name="name" v-bind:value="formattedDate" type="hidden" />
+
+                          <div class="usa-form-group usa-form-group-month">
+                            <label>Month</label>
+                            <input
+                              name="date-month"
+                              max="12"
+                              maxlength="2"
+                              min="1"
+                              type="number"
+                              v-bind:class="{ 'usa-input-error': (month && !isMonthValid) }"
+                              v-model="month"
+                            />
+                          </div>
+
+                          <div class="usa-form-group usa-form-group-day">
+                            <label>Day</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"
+                            />
+                          </div>
+
+                          <div class="usa-form-group usa-form-group-year">
+                            <label>Year</label>
+                            <input
+                              name="date-year"
+                              maxlength="4"
+                              type="number"
+                              v-model="year"
+                            />
+
+                          </div>
+
+                          <div class="usa-form-group-date-ok" v-if="isDateValid">
+                            {{ Icon("ok", classes="icon--green") }}
+                          </div>
+                        </div>
+                      </fieldset>
+                    </date-selector>
+
+                    <textinput :name="'clins-' + clinIndex + '-obligated_amount'" validation="dollars" inline-template>
+                      <div>
+                        <label :for="name">
+                          <span v-show='showError'>{{ Icon('alert',classes="icon-validation") }}</span>
+                          <span v-show='showValid'>{{ Icon('ok',classes="icon-validation") }}</span>
+                          <div class="usa-input__title">Funds obligated for cloud</div>
+                        </label>
+
+                        <masked-input
+                          v-on:input='onInput'
+                          v-on:blur='onBlur'
+                          v-on:change='onChange'
+                          v-bind:value='value'
+                          v-bind:mask='mask'
+                          v-bind:pipe='pipe'
+                          v-bind:keep-char-positions='keepCharPositions'
+                          v-bind:aria-invalid='showError'
+                          v-bind:show-mask='true'
+                          type='text'
+                          :id='name'
+                          ref='input'>
+                        </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>
+                </clin-fields>
+              </div>
+
+              <button
+                class="icon-link"
+                v-on:click="addClin"
+                type="button">
+                {{ Icon('plus') }}
+                <span>Add another CLIN or Sub-CLIN</span>
+              </button>
+
+              <hr>
+              <div class="h3">Upload your supporting documentation</div>
+              <div>
+                Upload a single PDF containing all relevant information. {{ Icon('help')}}
+              </div>
+            {{ UploadInput(form.pdf) }}
           </div>
-
-        <button
-          class="icon-link"
-          v-on:click="addClin"
-          type="button">
-          {{ Icon('plus') }}
-          <span>Add another CLIN or Sub-CLIN</span>
-        </button>
-
-        <hr>
-        <div class="h3">Upload your supporting documentation</div>
-        <div>
-          Upload a single PDF containing all relevant information. {{ Icon('help')}}
+          {{ TotalsBox(task_order=task_order) }}
         </div>
-        {{ UploadInput(form.pdf) }}
-
       </form>
-      {{ TotalsBox(task_order=task_order) }}
     </div>
   </to-form>