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

Fix spacing throught form and move all TO form related styling to task order stylesheet

Browse Source
This commit is contained in:
leigh-mil 2019-01-15 16:50:39 -05:00
parent 75e831beb6
commit 08555e543e
9 changed files with 84 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
styles/elements/_icon_link.scss
View File

@ -68,4 +68,8 @@
opacity: 0.3;
pointer-events: none;
}
&.icon-link--left {
padding-left: 0;
}
}

14
styles/elements/_icons.scss
View File

@ -55,11 +55,19 @@
@include icon-size(24);
}
&.icon--remove, &.icon--error {
&.icon--remove, &.icon--red {
@include icon-color($color-red);
}
&.icon--ok {
@include icon-color($color-green)
&.icon--green {
@include icon-color($color-green);
}
&.icon--gray {
@include icon-color($color-gray);
}
&.icon--medium {
@include icon-size(12);
}
}

23
styles/elements/_panels.scss
View File

@ -59,27 +59,6 @@
margin: ($gap * 4) 0;
padding: 0 ($gap * 4);
}
h1, h2, h3, h4, h5, h6 {
&.subheading {
color: $color-gray;
}
&.inactive {
color: $color-gray-light;
}
}
.error {
color: $color-red;
font-weight: $font-bold;
}
.ok {
color: $color-green;
font-weight: $font-bold;
}
}
.panel__heading {
@ -101,7 +80,7 @@
margin: 0;
display: inline-block;
.subtitle, &.gray {
.subtitle {
color: $color-gray;
}
}

8
styles/elements/_tables.scss
View File

@ -76,14 +76,6 @@
&:last-child {
margin-bottom: 0;
}
&.funding-summary {
tr td {
margin: 0;
padding: 0;
border-bottom: 0;
}
}
}
}

37
styles/sections/_task_order.scss
View File

@ -162,3 +162,40 @@
}
}
}
.task-order-form {
.task-order-form__heading {
margin-bottom: 0;
&.inactive {
color: $color-gray-light;
}
&.subheading {
color: $color-gray;
}
}
.funding-summary__table {
tr td {
border-bottom: 0;
padding: 0.5rem 1.5rem;
.funding-summary__td {
margin-top: 0;
}
}
}
.task-order-invite-message {
&.not-sent {
color: $color-red;
font-weight: $font-bold;
}
&.sent {
color: $color-green;
font-weight: $font-bold;
}
}
}

4
templates/task_orders/_new.html
View File

@ -2,7 +2,7 @@
{% block content %}
<div class="col">
<div class="col task-order-form">
{% include 'task_orders/new/menu.html' %}
@ -19,7 +19,7 @@
<div class="panel">
<div class="panel__heading">
<h1 class="gray">
<h1 class="task-order-form__heading subheading">
<div class="h2">Task Order Builder</div>
{% block heading %}{% endblock %}
</h1>

2
templates/task_orders/new/app_info.html
View File

@ -12,7 +12,7 @@
{% block form %}
<!-- App Info Section -->
<h3 class="subheading">{{ "task_orders.new.app_info.basic_info_title"| translate }}</h3>
<h3 class="task-order-form__heading subheading">{{ "task_orders.new.app_info.basic_info_title"| translate }}</h3>
{{ TextInput(form.portfolio_name, placeholder="The name of your office or organization") }}
{{ TextInput(form.scope, paragraph=True) }}
<p><i>{{ "task_orders.new.app_info.sample_scope" | translate | safe }}</i></p>

6
templates/task_orders/new/funding.html
View File

@ -39,12 +39,12 @@
<h3 class="subheading">{{ "task_orders.new.funding.cloud_calculations_title" | translate }}</h3>
<p>{{ "task_orders.new.funding.cloud_calculations_paragraph" | translate }}</p>
<h4>{{ "task_orders.new.funding.cloud_offerings_title" | translate }}</h4>
<h4 class="task-order-form__heading">{{ "task_orders.new.funding.cloud_offerings_title" | translate }}</h4>
<p>{{ "task_orders.new.funding.cloud_offerings_paragraph" | translate }}</p>
{{ TextInput(form.clin_01, validation='dollars', placeholder="$0.00") }}
{{ TextInput(form.clin_02, validation='dollars', disabled=(not config.CLASSIFIED)) }}
<h4>{{ "task_orders.new.funding.support_assistance_title" | translate }}</h4>
<h4 class="task-order-form__heading">{{ "task_orders.new.funding.support_assistance_title" | translate }}</h4>
<p>{{ "task_orders.new.funding.support_assistance_paragraph" | translate }}</p>
{{ TextInput(form.clin_03, validation='dollars', tooltip='The cloud support and assistance packages cannot be used as a primary development resource.', placeholder="$0.00") }}
{{ TextInput(form.clin_04, validation='dollars', tooltip='The cloud support and assistance packages cannot be used as a primary development resource.', disabled=(not config.CLASSIFIED)) }}
@ -56,7 +56,7 @@
{% block next %}
<div class="row">
<div class="col col--grow">
<p>{{ "task_orders.new.funding.total" | translate }}<br><span id="to-target"></span></p>
<p><strong><span class="task-order-form__heading subheading">{{ "task_orders.new.funding.total" | translate }}</span><br><span id="to-target"></span></strong></p>
</div>
<div class="col col--grow">
{{ super() }}

50
templates/task_orders/new/review.html
View File

@ -22,17 +22,17 @@
<div class="row">
<div class="col col--grow">
<h4>{{ "task_orders.new.review.portfolio"| translate }}</h4>
<h4 class='task-order-form__heading'>{{ "task_orders.new.review.portfolio"| translate }}</h4>
<p>{{ task_order.portfolio_name or RequiredLabel() }}</p>
</div>
<div class="col col--grow">
<h4>{{ "task_orders.new.review.dod"| translate }}</h4>
<h4 class='task-order-form__heading'>{{ "task_orders.new.review.dod"| translate }}</h4>
<p>{{ task_order.defense_component_description or RequiredLabel() }}</p>
</div>
</div>
<h4>{{ "task_orders.new.review.scope"| translate }}</h4>
<h4 class='task-order-form__heading'>{{ "task_orders.new.review.scope"| translate }}</h4>
<p>
{{ task_order.scope or RequiredLabel() }}
</p>
@ -43,17 +43,17 @@
<div class="row">
<div class="col col--grow">
<h4>{{ "task_orders.new.review.migration"| translate }}</h4>
<h4 class='task-order-form__heading'>{{ "task_orders.new.review.migration"| translate }}</h4>
<p>{{ task_order.app_migration_description or RequiredLabel() }}</p>
</div>
<div class="col col--grow">
<h4>{{ "task_orders.new.review.native_apps"| translate }}</h4>
<h4 class='task-order-form__heading'>{{ "task_orders.new.review.native_apps"| translate }}</h4>
<p>{{ task_order.native_apps_description or RequiredLabel() }}</p>
</div>
</div>
<h4>{{ "task_orders.new.review.complexity"| translate }}</h4>
<h4 class='task-order-form__heading'>{{ "task_orders.new.review.complexity"| translate }}</h4>
{% if task_order.complexity %}
<ul class="checklist">
{% for item in task_order.complexity %}
@ -68,7 +68,7 @@
<div class="row">
<div class="col col--grow">
<h4>{{ "task_orders.new.review.team"| translate }}</h4>
<h4 class='task-order-form__heading'>{{ "task_orders.new.review.team"| translate }}</h4>
{% if task_order.dev_team %}
<ul class="checklist">
{% for item in task_order.dev_team %}
@ -83,7 +83,7 @@
</div>
<div class="col col--grow">
<h4>{{ "task_orders.new.review.experience"| translate }}</h4>
<h4 class='task-order-form__heading'>{{ "task_orders.new.review.experience"| translate }}</h4>
<p>{{ task_order.team_experience_description or RequiredLabel() }}</p>
</div>
</div>
@ -94,24 +94,24 @@
<div class="row">
<div class="col col--grow">
<h4>{{ "task_orders.new.review.performance_period"| translate }}</h4>
<h4 class='task-order-form__heading'>{{ "task_orders.new.review.performance_period"| translate }}</h4>
{{ task_order.performance_length_description or RequiredLabel() }}
<p><a href="#" class='icon-link' download>{{ Icon('download') }} {{ "task_orders.new.review.usage_est_link"| translate }}</a></p>
<p><a href="#" class='icon-link icon-link--left' download>{{ Icon('download') }} {{ "task_orders.new.review.usage_est_link"| translate }}</a></p>
</div>
<div class="col col--grow">
<table class="funding-summary">
<table class="funding-summary__table">
<tbody>
<tr>
<td><h4>{{ "task_orders.new.review.to_value"| translate }}</h4></td>
<td class="table-cell--align-right">{{ '${:,.2f}'.format(task_order.budget) }}</td>
</tr>
<tr>
<td><h4>{{ "task_orders.new.review.clin_1"| translate }}</h4></td>
<td><h4 class='task-order-form__heading funding-summary__td'>{{ "task_orders.new.review.clin_1"| translate }}</h4></td>
<td class="table-cell--align-right">{{ '${:,.2f}'.format(task_order.clin_01) }}</td>
</tr>
<tr>
<td><h4 {% if not config.CLASSIFIED %} class="inactive" {% endif %}>
<td><h4 class="task-order-form__heading funding-summary__td{% if not config.CLASSIFIED %} inactive{% endif %}">
{{ "task_orders.new.review.clin_2"| translate }}
{% if not config.CLASSIFIED %}
<div>{{ "task_orders.new.review.classified_inactive"| translate }}</div>
@ -124,11 +124,11 @@
</td>
</tr>
<tr>
<td><h4>{{ "task_orders.new.review.clin_3"| translate }}</h4></td>
<td><h4 class='task-order-form__heading funding-summary__td'>{{ "task_orders.new.review.clin_3"| translate }}</h4></td>
<td class="table-cell--align-right">{{ '${:,.2f}'.format(task_order.clin_03) }}</td>
</tr>
<tr>
<td><h4 {% if not config.CLASSIFIED %} class="inactive" {% endif %}>
<td><h4 class="task-order-form__heading funding-summary__td{% if not config.CLASSIFIED %} inactive{% endif %}">
{{ "task_orders.new.review.clin_4"| translate }}
{% if not config.CLASSIFIED %}
<div>{{ "task_orders.new.review.classified_inactive"| translate }}</div>
@ -151,42 +151,42 @@
<div class="row">
<div class="col col--grow">
<h4>{{ "task_orders.new.review.ko"| translate }}</h4>
<h4 class='task-order-form__heading'>{{ "task_orders.new.review.ko"| translate }}</h4>
{{ task_order.ko_first_name }} {{ task_order.ko_last_name }}<br>
{{ task_order.ko_email }}<br>
{{ task_order.ko_phone }}<br>
{{ "task_orders.new.review.dod_id"| translate }} {{ task_order.ko_dod_id}}<br>
{% if task_order.ko_invite %}
<span class="ok">{{ Icon('ok', classes='icon--ok') }} {{ "task_orders.new.review.invited"| translate }}</span>
{{ Icon('ok', classes='icon--green') }} <span class="task-order-invite-message sent">{{ "task_orders.new.review.invited"| translate }}</<span>
{% else %}
<span class="error">{{ Icon('alert', classes='icon--error') }} {{ "task_orders.new.review.not_invited"| translate }}</span>
{{ Icon('alert', classes='icon--red') }} <span class="task-order-invite-message not-sent">{{ "task_orders.new.review.not_invited"| translate }}</span>
{% endif %}
</div>
<div class="col col--grow">
<h4>{{ "task_orders.new.review.cor"| translate }}</h4>
<h4 class='task-order-form__heading'>{{ "task_orders.new.review.cor"| translate }}</h4>
{{ task_order.cor_first_name }} {{ task_order.cor_last_name }}<br>
{{ task_order.cor_email }}<br>
{{ task_order.cor_phone }}<br>
{{ "task_orders.new.review.dod_id"| translate }} {{ task_order.cor_dod_id}}<br>
{% if task_order.cor_invite %}
<span class="ok">{{ Icon('ok', classes='icon--ok') }} {{ "task_orders.new.review.invited"| translate }}</span>
{{ Icon('ok', classes='icon--green') }} <span class="task-order-invite-message sent">{{ "task_orders.new.review.invited"| translate }}</<span>
{% else %}
<span class="error">{{ Icon('alert', classes='icon--error') }} {{ "task_orders.new.review.not_invited"| translate }}</span>
{{ Icon('alert', classes='icon--red') }} <span class="task-order-invite-message not-sent">{{ "task_orders.new.review.not_invited"| translate }}</span>
{% endif %}
</div>
</div>
<div class="row">
<div class="col col--grow">
<h4>{{ "task_orders.new.review.so"| translate }}</h4>
<h4 class='task-order-form__heading'>{{ "task_orders.new.review.so"| translate }}</h4>
{{ task_order.so_first_name }} {{ task_order.so_last_name }}<br>
{{ task_order.so_email }}<br>
{{ task_order.so_phone }}<br>
{{ "task_orders.new.review.dod_id"| translate }} {{ task_order.so_dod_id}}<br>
{% if task_order.so_invite %}
<span class="ok">{{ Icon('ok', classes='icon--ok') }} {{ "task_orders.new.review.invited"| translate }}</span>
{{ Icon('ok', classes='icon--green') }} <span class="task-order-invite-message sent">{{ "task_orders.new.review.invited"| translate }}</<span>
{% else %}
<span class="error">{{ Icon('alert', classes='icon--error') }} {{ "task_orders.new.review.not_invited"| translate }}</span>
{{ Icon('alert', classes='icon--red') }} <span class="task-order-invite-message not-sent">{{ "task_orders.new.review.not_invited"| translate }}</span>
{% endif %}
</div>
</div>
@ -195,7 +195,7 @@
{% block next %}
<div class='action-group'>
<input type='submit' class='usa-button usa-button-primary' value='Send Invitations' />
<input type='submit' class='usa-button usa-button-primary' value='Done' />
</div>
{% endblock %}