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

Merge pull request #985 from dod-ccpo/to-form-step-3-styling

Browse Source 
TO form step 3 styling
This commit is contained in:
leigh-mil 2019-07-29 14:32:34 -04:00 committed by GitHub
commit c5ec2c296f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 297 additions and 250 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
styles/sections/_task_order.scss
View File

@ -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;

4
templates/components/options_input.html
View File

@ -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 %}
{% 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 %}

5
templates/components/text_input.html
View File

@ -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 %}
/>
{% 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>

2
templates/task_orders/form_header.html
View File

@ -6,7 +6,7 @@
{{ title }}
</div>
</div>
<div class="form-col form-col--third">
<div class="form-col form-col--third task-order__number">
{% if to_number %}
<strong>Task Order Number:</strong> {{ to_number }}
{% endif %}

136
templates/task_orders/step_3.html
View File

@ -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>
@ -50,71 +43,27 @@
</button>
{% endmacro %}
{% macro CLINFields(fields, index) %}
{% if index != 0 %}
<hr>
{% endif %}
{% macro CLINFields(fields=None, index=None) %}
<clin-fields
{% if fields %}
v-bind:initial-clin-index='{{ index }}'
v-bind:initial-loa-count="{{ fields.loas.data | length or 0 }}"
v-bind:initial-clin-type="'{{ fields.jedi_clin_type.data }}'"
v-bind:initial-amount='{{ fields.obligated_amount.data or 0 }}'
inline-template>
<div>
<div class="form-row">
<div class="form-col form-col--two-thirds">
{{ OptionsInput(fields.jedi_clin_type, watch=True) }}
</div>
<div class="form-col form-col--third">
{{ TextInput(fields.number, watch=True) }}
</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 %}
{{ LOAInput() }}
</fieldset>
</div>
{{ DatePicker(fields.start_date, watch=True, optional=False) }}
{{ DatePicker(fields.end_date, watch=True, optional=False) }}
{{ TextInput(fields.obligated_amount, validation='dollars', watch=True) }}
</div>
</clin-fields>
{% endmacro %}
{% block to_builder_form_field %}
<to-form
inline-template
v-bind:initial-clin-count="{{ form.clins.data | length }}">
<div>
{{ 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) }}
{% endfor %}
<div v-for="clin in clins">
<hr v-if="clinIndex !== 0">
<clin-fields
{% else %}
v-bind:initial-clin-index='clinIndex'
v-bind:initial-clin-type="'JEDI_CLIN_1'"
{% endif %}
inline-template>
<div>
<div class="card">
<div class="h3">
{{ 'task_orders.form.base_clin_title' | translate }}
</div>
<div class="form-row">
<div class="form-col form-col--two-thirds">
{% if fields %}
{{ 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">
<fieldset data-ally-disabled="true" class="usa-input__choices" v-on:change="onInput">
@ -132,8 +81,12 @@
</fieldset>
</div>
</optionsinput>
{% endif %}
</div>
<div class="form-col form-col--third">
{% if fields %}
{{ TextInput(fields.number, watch=True) }}
{% else %}
<textinput :name="'clins-' + clinIndex + '-number'" :watch='true' inline-template>
<div class="usa-input">
<label :for="name">
@ -166,21 +119,33 @@
</template>
</div>
</textinput>
{% endif %}
</div>
</div>
<div class="usa-input">
<fieldset class="usa-input__choices task-order__loa-fieldset">
<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>
</div>
<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>
@ -229,16 +194,22 @@
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>
<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>
</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>
@ -287,23 +258,33 @@
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>
<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>
</date-selector>
</div>
{% endif %}
</div>
{% if fields %}
{{ TextInput(fields.obligated_amount, validation='dollars', watch=True) }}
{% else %}
<textinput
v-cloak
inline-template
:name="'clins-' + clinIndex + '-obligated_amount'"
validation="dollars"
:watch='true'>
<div class="usa-input usa-input--validation--dollars noMaxWidth">
<div class="usa-input usa-input--validation--dollars">
<label :for="name">
<div class="usa-input__title">{{ 'task_orders.form.obligated_funds_label' | translate }}</div>
<span v-show='showError'>{{ Icon('alert',classes="icon-validation") }}</span>
@ -335,8 +316,25 @@
</template>
</div>
</textinput>
{% endif %}
</div>
</clin-fields>
{% endmacro %}
{% block to_builder_form_field %}
<to-form
inline-template
v-bind:initial-clin-count="{{ form.clins.data | length }}">
<div>
{{ 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 %}
<div v-for="clin in clins">
{{ CLINFields() }}
</div>
<button

29
translations.yaml
View File

@ -140,10 +140,10 @@ forms:
none: Not planning to migrate any applications
not_sure: Not sure
on_premise: 'Yes, migrating from an on-premise data center'
clin_01_label: 'CLIN 01 : Unclassified'
clin_02_label: 'CLIN 02: Classified'
clin_03_label: 'CLIN 03: Unclassified'
clin_04_label: 'CLIN 04: Classified'
clin_01_label: '0001: Unclassified IaaS and PaaS'
clin_02_label: '0002'
clin_03_label: '0003'
clin_04_label: '0004'
complexity:
conus: CONUS access
data_analytics: Data analytics
@ -337,22 +337,23 @@ task_orders:
pop_end: PoP End
loa: LOA
form:
add_clin: Add another CLIN or Sub-CLIN
add_loa: Add another line of accounting
add_clin: Enter another CLIN
add_loa: Enter another line of accounting
add_to_header: Add your task order
add_to_description: Now, refer to your document to find the 13-digit task order number. It should be located at lorem ipsum dolar. From now on we'll refer to this portion of funding by the recorded task order number.
base_clin_title: Add Base CLIN
base_clin_description: Next, continue to refer to your document to locate your CLINs (Contract Line Item Numbers). CLINs are how you break the contract down by the commodities being procured (labor hours of services, funding for travel, quantity product A, etc.).
clin_number_label: CLIN
clin_type_label: CLIN type
clin_title: Enter CLINs
clin_description: "Continue to refer to your TO to locate your Contract Line Item Numbers (CLINs). You must add CLINs one at a time, and select a corresponding ID/IQ description for each."
base_clin_title: Base CLIN Information
clin_number_label: Enter task order CLIN
clin_type_label: "Select ID/IQ CLIN description"
cloud_funding_header: Add the summary of cloud funding
cloud_funding_text: Data must match with what is in your uploaded document.
draft_alert_title: Your information has been saved
draft_alert_message: You can return to the Task Order Builder to enter missing information. Once you are finished, you’ll be ready to submit this request.
loa_label: 'Line of accounting (43 characters)'
obligated_funds_label: Funds obligated for cloud
pop_end: 'End of period of performance (PoP)'
pop_start: 'Start of period of performance (PoP)'
loa_label: 'Enter line of accounting (43 characters)'
obligated_funds_label: Enter obligated funds for Base CLIN
pop_end: 'Period of Performance (PoP) end date'
pop_start: 'Period of Performance (PoP) start date'
review_button: Review task order
supporting_docs_header: Upload your supporting documentation
supporting_docs_size_limit: Your file may not exceed 1MB