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

Merge pull request #1427 from dod-ccpo/new-portfolio-styling--v2

Browse Source 
portfolio form styling
This commit is contained in:
leigh-mil 2020-02-19 12:10:08 -05:00 committed by GitHub
commit 0bb23a74ec
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
18 changed files with 62 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
atst/forms/portfolio.py
View File

@ -33,6 +33,7 @@ class PortfolioForm(BaseForm):
class PortfolioCreationForm(PortfolioForm):
defense_component = SelectMultipleField(
translate("forms.portfolio.defense_component.title"),
description=translate("forms.portfolio.defense_component.help_text"),
choices=SERVICE_BRANCHES,
widget=ListWidget(prefix_label=False),
option_widget=CheckboxInput(),

17
styles/components/_forms.scss
View File

@ -2,10 +2,6 @@
.form-row {
margin: ($gap * 4) 0;
&--bordered {
border-bottom: $color-gray-lighter 1px solid;
}
.form-col {
flex-grow: 1;
@ -22,8 +18,9 @@
}
.usa-input {
input {
max-width: none;
input,
textarea {
max-width: $max-input-width;
}
}
}
@ -204,6 +201,10 @@
}
}
.form-container__half {
max-width: 46rem;
.form-container {
margin-bottom: $action-footer-height + $large-spacing;
&--narrow {
max-width: $max-input-width;
}
}

15
styles/components/_member_form.scss
View File

@ -5,17 +5,11 @@
margin-left: 0;
}
.input__inline-fields {
text-align: left;
.usa-input__choices label {
font-weight: $font-bold;
}
}
.input__inline-fields {
padding: $gap * 2;
border: 1px solid $color-gray-lighter;
text-align: left;
max-width: 100%;
&.checked {
border: 1px solid $color-blue;
@ -33,7 +27,7 @@
.user-info {
.usa-input {
width: 45rem;
max-width: $max-input-width;
input,
label,
@ -53,8 +47,7 @@
}
}
#modal--add-app-mem,
#modal--add-portfolio-manager {
.form-content--member-form {
.modal__body {
min-width: 75rem;
}

12
styles/components/_portfolio_layout.scss
View File

@ -519,3 +519,15 @@
}
}
}
#portfolio-create {
.usa-input__choices {
.usa-input__title {
font-weight: $font-bold;
}
label {
font-size: $base-font-size;
}
}
}

4
styles/core/_util.scss
View File

@ -98,7 +98,3 @@ hr {
.usa-section {
padding: 0;
}
.form {
margin-bottom: $action-footer-height + $large-spacing;
}

1
styles/core/_variables.scss
View File

@ -21,6 +21,7 @@ $home-pg-icon-width: 6rem;
$large-spacing: 4rem;
$max-page-width: $max-panel-width + $sidenav-expanded-width + $large-spacing;
$action-footer-height: 6rem;
$max-input-width: 46rem;
/*
* USWDS Variables

20
styles/elements/_inputs.scss
View File

@ -58,7 +58,7 @@
.usa-input {
margin: ($gap * 2) 0;
max-width: 75rem;
max-width: $max-input-width;
&-label-helper {
font-size: $small-font-size;
@ -111,8 +111,7 @@
@include h5;
font-weight: normal;
@include line-max;
max-width: $max-input-width;
.icon-link {
padding: 0 ($gap / 2);
@ -180,6 +179,10 @@
left: -3rem;
}
}
.usa-input__title {
margin-bottom: $gap;
}
}
select {
@ -372,19 +375,15 @@ select {
.phone-input {
display: flex;
flex-direction: row;
justify-content: flex-start;
&__phone {
margin-right: $gap * 4;
flex-grow: 1;
.usa-input {
margin: 0;
input,
label,
.usa-input__message {
max-width: 20rem;
}
.icon-validation {
left: 20rem;
}
@ -392,7 +391,8 @@ select {
}
&__extension {
margin-left: $gap * 4;
margin-right: $gap * 4;
flex-grow: 0;
.usa-input {
margin: 0;

4
styles/sections/_task_order.scss
View File

@ -140,6 +140,10 @@
&__confirmation {
margin-left: $gap * 8;
}
.usa-input {
max-width: 100%;
}
}
.task-order__modal-cancel {

5
templates/applications/fragments/members.html
View File

@ -36,7 +36,7 @@
{% set invite_expired = member.role_status == 'invite_expired' %}
{%- if user_can(permissions.EDIT_APPLICATION_MEMBER) %}
{% set modal_name = "edit_member-{}".format(loop.index) %}
{% call Modal(modal_name, classes="form-content--app-mem") %}
{% call Modal(modal_name, classes="form-content--member-form") %}
<div class="modal__form--header">
<h1>{{ Icon('avatar') }} {{ "portfolios.applications.members.form.edit_access_header" | translate({ "user": member.user_name }) }}</h1>
</div>
@ -56,7 +56,7 @@
{%- if invite_pending or invite_expired %}
{% set resend_invite_modal = "resend_invite-{}".format(member.role_id) %}
{% call Modal(resend_invite_modal, classes="form-content--app-mem") %}
{% call Modal(resend_invite_modal, classes="form-content--member-form") %}
<div class="modal__form--header">
<h1>{{ "portfolios.applications.members.new.verify" | translate }}</h1>
</div>
@ -183,6 +183,7 @@
modal=new_member_modal_name,
)
],
classes="form-content--member-form",
) }}
{% endif %}
</div>

2
templates/applications/new/step_1.html
View File

@ -22,7 +22,7 @@
{% include "fragments/flash.html" %}
<base-form inline-template :enable-save="true">
<form method="POST" action="{{ action }}" v-on:submit="handleSubmit" class="form">
<form method="POST" action="{{ action }}" v-on:submit="handleSubmit" class="form-container">
{{ form.csrf_token }}
<div class="form-row">
<div class="form-col">

2
templates/applications/new/step_2.html
View File

@ -21,7 +21,7 @@
</p>
<hr>
<application-environments inline-template v-bind:initial-data='{{ form.data|tojson }}'>
<form method="POST" action="{{ url_for('applications.update_new_application_step_2', portfolio_id=portfolio.id, application_id=application.id) }}" v-on:submit="handleSubmit" class="form">
<form method="POST" action="{{ url_for('applications.update_new_application_step_2', portfolio_id=portfolio.id, application_id=application.id) }}" v-on:submit="handleSubmit" class="form-container">
<div class="subheading">{{ 'portfolios.applications.environments_heading' | translate }}</div>
<div class="panel">
<div class="panel__content">

2
templates/applications/settings.html
View File

@ -20,7 +20,7 @@
{% if user_can(permissions.EDIT_APPLICATION) %}
<base-form inline-template>
<form method="POST" action="{{ url_for('applications.update', application_id=application.id) }}" class="col col--half">
<form method="POST" action="{{ url_for('applications.update', application_id=application.id) }}" class="form-container--narrow">
{{ application_form.csrf_token }}
{{ TextInput(application_form.name, validation="applicationName", optional=False) }}
{{ TextInput(application_form.description, validation="defaultTextAreaField", paragraph=True, optional=True, showOptional=False) }}

4
templates/components/multi_step_modal_form.html
View File

@ -25,10 +25,10 @@
</div>
{% endmacro %}
{% macro MultiStepModalForm(name, form, form_action, steps, dismissable=False) -%}
{% macro MultiStepModalForm(name, form, form_action, steps, dismissable=False, classes="") -%}
{% set step_count = steps|length %}
<multi-step-modal-form inline-template :steps={{ step_count }}>
{% call Modal(name=name, dismissable=dismissable) %}
{% call Modal(name=name, dismissable=dismissable, classes=classes) %}
<form id="{{ name }}" action="{{ form_action }}" method="POST" v-on:submit="handleSubmit">
{{ form.csrf_token }}
<div v-if="$root.activeModal === '{{ name }}'">

2
templates/portfolios/admin.html
View File

@ -13,7 +13,7 @@
<div v-cloak class="portfolio-admin">
{% include "fragments/flash.html" %}
<!-- max width of this section is 460px -->
<section class="form-container__half">
<section class="form-container--narrow">
<h3>Portfolio name and component</h3>
{% if user_can(permissions.EDIT_PORTFOLIO_NAME) %}
<base-form inline-template>

5
templates/portfolios/fragments/portfolio_members.html
View File

@ -14,7 +14,7 @@
{% set invite_expired = member.status == 'invite_expired' %}
{% set modal_name = "edit_member-{}".format(loop.index) %}
{% call Modal(modal_name, classes="form-content--app-mem") %}
{% call Modal(modal_name, classes="form-content--member-form") %}
<div class="modal__form--header">
<h1>{{ Icon('avatar') }} {{ "portfolios.applications.members.form.edit_access_header" | translate({ "user": member.user_name }) }}</h1>
</div>
@ -34,7 +34,7 @@
{% if invite_pending or invite_expired -%}
{% set resend_invite_modal = "resend_invite-{}".format(member.role_id) %}
{% call Modal(resend_invite_modal, classes="form-content--app-mem") %}
{% call Modal(resend_invite_modal, classes="form-content--member-form") %}
<div class="modal__form--header">
<h1>{{ "portfolios.applications.members.new.verify" | translate }}</h1>
</div>
@ -182,6 +182,7 @@
modal=new_manager_modal,
)
],
classes="form-content--member-form",
) }}
{% endif %}
</div>

9
templates/portfolios/new/step_1.html
View File

@ -19,24 +19,25 @@
{{ StickyCTA(text="portfolios.new.cta_step_1"|translate, context=("portfolios.new.sticky_header_context"|translate({"step": "1"}) )) }}
<base-form inline-template>
<div class="row">
<form id="portfolio-create" class="col form" action="{{ url_for('portfolios.create_portfolio') }}" method="POST">
<form id="portfolio-create" class="col form-container" action="{{ url_for('portfolios.create_portfolio') }}" method="POST">
{{ form.csrf_token }}
<div class="form-row form-row--bordered">
<div class="form-row">
<div class="form-col">
{{ TextInput(form.name, validation="portfolioName", optional=False, classes="form-col") }}
{{"forms.portfolio.name.help_text" | translate | safe }}
</div>
</div>
<div class="form-row form-row--bordered">
<hr>
<div class="form-row">
<div class="form-col">
{{ TextInput(form.description, validation="defaultTextAreaField", paragraph=True) }}
{{"forms.portfolio.description.help_text" | translate | safe }}
</div>
</div>
<hr>
<div class="form-row">
<div class="form-col">
{{ MultiCheckboxInput(form.defense_component, optional=False) }}
{{ "forms.portfolio.defense_component.help_text" | translate | safe }}
</div>
</div>
<div

2
templates/task_orders/builder_base.html
View File

@ -28,7 +28,7 @@
{% include "fragments/flash.html" %}
<div class="task-order form">
<div class="task-order form-container">
{% block to_builder_form_field %}{% endblock %}
</div>
<div

8
translations.yaml
View File

@ -271,7 +271,7 @@ forms:
label: Portfolio Name
length_validation_message: Portfolio names can be between 4-100 characters
help_text: |
<div>
<div class="usa-input__help">
<p>
Naming can be difficult. Choose a name that is descriptive enough for users to identify the Portfolio. You may consider naming based on your organization.
</p>
@ -285,7 +285,7 @@ forms:
description:
label: Portfolio Description
help_text: |
<div>
<div class="usa-input__help">
<p>
Add a brief one to two sentence description of your Portfolio. Consider this your statement of work.
</p>
@ -310,11 +310,9 @@ forms:
title: Select DoD component(s) funding your Portfolio
validation_message: You must select at least one defense component.
help_text: |
<p>
Select the DOD component(s) that will fund all Applications within this Portfolio.
In JEDI, multiple DoD organizations can fund the same Portfolio.<br/>
Select all that apply.<br/>
</p>
Select all that apply.
attachment:
object_name:
length_error: Object name may be no longer than 40 characters.