Add description text to officer edit forms and update styling

This commit is contained in:
leigh-mil 2019-02-07 15:39:36 -05:00
parent 6dec26c93c
commit 4bd4b4d488
3 changed files with 58 additions and 28 deletions

View File

@ -361,6 +361,32 @@
}
.officer__form {
padding: 1.5rem;
background-color: $color-aqua-lightest;
border-left-color: $color-blue;
border-left-style: solid;
border-left-width: $gap / 2;
.edit-officer {
h4 {
color: $color-gray;
margin-bottom: 0.5rem;
}
p {
font-size: 1.5rem;
}
}
.usa-input__title {
font-weight: normal;
}
.form-row {
margin-bottom: 0rem;
margin-top: 0rem;
}
.officer__form--actions {
display: flex;
flex-direction: row;

View File

@ -14,43 +14,43 @@
{% endmacro %}
{% macro EditOfficerInfo(form, officer_type) -%}
<div class='officer__form'>
<template v-if="editing">
<div class='alert'>
<div class='alert__content'>
<div class='form-row'>
<div class='form-col form-col--half'>
{{ TextInput(form.first_name) }}
</div>
<div class='form-col form-col--half'>
{{ TextInput(form.last_name) }}
</div>
<div class='officer__form'>
<div class="edit-officer">
<h4>{{ ("task_orders.invitations." + officer_type + ".edit_title") | translate}}</h4>
<p>{{ "task_orders.invitations.edit_text" | translate}}</p>
</div>
<div class='form-row'>
<div class='form-col form-col--half'>
{{ TextInput(form.first_name) }}
</div>
<div class='form-row'>
<div class='form-col form-col--half'>
{{ TextInput(form.email, placeholder='name@mail.mil', validation='email') }}
</div>
<div class='form-col form-col--half'>
{{ TextInput(form.last_name) }}
</div>
</div>
<div class='form-col form-col--half'>
{{ TextInput(form.phone_number, placeholder='(123) 456-7890', validation='usPhone') }}
</div>
<div class='form-row'>
<div class='form-col form-col--half'>
{{ TextInput(form.email, placeholder='name@mail.mil', validation='email') }}
</div>
{% if form.dod_id.data %}
{{ TextInput(form.dod_id, validation='dodId', disabled=True)}}
{% endif %}
<div class='alert__actions officer__form--actions'>
<a href="#{{ officer_type }}" v-on:click="cancel" class="icon-link">
{{ Icon("x") }}
<span>Cancel</span>
</a>
<input type='submit' class='usa-button usa-button-primary' value='Save Changes' />
<div class='form-col form-col--half'>
{{ TextInput(form.phone_number, placeholder='(123) 456-7890', validation='usPhone') }}
</div>
</div>
{% if form.dod_id.data %}
{{ TextInput(form.dod_id, validation='dodId', disabled=True)}}
{% endif %}
<div class='alert__actions officer__form--actions'>
<a href="#{{ officer_type }}" v-on:click="cancel" class="icon-link">
{{ Icon("x") }}
<span>Cancel</span>
</a>
<input type='submit' class='usa-button usa-button-primary' value='Save Changes' />
</div>
</div>
</template>
</div>
{% endmacro %}
{% macro OfficerInfo(task_order, officer_type, form) %}

View File

@ -461,21 +461,25 @@ task_orders:
pending_to: Pending TO Completion
invitations:
dod_id_label: DoD ID
edit_text: A new invitation e-mail will be sent when new information is saved.
contracting_officer:
title: Contracting Officer (KO) Information
description: You'll need a signature from your KO. You might want to work with your program Financial Manager to get your TO documents moving in the right direction.
add_button_text: Add / Invite KO
invite_button_text: Invite KO
edit_title: Edit KO
contracting_officer_representative:
title: Contracting Officer Representative (COR) Information
description: Your COR may assist in submitting the Task Order documents within their official system of record.
add_button_text: Add / Invite COR
invite_button_text: Invite COR
edit_title: Edit COR
security_officer:
title: IA Security Officer Information
description: Your Security Officer will need to answer some security configuration questions in order to generate a DD-254 document, then digitally sign.
add_button_text: Add / Invite Security Officer
invite_button_text: Invite Security Officer
edit_title: Edit SO
ko_review:
alert_title: Verify Your Info
title: Task Order Builder