pk/atst
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Reorder elements on the page, fix input widths, move validation icon for inputs

Browse Source
This commit is contained in:
leigh-mil
2019-07-24 13:04:39 -04:00
parent c4651332a2
commit e8dede201b
4 changed files with 209 additions and 164 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
styles/sections/_task_order.scss
View File

@@ -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,
.usa-input__title-inline { .usa-input__title-inline {
font-weight: $font-normal; 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 { button.icon-link {
margin-top: 0; margin-top: 0;
margin-left: 0; margin-left: 0;

8
templates/components/options_input.html
View File

@@ -1,7 +1,7 @@
{% from "components/icon.html" import Icon %} {% from "components/icon.html" import Icon %}
{% from "components/tooltip.html" import Tooltip %} {% 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 <optionsinput
name='{{ field.name }}' name='{{ field.name }}'
inline-template inline-template
@@ -27,8 +27,10 @@
<span class='usa-input__help'>{{ field.description | safe }}</span> <span class='usa-input__help'>{{ field.description | safe }}</span>
{% endif %} {% endif %}
<span v-show='showError'>{{ Icon('alert',classes="icon-validation") }}</span> {% if show_validation %}
<span v-show='showValid'>{{ Icon('ok',classes="icon-validation") }}</span> <span v-show='showError'>{{ Icon('alert',classes="icon-validation") }}</span>
<span v-show='showValid'>{{ Icon('ok',classes="icon-validation") }}</span>
{% endif %}
</legend> </legend>
{% endif %} {% endif %}

17
templates/components/text_input.html
View File

@@ -16,7 +16,8 @@
noMaxWidth=False, noMaxWidth=False,
optional=True, optional=True,
showLabel=True, showLabel=True,
watch=False) -%} watch=False,
show_validation=True) -%}
<textinput <textinput
v-cloak v-cloak
@@ -101,12 +102,14 @@
{% endif %} {% endif %}
/> />
<template v-if='showError'> {% if show_validation %}
<span class='usa-input__message' v-html='validationError'></span> <template v-if='showError'>
</template> <span class='usa-input__message' v-html='validationError'></span>
<template v-else> </template>
<span class='usa-input__message'></span> <template v-else>
</template> <span class='usa-input__message'></span>
</template>
{% endif %}
</div> </div>
</textinput> </textinput>

279
templates/task_orders/step_3.html
View File

@@ -30,13 +30,6 @@
</masked-input> </masked-input>
<input type='hidden' v-bind:value='rawValue' :name='name' /> <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> </div>
</textinput> </textinput>
</div> </div>
@@ -63,10 +56,13 @@
{% endif %} {% endif %}
inline-template> inline-template>
<div class="card"> <div class="card">
<div class="h3">
Base CLIN Information
</div>
<div class="form-row"> <div class="form-row">
<div class="form-col form-col--two-thirds"> <div class="form-col form-col--two-thirds">
{% if fields %} {% if fields %}
{{ OptionsInput(fields.jedi_clin_type, watch=True) }} {{ OptionsInput(fields.jedi_clin_type, watch=True, show_validation=False) }}
{% else %} {% else %}
<optionsinput :name="'clins-' + clinIndex + '-jedi_clin_type'" :watch='true' :optional='false' inline-template> <optionsinput :name="'clins-' + clinIndex + '-jedi_clin_type'" :watch='true' :optional='false' inline-template>
<div class="usa-input"> <div class="usa-input">
@@ -127,140 +123,151 @@
</div> </div>
</div> </div>
<div class="usa-input"> <fieldset class="task-order__loa-fieldset">
<fieldset class="usa-input__choices task-order__loa-fieldset"> <legend>
<legend> <div class="usa-input__title">
<div class="usa-input__title"> {{ 'task_orders.form.loa_label' | translate }}
{{ 'task_orders.form.loa_label' | translate }} </div>
</div> </legend>
</legend> {% for loa in fields.loas %}
{% for loa in fields.loas %} {{ TextInput(loa, showLabel=False, watch=True, show_validation=False) }}
{{ TextInput(loa, showLabel=False, watch=True) }} {% endfor %}
{% endfor %}
{{ LOAInput() }} {{ LOAInput() }}
</fieldset> </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> </div>
{% if fields %} {% 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) }} {{ TextInput(fields.obligated_amount, validation='dollars', watch=True) }}
{% else %} {% 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 <textinput
v-cloak v-cloak
inline-template inline-template