Fix validation icon and spacing

This commit is contained in:
leigh-mil 2019-07-24 14:02:02 -04:00
parent f50beae754
commit f1f344388a
2 changed files with 14 additions and 3 deletions

View File

@ -84,8 +84,9 @@
margin: 0 $gap 0 0; margin: 0 $gap 0 0;
} }
span.icon.icon--ok.icon-validation { .usa-input--validation--dollars label span.icon.icon--ok.icon-validation {
left: 47.5em; left: auto;
right: -$gap * 9;
} }
.form-row { .form-row {

View File

@ -200,6 +200,11 @@
{{ Icon("ok", classes="icon--green") }} {{ Icon("ok", classes="icon--green") }}
</div> </div>
</div> </div>
<p class="usa-input-error-message" v-bind:class="{ 'form-has-errors': !isWithinDateRange }">
{% 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 %}
</p>
</fieldset> </fieldset>
</date-selector> </date-selector>
</div> </div>
@ -259,6 +264,11 @@
{{ Icon("ok", classes="icon--green") }} {{ Icon("ok", classes="icon--green") }}
</div> </div>
</div> </div>
<p class="usa-input-error-message" v-bind:class="{ 'form-has-errors': !isWithinDateRange }">
{% 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 %}
</p>
</fieldset> </fieldset>
</date-selector> </date-selector>
</div> </div>
@ -274,7 +284,7 @@
:name="'clins-' + clinIndex + '-obligated_amount'" :name="'clins-' + clinIndex + '-obligated_amount'"
validation="dollars" validation="dollars"
:watch='true'> :watch='true'>
<div class="usa-input usa-input--validation--dollars noMaxWidth"> <div class="usa-input usa-input--validation--dollars">
<label :for="name"> <label :for="name">
<div class="usa-input__title">{{ 'task_orders.form.obligated_funds_label' | translate }}</div> <div class="usa-input__title">{{ 'task_orders.form.obligated_funds_label' | translate }}</div>
<span v-show='showError'>{{ Icon('alert',classes="icon-validation") }}</span> <span v-show='showError'>{{ Icon('alert',classes="icon-validation") }}</span>