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

Align new application Step 1 with design mockups

Browse Source 
- remove unneeded variables and markup
- add a cancel button
- add form input descriptions
- add a class selector for the default panel <hr>, and change apperance
This commit is contained in:
graham-dds 2019-10-03 16:38:07 -04:00
parent 4a4e20534f
commit ae55f5ef00
3 changed files with 42 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
styles/elements/_panels.scss
View File

@ -120,9 +120,9 @@
@include panel-actions; @include panel-actions;
} }
hr { hr, &__break {
border: 0; border: 0;
border-bottom: 1px dashed $color-gray-light; border-bottom: 1px solid $color-gray-light;
margin: ($gap * 4) ($site-margins * -4); margin: ($gap * 4) ($site-margins * -4);
} }
} }

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

@ -7,14 +7,14 @@
{% set secondary_breadcrumb = 'portfolios.applications.new_application_title' | translate %} {% set secondary_breadcrumb = 'portfolios.applications.new_application_title' | translate %}
{% if application_id %} {% if application_id %}
{% set action = url_for('applications.update_new_application_step_1', portfolio_id=portfolio.id, application_id=application_id) %} {% set action = url_for('applications.update_new_application_step_1', application_id=application_id) %}
{% else %} {% else %}
{% set action = url_for('applications.create_new_application_step_1', portfolio_id=portfolio.id, application_id=application_id) %} {% set action = url_for('applications.create_new_application_step_1', portfolio_id=portfolio.id, application_id=application_id) %}
{% endif %} {% endif %}
{% block portfolio_header %} {% block portfolio_header %}
{% include "portfolios/header.html" %} {% include "portfolios/header.html" %}
{{ StickyCTA(text="Name and Describe New Application", context="Step 1 of 3") }} {{ StickyCTA(text=('portfolios.applications.new.step_1_header' | translate | safe), context="Step 1 of 3") }}
{% endblock %} {% endblock %}
{% block application_content %} {% block application_content %}
@ -23,31 +23,32 @@
<application-name-and-description inline-template v-bind:initial-data='{{ form.data|tojson }}'> <application-name-and-description inline-template v-bind:initial-data='{{ form.data|tojson }}'>
<form method="POST" action="{{ action }}" v-on:submit="handleSubmit"> <form method="POST" action="{{ action }}" v-on:submit="handleSubmit">
<div class="panel">
<div class="panel__content"> <div class="panel__content">
{{ form.csrf_token }} {{ form.csrf_token }}
<p>
{{ "fragments.edit_application_form.explain" | translate }}
</p>
<div class="form-row"> <div class="form-row">
<div class="form-col form-col--two-thirds"> <div class="form-col form-col--two-thirds">
{{ TextInput(form.name, optional=False) }} {{ TextInput(form.name, optional=False) }}
{{ ('portfolios.applications.new.step_1_form_help_text.description' | translate | safe) }}
</div> </div>
</div> </div>
<hr class="panel__break">
<div class="form-row"> <div class="form-row">
<div class="form-col form-col--two-thirds"> <div class="form-col form-col--two-thirds">
{{ TextInput(form.description, paragraph=True, optional=True) }} {{ TextInput(form.description, paragraph=True, optional=True) }}
</div> {{ ('portfolios.applications.new.step_1_form_help_text.description' | translate | safe) }}
</div> </div>
</div> </div>
</div> </div>
</div>
<span class="action-group"> <span class="action-group">
{% block next_button %} {% block next_button %}
{{ SaveButton(text=('portfolios.applications.new.step_1_button_text' | translate)) }} {{ SaveButton(text=('portfolios.applications.new.step_1_button_text' | translate)) }}
{% endblock %} {% endblock %}
</span> <a class="usa-button usa-button-secondary" href="{{ url_for('applications.portfolio_applications', portfolio_id=portfolio.id) }}">
Cancel
</a>
</span>
</form> </form>
</application-name-and-description> </application-name-and-description>

27
translations.yaml
View File

@ -309,8 +309,33 @@ portfolios:
add_another_environment: Add another environment add_another_environment: Add another environment
app_settings_text: App settings app_settings_text: App settings
new: new:
step_1_header: "Name and Describe New Application" step_1_header: Name and Describe New Project
step_1_button_text: "Save and Add Environments" step_1_button_text: "Save and Add Environments"
step_1_form_help_text:
name: |
<div style="margin-top: -3rem;">
<p>
The name of your project should be intuitive and easily recognizable for all of your team members.
</p>
<p>
<strong>Writer's Block? A naming example includes:</strong>
<ul>
<li>Army Security Infrastructure Application</li>
</ul>
</p>
</div>
description: |
<div style="margin-top: -3rem;">
<p>
Add a brief one to two sentence description of your project. You should be able to reference your TO Description of Work.
</p>
<p>
<strong>Writer's Block? A naming example includes:</strong>
<ul>
<li>Build security applications for FOB Clark</li>
</ul>
</p>
</div>
step_2_header: Add Environments to {application_name} step_2_header: Add Environments to {application_name}
step_2_button_text: "Save and Add Members" step_2_button_text: "Save and Add Members"
step_3_header: Invite Members to {application_name} step_3_header: Invite Members to {application_name}