Merge pull request #171 from dod-ccpo/ui/conditional-field-display
Ui/conditional field display
This commit is contained in:
patricksmithdds
GitHub
commit
ac24229fd7
@ -3,6 +3,7 @@
|
||||
|
||||
@import 'core/grid';
|
||||
@import 'core/util';
|
||||
@import 'core/transitions';
|
||||
|
||||
@import 'elements/typography';
|
||||
@import 'elements/icons';
|
||||
@ -30,6 +31,7 @@
|
||||
@import 'components/footer';
|
||||
@import 'components/progress_menu.scss';
|
||||
@import 'components/search_bar';
|
||||
@import 'components/forms';
|
||||
|
||||
@import 'sections/login';
|
||||
@import 'sections/request_approval';
|
||||
|
||||
77
styles/components/_forms.scss
Normal file
77
styles/components/_forms.scss
Normal file
@ -0,0 +1,77 @@
|
||||
// Form Grid
|
||||
.form-row {
|
||||
margin: ($gap * 4) 0;
|
||||
|
||||
.form-col {
|
||||
flex-grow: 1;
|
||||
|
||||
&:first-child .usa-input {
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child .usa-input {
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media($medium-screen) {
|
||||
@include grid-row;
|
||||
align-items: flex-start;
|
||||
|
||||
.form-col {
|
||||
.usa-input {
|
||||
margin-left: ($gap * 4);
|
||||
margin-right: ($gap * 4);
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
.usa-input {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
.usa-input {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.form__sub-fields {
|
||||
@include alert;
|
||||
@include alert-level('default');
|
||||
|
||||
.usa-input {
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
> h1, > h2, > h3, > h4, > h5, > h6, > legend {
|
||||
@include h3;
|
||||
|
||||
margin: ($gap * 4) 0;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&.usa-sr-only {
|
||||
+ .usa-input {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
36
styles/core/_transitions.scss
Normal file
36
styles/core/_transitions.scss
Normal file
@ -0,0 +1,36 @@
|
||||
// Slide up/down transition
|
||||
.slide-enter-active {
|
||||
transform-origin: 0 0;
|
||||
transition: transform 0.5s ease-out;
|
||||
|
||||
> * {
|
||||
transition: opacity 0.5s ease-in;
|
||||
}
|
||||
}
|
||||
|
||||
.slide-leave-active {
|
||||
transform-origin: 0 0;
|
||||
transition: transform 0.5s ease-in;
|
||||
|
||||
> * {
|
||||
transition: opacity 0.5s ease-out;
|
||||
}
|
||||
}
|
||||
|
||||
.slide-enter,
|
||||
.slide-leave-to {
|
||||
transform: scaleY(0);
|
||||
|
||||
> * {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.slide-enter-to,
|
||||
.slide-leave {
|
||||
transform: scaleY(1);
|
||||
|
||||
> * {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@ -70,6 +70,7 @@
|
||||
@include h4;
|
||||
@include line-max;
|
||||
position: relative;
|
||||
clear: both;
|
||||
|
||||
.icon-validation {
|
||||
position: absolute;
|
||||
@ -225,49 +226,3 @@ select {
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
// Form Grid
|
||||
.form-row {
|
||||
margin: ($gap * 4) 0;
|
||||
|
||||
.form-col {
|
||||
flex-grow: 1;
|
||||
|
||||
&:first-child .usa-input {
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child .usa-input {
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media($medium-screen) {
|
||||
@include grid-row;
|
||||
align-items: flex-start;
|
||||
|
||||
.form-col {
|
||||
.usa-input {
|
||||
margin-left: ($gap * 4);
|
||||
margin-right: ($gap * 4);
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
.usa-input {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
.usa-input {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -30,32 +30,52 @@
|
||||
<h2>Cloud Readiness</h2>
|
||||
{{ TextInput(f.num_software_systems,validation="integer",tooltip="A software system can be any code that you plan to host on cloud infrastructure. For example, it could be a custom-developed web application, or a large ERP system.") }}
|
||||
{{ OptionsInput(f.jedi_migration, tooltip="Cloud migration is the process of moving data, applications or other business elements from an organization\\'s onsite computers/data centers to the cloud, or moving them from one cloud environment to another.") }}
|
||||
<template v-if="jediMigrationOptionSelected">
|
||||
<template v-if='isJediMigration' v-cloak>
|
||||
{{ OptionsInput(f.rationalization_software_systems, tooltip="Rationalization is the DoD process to determine whether the application should move to the cloud.") }}
|
||||
{{ OptionsInput(f.technical_support_team) }}
|
||||
<template v-if="hasTechnicalSupportTeam">
|
||||
{{ OptionsInput(f.organization_providing_assistance) }}
|
||||
|
||||
<transition name='slide'>
|
||||
<template v-if="jediMigrationOptionSelected">
|
||||
<fieldset class='form__sub-fields' v-if='isJediMigration' v-cloak>
|
||||
<legend class='usa-sr-only'>Questions related to JEDI Cloud migration</legend>
|
||||
{{ OptionsInput(f.rationalization_software_systems, tooltip="Rationalization is the DoD process to determine whether the application should move to the cloud.") }}
|
||||
{{ OptionsInput(f.technical_support_team) }}
|
||||
<transition name='slide'>
|
||||
<template v-if="hasTechnicalSupportTeam">
|
||||
{{ OptionsInput(f.organization_providing_assistance) }}
|
||||
</template>
|
||||
</transition>
|
||||
{{ OptionsInput(f.engineering_assessment, tooltip="An engineering assessment is an evaluation to convert your application architecture from on-premises to using the commercial cloud") }}
|
||||
{{ OptionsInput(f.data_transfers) }}
|
||||
{{ OptionsInput(f.expected_completion_date) }}
|
||||
</fieldset>
|
||||
|
||||
<template v-if='!isJediMigration' v-cloak>
|
||||
{{ OptionsInput(f.cloud_native, tooltip="Cloud native is architecting and designing your application to use all the benefits of the commercial cloud. Specifically, designing applications so that they are decoupled from a physical resource.") }}
|
||||
</template>
|
||||
{{ OptionsInput(f.engineering_assessment, tooltip="An engineering assessment is an evaluation to convert your application architecture from on-premises to using the commercial cloud") }}
|
||||
{{ OptionsInput(f.data_transfers) }}
|
||||
{{ OptionsInput(f.expected_completion_date) }}
|
||||
</template>
|
||||
<template v-else-if='!isJediMigration' v-cloak>
|
||||
{{ OptionsInput(f.cloud_native, tooltip="Cloud native is architecting and designing your application to use all the benefits of the commercial cloud. Specifically, designing applications so that they are decoupled from a physical resource.") }}
|
||||
</template>
|
||||
</template>
|
||||
</transition>
|
||||
|
||||
<h2>Financial Usage</h2>
|
||||
{{ TextInput(f.estimated_monthly_spend, tooltip="Refer to financial verification step help docs", validation="dollars") }}
|
||||
<p>So this means you are spending approximately <span class="label">!{ annualSpendStr }</span> annually</p>
|
||||
|
||||
|
||||
<div class='alert alert-info'>
|
||||
<div class='alert__content'>
|
||||
<div class='alert__message'>
|
||||
<p>So this means you are spending approximately <span class="label label--info">!{ annualSpendStr }</span> annually</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<transition name='slide'>
|
||||
<template v-if="annualSpend > 1000000">
|
||||
<fieldset class='form__sub-fields'>
|
||||
<h3>Because the approximate annual spend is over $1,000,000, please answer a few additional questions.</h3>
|
||||
{{ TextInput(f.number_user_sessions, validation='integer') }}
|
||||
{{ TextInput(f.average_daily_traffic, tooltip="Requests are the client-to-server network traffic that is being transferred to your systems",validation="integer") }}
|
||||
{{ TextInput(f.average_daily_traffic_gb, tooltip="GB uploaded is the gigabyte amount of data traffic that is being transferred to your systems",validation="gigabytes") }}
|
||||
</fieldset>
|
||||
</template>
|
||||
</transition>
|
||||
|
||||
{{ TextInput(f.dollar_value, validation='dollars') }}
|
||||
<template v-if="annualSpend > 1000000">
|
||||
{{ TextInput(f.number_user_sessions, validation='integer') }}
|
||||
{{ TextInput(f.average_daily_traffic, tooltip="Requests are the client-to-server network traffic that is being transferred to your systems",validation="integer") }}
|
||||
{{ TextInput(f.average_daily_traffic_gb, tooltip="GB uploaded is the gigabyte amount of data traffic that is being transferred to your systems",validation="gigabytes") }}
|
||||
</template>
|
||||
{{ TextInput(f.start_date, validation='date', placeholder='MM / DD / YYYY') }}
|
||||
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user