Move application form contents to one panel
This commit is contained in:
Patrick Smith
parent
32583689fc
commit
7862cb9c2c
@ -85,10 +85,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.portfolio-content {
|
||||
margin: 6 * $gap $gap 0 $gap;
|
||||
}
|
||||
|
||||
@mixin subheading {
|
||||
color: $color-gray-dark;
|
||||
padding: $gap 0;
|
||||
@ -98,6 +94,23 @@
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.portfolio-content {
|
||||
margin: 6 * $gap $gap 0 $gap;
|
||||
|
||||
.application-content {
|
||||
.subheading {
|
||||
@include subheading;
|
||||
}
|
||||
|
||||
.panel {
|
||||
padding: $gap / 2 0;
|
||||
box-shadow: 0 6px 18px 0 rgba(144,164,183,0.3);
|
||||
border-top: none;
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.portfolio-applications {
|
||||
.portfolio-applications__header {
|
||||
margin-bottom: 4 * $gap;
|
||||
|
||||
@ -1,12 +1,8 @@
|
||||
{% from "components/text_input.html" import TextInput %}
|
||||
|
||||
{{ form.csrf_token }}
|
||||
<div class="panel">
|
||||
<div class="panel__content">
|
||||
<p>
|
||||
{{ "fragments.edit_application_form.explain" | translate }}
|
||||
</p>
|
||||
{{ TextInput(form.name) }}
|
||||
{{ TextInput(form.description, paragraph=True) }}
|
||||
</div>
|
||||
</div>
|
||||
<p>
|
||||
{{ "fragments.edit_application_form.explain" | translate }}
|
||||
</p>
|
||||
{{ TextInput(form.name) }}
|
||||
{{ TextInput(form.description, paragraph=True) }}
|
||||
|
||||
@ -6,33 +6,39 @@
|
||||
|
||||
{% block application_content %}
|
||||
|
||||
<form method="POST" action="{{ url_for('portfolios.edit_application', portfolio_id=portfolio.id, application_id=application.id) }}">
|
||||
<div class='subheading'>Application Settings</div>
|
||||
|
||||
{% include "fragments/edit_application_form.html" %}
|
||||
<div class="panel">
|
||||
<div class="panel__content">
|
||||
<form method="POST" action="{{ url_for('portfolios.edit_application', portfolio_id=portfolio.id, application_id=application.id) }}">
|
||||
|
||||
<div class="block-list application-list-item">
|
||||
<header class="block-list__header block-list__header--grow">
|
||||
<h2 class="block-list__title">Application Environments</h2>
|
||||
<p>
|
||||
Each environment created within an application is an enclave of cloud resources that is logically separated from each other for increased security.
|
||||
</p>
|
||||
</header>
|
||||
{% include "fragments/edit_application_form.html" %}
|
||||
|
||||
<ul>
|
||||
{% for environment in application.environments %}
|
||||
<li class="block-list__item application-edit__env-list-item">
|
||||
<div class="usa-input">
|
||||
<label>Environment Name</label>
|
||||
<input type="text" value="{{ environment.name }}" readonly />
|
||||
</div>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
<div class="block-list application-list-item">
|
||||
<header class="block-list__header block-list__header--grow">
|
||||
<h2 class="block-list__title">Application Environments</h2>
|
||||
<p>
|
||||
Each environment created within an application is an enclave of cloud resources that is logically separated from each other for increased security.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<ul>
|
||||
{% for environment in application.environments %}
|
||||
<li class="block-list__item application-edit__env-list-item">
|
||||
<div class="usa-input">
|
||||
<label>Environment Name</label>
|
||||
<input type="text" value="{{ environment.name }}" readonly />
|
||||
</div>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="action-group">
|
||||
<button class="usa-button usa-button-primary" tabindex="0" type="submit">Update Application</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="action-group">
|
||||
<button class="usa-button usa-button-primary" tabindex="0" type="submit">Update Application</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{% endblock %}
|
||||
|
||||
@ -12,65 +12,71 @@
|
||||
{% set modalName = "newApplicationConfirmation" %}
|
||||
{% include "fragments/flash.html" %}
|
||||
|
||||
<new-application inline-template v-bind:initial-data='{{ form.data|tojson }}' modal-name='{{ modalName }}'>
|
||||
<form method="POST" action="{{ url_for('portfolios.create_application', portfolio_id=portfolio.id) }}" v-on:submit="handleSubmit">
|
||||
<div class="panel">
|
||||
<div class="panel__content">
|
||||
|
||||
{% call Modal(name=modalName, dismissable=False) %}
|
||||
<h1>Create application !{ name }</h1>
|
||||
<new-application inline-template v-bind:initial-data='{{ form.data|tojson }}' modal-name='{{ modalName }}'>
|
||||
<form method="POST" action="{{ url_for('portfolios.create_application', portfolio_id=portfolio.id) }}" v-on:submit="handleSubmit">
|
||||
|
||||
<p>
|
||||
When you click <em>Create Application</em>, the environments
|
||||
<span v-for="(environment, index) in environments">
|
||||
<strong>!{environment.name}</strong><template v-if="index < (environments.length - 1)">, </template>
|
||||
</span>
|
||||
will be created as individual cloud resource groups under <strong>!{ name }</strong> application.
|
||||
</p>
|
||||
{% call Modal(name=modalName, dismissable=False) %}
|
||||
<h1>Create application !{ name }</h1>
|
||||
|
||||
<div class='action-group'>
|
||||
<button autofocus type='submit' class='action-group__action usa-button' tabindex='0'>Create Application</button>
|
||||
<button type='button' v-on:click="handleCancelSubmit" class='icon-link action-group__action' tabindex='0'>Cancel</button>
|
||||
</div>
|
||||
{% endcall %}
|
||||
<p>
|
||||
When you click <em>Create Application</em>, the environments
|
||||
<span v-for="(environment, index) in environments">
|
||||
<strong>!{environment.name}</strong><template v-if="index < (environments.length - 1)">, </template>
|
||||
</span>
|
||||
will be created as individual cloud resource groups under <strong>!{ name }</strong> application.
|
||||
</p>
|
||||
|
||||
{% include "fragments/edit_application_form.html" %}
|
||||
|
||||
<div> {# this extra div prevents this bug: https://www.pivotaltracker.com/story/show/160768940 #}
|
||||
<div v-cloak v-for="title in errors" :key="title">
|
||||
{{ Alert(message=None, level="error", vue_template=True) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="block-list application-list-item">
|
||||
<header class="block-list__header block-list__header--grow">
|
||||
<h2 class="block-list__title">Application Environments</h2>
|
||||
<p>
|
||||
Each environment created within an application is an enclave of cloud resources that is logically separated from each other for increased security.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<ul>
|
||||
<li v-for="(environment, i) in environments" class="block-list__item application-edit__env-list-item">
|
||||
<div class="usa-input">
|
||||
<label :for="'environment_names-' + i">Environment Name</label>
|
||||
<input type="text" :id="'environment_names-' + i" v-model="environment.name" placeholder="e.g. Development, Staging, Production"/>
|
||||
<input type="hidden" :name="'environment_names-' + i" v-model="environment.name"/>
|
||||
<div class='action-group'>
|
||||
<button autofocus type='submit' class='action-group__action usa-button' tabindex='0'>Create Application</button>
|
||||
<button type='button' v-on:click="handleCancelSubmit" class='icon-link action-group__action' tabindex='0'>Cancel</button>
|
||||
</div>
|
||||
<button v-on:click="removeEnvironment(i)" v-if="environments.length > 1" type="button" class='application-edit__env-list-item__remover'>
|
||||
{{ Icon('trash') }}
|
||||
<span>Remove</span>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
{% endcall %}
|
||||
|
||||
<div class="block-list__footer">
|
||||
<button v-on:click="addEnvironment" class="icon-link" tabindex="0" type="button">Add another environment</button>
|
||||
</div>
|
||||
</div>
|
||||
{% include "fragments/edit_application_form.html" %}
|
||||
|
||||
<div class="action-group">
|
||||
<button class="usa-button usa-button-primary" tabindex="0" type="submit">Create Application</button>
|
||||
</div>
|
||||
</form>
|
||||
</new-application>
|
||||
<div> {# this extra div prevents this bug: https://www.pivotaltracker.com/story/show/160768940 #}
|
||||
<div v-cloak v-for="title in errors" :key="title">
|
||||
{{ Alert(message=None, level="error", vue_template=True) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="block-list application-list-item">
|
||||
<header class="block-list__header block-list__header--grow">
|
||||
<h2 class="block-list__title">Application Environments</h2>
|
||||
<p>
|
||||
Each environment created within an application is an enclave of cloud resources that is logically separated from each other for increased security.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<ul>
|
||||
<li v-for="(environment, i) in environments" class="block-list__item application-edit__env-list-item">
|
||||
<div class="usa-input">
|
||||
<label :for="'environment_names-' + i">Environment Name</label>
|
||||
<input type="text" :id="'environment_names-' + i" v-model="environment.name" placeholder="e.g. Development, Staging, Production"/>
|
||||
<input type="hidden" :name="'environment_names-' + i" v-model="environment.name"/>
|
||||
</div>
|
||||
<button v-on:click="removeEnvironment(i)" v-if="environments.length > 1" type="button" class='application-edit__env-list-item__remover'>
|
||||
{{ Icon('trash') }}
|
||||
<span>Remove</span>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="block-list__footer">
|
||||
<button v-on:click="addEnvironment" class="icon-link" tabindex="0" type="button">Add another environment</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="action-group">
|
||||
<button class="usa-button usa-button-primary" tabindex="0" type="submit">Create Application</button>
|
||||
</div>
|
||||
</form>
|
||||
</new-application>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% endblock %}
|
||||
|
||||
@ -173,7 +173,7 @@ forms:
|
||||
environment_names_label: Environment Name
|
||||
environment_names_required_validation_message: Provide at least one environment name.
|
||||
environment_names_unique_validation_message: Environment names must be unique.
|
||||
name_label: Application Name
|
||||
name_label: Name
|
||||
task_order:
|
||||
portfolio_name_label: Organization Portfolio Name
|
||||
portfolio_name_description: The name of your office or organization. You can add multiple applications to your portfolio. Your task orders are used to pay for these applications and their environments.
|
||||
@ -258,7 +258,7 @@ forms:
|
||||
fragments:
|
||||
edit_application_form:
|
||||
existing_application_title: 'Edit {application_name} application'
|
||||
explain: 'AT-AT allows you to organize your portfolio into multiple applications, each of which may have environments.'
|
||||
explain: 'AT-AT allows you to create multiple applications within a portfolio. Each application can then be broken down into its own customizable environments.'
|
||||
new_application_title: Add a new application
|
||||
edit_user_form:
|
||||
date_last_training_tooltip: When was the last time you completed the IA training? <br> Information Assurance (IA) training is an important step in cyber awareness.
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user