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

Styling for CLIN Details section

Browse Source 
add in validation styling for inputs
use solid checkmark as ok validation across site
This commit is contained in:
leigh-mil 2019-09-03 11:31:36 -04:00
parent 274fa4470c
commit 2b98995488
10 changed files with 47 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
js/components/clin_fields.js
View File

@ -8,6 +8,7 @@ const OBLIGATED_AMOUNT = 'obligated_amount'
const START_DATE = 'start_date'
const END_DATE = 'end_date'
const POP = 'period_of_performance'
const NUMBER = 'number'
export default {
name: 'clin-fields',
@ -33,6 +34,10 @@ export default {
type: String,
default: null,
},
initialClinNumber: {
type: String,
default: null,
},
},
data: function() {
@ -44,6 +49,9 @@ export default {
: undefined
const popValidation = !this.initialStartDate ? false : start < end
const showPopValidation = !this.initialStartDate ? false : !popValidation
const clinNumber = !!this.initialClinNumber
? this.initialClinNumber
: undefined
return {
clinIndex: this.initialClinIndex,
@ -53,6 +61,7 @@ export default {
endDate: end,
popValid: popValidation,
showPopError: showPopValidation,
clinNumber: clinNumber,
}
},
@ -113,8 +122,20 @@ export default {
} else if (event.name.includes(END_DATE)) {
if (!!event.value) this.endDate = new Date(event.value)
this.validatePop()
} else if (event.name.includes(NUMBER)) {
if (!!event.value) this.clinNumber = event.value
}
}
},
},
computed: {
clinTitle: function() {
if (!!this.clinNumber) {
return `CLIN ${this.clinNumber}`
} else {
return `CLIN`
}
},
},
}

2
js/test_templates/upload_input_error_template.html
View File

@ -11,7 +11,7 @@
<div>
<div v-show="hasAttachment" class="uploaded-file">
<span class="icon icon--check-circle-solid " aria-hidden="true"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="check-circle" class="svg-inline--fa fa-check-circle fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"></path></svg></span>
<span class="icon icon--ok " aria-hidden="true"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="check-circle" class="svg-inline--fa fa-check-circle fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"></path></svg></span>
<a class="uploaded-file__name" v-html="baseName" v-bind:href="downloadLink"></a>
<a href="#" class="uploaded-file__remove" v-on:click="removeAttachment">Remove</a>

2
js/test_templates/upload_input_template.html
View File

@ -12,7 +12,7 @@
<div>
<div v-show="hasAttachment" class="uploaded-file">
<span class="icon icon--check-circle-solid " aria-hidden="true"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="check-circle" class="svg-inline--fa fa-check-circle fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"></path></svg></span>
<span class="icon icon--ok " aria-hidden="true"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="check-circle" class="svg-inline--fa fa-check-circle fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"></path></svg></span>
<a class="uploaded-file__name" v-html="baseName" v-bind:href="downloadLink"></a>
<a href="#" class="uploaded-file__remove" v-on:click="removeAttachment">Remove</a>

1
static/icons/check-circle-solid.svg
View File

@ -1 +0,0 @@
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="check-circle" class="svg-inline--fa fa-check-circle fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"></path></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 600 B

2
static/icons/ok.svg
View File

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M8 12c-.266 0-.522-.106-.71-.296L3.915 8.297c-.389-.392-.386-1.025.006-1.414.392-.387 1.026-.386 1.414.007l2.574 2.597 6.302-8.101c.339-.435.967-.514 1.403-.176.436.339.515.968.175 1.403l-7 9c-.177.227-.442.367-.729.384L8 12zm0 4c-4.411 0-8-3.589-8-8s3.589-8 8-8c.964 0 1.906.17 2.803.505.517.193.779.77.586 1.287s-.765.783-1.287.586C9.431 2.127 8.724 2 8 2 4.691 2 2 4.691 2 8s2.691 6 6 6 6-2.691 6-6c0-.552.447-1 1-1s1 .448 1 1c0 4.411-3.589 8-8 8z"/></svg>
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="check-circle" class="svg-inline--fa fa-check-circle fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"></path></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 529 B

After

Width:  |  Height:  |  Size: 600 B

9
styles/sections/_task_order.scss
View File

@ -84,7 +84,7 @@
}
.card {
padding: ($gap * 5);
padding: ($gap * 4) ($gap * 5);
.usa-input {
margin: 0 $gap 0 0;
@ -100,7 +100,7 @@
}
.form-row {
margin-top: 0;
margin: 0;
}
select {
@ -246,4 +246,9 @@
.clin-card {
width: 65rem;
&__title.h4 {
margin-top: 0;
padding-bottom: $gap * 2.5;
}
}

2
templates/components/upload_input.html
View File

@ -16,7 +16,7 @@
>
<div>
<div v-show="hasAttachment" class="uploaded-file">
{{ Icon("check-circle-solid") }}
{{ Icon("ok") }}
<a class="uploaded-file__name" v-html="baseName" v-bind:href="downloadLink"></a>
<a href="#" class="uploaded-file__remove" v-on:click="removeAttachment">Remove</a>
</div>

2
templates/fragments/task_order_review.html
View File

@ -14,7 +14,7 @@
{{ 'task_orders.review.pdf_title' | translate }}
</div>
<a class="icon-link icon-link--download" href="{{ pdf_download_url }}">
{{ Icon('check-circle-solid') }}
{{ Icon('ok') }}
{{ task_order.pdf.filename }}
</a>

22
templates/task_orders/step_3.html
View File

@ -19,21 +19,18 @@
v-bind:initial-amount='{{ fields.obligated_amount.data or 0 }}'
v-bind:initial-start-date="'{{ fields.start_date.data | string }}'"
v-bind:initial-end-date="'{{ fields.end_date.data | string }}'"
v-bind:initial-clin-number="'{{ fields.number.data | string }}'"
{% else %}
v-bind:initial-clin-index='clinIndex'
v-bind:initial-clin-type="'JEDI_CLIN_1'"
{% endif %}
inline-template>
<div class="clin-card">
<div class="card__title h4">
{{ 'task_orders.form.base_clin_title' | translate }}
</div>
<div class="card__title h4" v-html='clinTitle'></div>
<div class="card">
<div class="form-row">
<div class="form-col">
<div class="h4">
CLIN Details
</div>
<div class="h4 clin-card__title">
CLIN Details
</div>
</div>
<div class="form-row">
@ -41,8 +38,9 @@
{% if fields %}
{{ TextInput(fields.number, watch=True) }}
{% else %}
<textinput :name="'clins-' + clinIndex + '-number'" :watch='true' inline-template>
<div class="usa-input">
<textinput :name="'clins-' + clinIndex + '-number'" :watch='true'
inline-template>
<div v-bind:class="['usa-input usa-input--validation--' + validation, { 'usa-input--error': showError, 'usa-input--success': showValid, 'usa-input--validation--paragraph': paragraph, 'no-max-width': noMaxWidth }]">
<label :for="name">
<span v-show='showError'>{{ Icon('alert',classes="icon-validation") }}</span>
<span v-show='showValid'>{{ Icon('ok',classes="icon-validation") }}</span>
@ -82,7 +80,7 @@
{{ 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">
<div v-bind:class="['usa-input', { 'usa-input--error': showError, 'usa-input--success': showValid }]">
<fieldset data-ally-disabled="true" class="usa-input__choices" v-on:change="onInput">
<legend>
<div class="usa-input__title">
@ -103,7 +101,7 @@
</div>
<hr>
<div class="form-row">
<div class="h4">
<div class="h4 clin-card__title">
CLIN Funding
</div>
</div>
@ -159,7 +157,7 @@
{% endif %}
<hr>
<div class="form-row">
<div class="h4">
<div class="h4 clin-card__title">
Period of Performance
</div>
</div>

8
translations.yaml
View File

@ -165,10 +165,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: '0001: Unclassified IaaS and PaaS'
clin_02_label: '0002'
clin_03_label: '0003'
clin_04_label: '0004'
clin_01_label: 'IaaS/PaaS (IDIQ CLIN 0001)'
clin_02_label: 'IDIQ CLIN 0002'
clin_03_label: 'IDIQ CLIN 0003'
clin_04_label: 'IDIQ CLIN 0004'
complexity:
conus: CONUS access
data_analytics: Data analytics