diff --git a/styles/sections/_task_order.scss b/styles/sections/_task_order.scss index 30304790..7e8c1220 100644 --- a/styles/sections/_task_order.scss +++ b/styles/sections/_task_order.scss @@ -58,6 +58,14 @@ margin-bottom: $gap * 4; } + .task-order__number { + text-align: right; + } + + .task-order__details { + max-width: 65%; + } + .totals-box { padding: $gap * 4; padding-top: $gap * 2; @@ -69,6 +77,59 @@ } } + .card { + padding: ($gap * 5); + + .usa-input { + margin: 0 $gap 0 0; + + input { + max-width: none; + } + } + + .usa-input--validation--dollars label span.icon { + left: auto; + right: -$gap * 9; + } + + .form-row { + margin: 0; + } + + select { + max-width: -webkit-fill-available; + font-weight: bold; + } + + 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; + + &:first-child { + margin-top: 0; + } + + &:last-child { + margin-bottom: 0; + } + } + } + } + .usa-input__title, .usa-input__title-inline { font-weight: $font-normal; @@ -135,24 +196,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) -%} {{ field.description | safe }} {% endif %} - {{ Icon('alert',classes="icon-validation") }} - {{ Icon('ok',classes="icon-validation") }} + {% if show_validation %} + {{ Icon('alert',classes="icon-validation") }} + {{ Icon('ok',classes="icon-validation") }} + {% endif %} {% 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) -%} - - + {% if show_validation %} + + + {% endif %} diff --git a/templates/task_orders/form_header.html b/templates/task_orders/form_header.html index 3c86cf01..a5081b96 100644 --- a/templates/task_orders/form_header.html +++ b/templates/task_orders/form_header.html @@ -6,7 +6,7 @@ {{ title }} -
+
{% if to_number %} Task Order Number: {{ to_number }} {% endif %} diff --git a/templates/task_orders/step_3.html b/templates/task_orders/step_3.html index c15533d2..f1c3d115 100644 --- a/templates/task_orders/step_3.html +++ b/templates/task_orders/step_3.html @@ -30,13 +30,6 @@ - - -
@@ -50,137 +43,109 @@ {% endmacro %} -{% macro CLINFields(fields, index) %} - {% if index != 0 %} -
- {% endif %} - +{% macro CLINFields(fields=None, index=None) %} -
+
+
+ {{ 'task_orders.form.base_clin_title' | translate }} +
- {{ OptionsInput(fields.jedi_clin_type, watch=True) }} + {% if fields %} + {{ OptionsInput(fields.jedi_clin_type, watch=True, show_validation=False) }} + {% else %} + +
+
+ +
+ {{ 'task_orders.form.clin_type_label' | translate }} +
+
+ +
+
+
+ {% endif %}
- {{ TextInput(fields.number, watch=True) }} + {% if fields %} + {{ TextInput(fields.number, watch=True) }} + {% else %} + +
+ + + + + + + + + +
+
+ {% endif %}
-
-
- -
- {{ 'task_orders.form.loa_label' | translate }} -
-
- {% for loa in fields.loas %} - {{ TextInput(loa, showLabel=False, watch=True) }} - {% endfor %} - - {{ LOAInput() }} -
-
- - {{ DatePicker(fields.start_date, watch=True, optional=False) }} - {{ DatePicker(fields.end_date, watch=True, optional=False) }} - {{ TextInput(fields.obligated_amount, validation='dollars', watch=True) }} -
- -{% endmacro %} - - -{% block to_builder_form_field %} - - -
- {{ TOFormStepHeader('task_orders.form.base_clin_title' | translate, 'task_orders.form.base_clin_description' | translate, task_order.number) }} - - {% for clin in form.clins %} - {{ CLINFields(clin, index=loop.index - 1) }} +
+ +
+ {{ 'task_orders.form.loa_label' | translate }} +
+
+ {% for loa in fields.loas %} + {{ TextInput(loa, showLabel=False, watch=True, show_validation=False) }} {% endfor %} -
-
- -
-
-
- -
-
- -
- {{ 'task_orders.form.clin_type_label' | translate }} -
-
- -
-
-
-
-
- -
- - - - - - - - - -
-
- -
-
- -
-
- -
- {{ 'task_orders.form.loa_label' | translate }} -
-
- {{ LOAInput() }} -
-
+ {{ LOAInput() }} +
+
+ {% if fields %} +
+ {{ DatePicker(fields.start_date, watch=True, optional=False) }} +
+
+ {{ DatePicker(fields.end_date, watch=True, optional=False) }} +
+ {% else %} +
@@ -203,7 +168,7 @@ v-bind:class="{ 'usa-input-error': (month && !isMonthValid) }" v-model="month" v-on:change="onInput" - /> + />
@@ -217,7 +182,7 @@ v-bind:max="daysMaxCalculation" v-model="day" v-on:change="onInput" - /> + />
@@ -228,17 +193,23 @@ type="number" v-model="year" v-on:change="onInput" - /> - + />
{{ Icon("ok", classes="icon--green") }}
+

+ {% if maxdate and mindate %}Date must be between {{mindate.strftime("%m/%d/%Y")}} and {{maxdate.strftime("%m/%d/%Y")}}{% endif %} + {% if maxdate and not mindate %}Date must be before or on {{maxdate.strftime("%m/%d/%Y")}}{% endif %} + {% if mindate and not maxdate %}Date must be after or on {{mindate.strftime("%m/%d/%Y")}}{% endif %} +

+
+
@@ -250,93 +221,120 @@
-
- - -
+
+ + +
-
- - -
+
+ + +
-
- - - -
+
+ + +
{{ Icon("ok", classes="icon--green") }}
+

+ {% if maxdate and mindate %}Date must be between {{mindate.strftime("%m/%d/%Y")}} and {{maxdate.strftime("%m/%d/%Y")}}{% endif %} + {% if maxdate and not mindate %}Date must be before or on {{maxdate.strftime("%m/%d/%Y")}}{% endif %} + {% if mindate and not maxdate %}Date must be after or on {{mindate.strftime("%m/%d/%Y")}}{% endif %} +

- - -
- - - - - - - - - -
-
- + {% endif %} +
+ + {% if fields %} + {{ TextInput(fields.obligated_amount, validation='dollars', watch=True) }} + {% else %} + +
+ + + + + + + + + +
+
+ {% endif %} + +
+{% endmacro %} + + +{% block to_builder_form_field %} + +
+ {{ TOFormStepHeader('task_orders.form.clin_title' | translate, 'task_orders.form.clin_description' | translate, task_order.number) }} + + {% for clin in form.clins %} + {{ CLINFields(clin, index=loop.index - 1) }} + {% endfor %} + +
+ {{ CLINFields() }}