Refactor HTML and styles of new app provisioning
- remove "panel__content" div wrapper - add margin helper to p tags in steps 2 and 3 for flashed message
This commit is contained in:
graham-dds
parent
9faf55f2d6
commit
e49257ca35
@ -219,6 +219,8 @@
|
||||
}
|
||||
|
||||
.application-content {
|
||||
margin-top: $gap * 4;
|
||||
|
||||
.subheading {
|
||||
@include subheading;
|
||||
position: relative;
|
||||
|
||||
@ -23,23 +23,20 @@
|
||||
|
||||
<application-name-and-description inline-template v-bind:initial-data='{{ form.data|tojson }}'>
|
||||
<form method="POST" action="{{ action }}" v-on:submit="handleSubmit">
|
||||
<div class="panel__content">
|
||||
{{ form.csrf_token }}
|
||||
<div class="form-row">
|
||||
<div class="form-col form-col--two-thirds">
|
||||
{{ TextInput(form.name, optional=False) }}
|
||||
{{ ('portfolios.applications.new.step_1_form_help_text.name' | translate | safe) }}
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-row">
|
||||
<div class="form-col form-col--two-thirds">
|
||||
{{ TextInput(form.description, paragraph=True, optional=True) }}
|
||||
{{ ('portfolios.applications.new.step_1_form_help_text.description' | translate | safe) }}
|
||||
</div>
|
||||
</div>
|
||||
{{ form.csrf_token }}
|
||||
<div class="form-row">
|
||||
<div class="form-col">
|
||||
{{ TextInput(form.name, optional=False) }}
|
||||
{{ ('portfolios.applications.new.step_1_form_help_text.name' | translate | safe) }}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<hr class="panel__break">
|
||||
<div class="form-row">
|
||||
<div class="form-col form-col--two-thirds">
|
||||
{{ TextInput(form.description, paragraph=True, optional=True) }}
|
||||
{{ ('portfolios.applications.new.step_1_form_help_text.description' | translate | safe) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<span class="action-group">
|
||||
{% block next_button %}
|
||||
|
||||
@ -16,66 +16,64 @@
|
||||
|
||||
{% set modalName = "newApplicationConfirmation" %}
|
||||
{% include "fragments/flash.html" %}
|
||||
<div class="panel__content">
|
||||
<p>
|
||||
{{ 'portfolios.applications.new.step_2_description' | translate }}
|
||||
</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">
|
||||
<div class="subheading">{{ 'portfolios.applications.environments_heading' | translate }}</div>
|
||||
<div class="panel">
|
||||
<div class="panel__content">
|
||||
{{ form.csrf_token }}
|
||||
<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>
|
||||
<p>
|
||||
{{ 'portfolios.applications.new.step_2_description' | translate }}
|
||||
</p>
|
||||
<hr class="panel__break">
|
||||
<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">
|
||||
<div class="subheading">{{ 'portfolios.applications.environments_heading' | translate }}</div>
|
||||
<div class="panel">
|
||||
<div class="panel__content">
|
||||
{{ form.csrf_token }}
|
||||
<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 class="application-list-item">
|
||||
<ul>
|
||||
<li v-for="(environment, i) in environments" class="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" @input="onInput" placeholder="e.g. Development, Staging, Production"/> <input type="hidden" :name="'environment_names-' + i" v-model="environment.name"/>
|
||||
</div>
|
||||
<div class="application-edit__env-list-item-block">
|
||||
<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>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="block-list__footer">
|
||||
<button
|
||||
v-on:click="addEnvironment"
|
||||
class="icon-link"
|
||||
tabindex="0"
|
||||
type="button">
|
||||
{{ 'portfolios.applications.add_another_environment' | translate }}
|
||||
{{ Icon("plus") }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<span class="action-group">
|
||||
{% block next_button %}
|
||||
{{ SaveButton(text=('portfolios.applications.new.step_2_button_text' | translate)) }}
|
||||
{% endblock %}
|
||||
<a class="usa-button usa-button-secondary" href="{{ url_for('applications.view_new_application_step_1', application_id=application.id) }}">
|
||||
Previous
|
||||
</a>
|
||||
<a href="{{ url_for('applications.portfolio_applications', portfolio_id=portfolio.id) }}">
|
||||
Cancel
|
||||
</a>
|
||||
</span>
|
||||
</form>
|
||||
</application-environments>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="application-list-item">
|
||||
<ul>
|
||||
<li v-for="(environment, i) in environments" class="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" @input="onInput" placeholder="e.g. Development, Staging, Production"/> <input type="hidden" :name="'environment_names-' + i" v-model="environment.name"/>
|
||||
</div>
|
||||
<div class="application-edit__env-list-item-block">
|
||||
<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>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="block-list__footer">
|
||||
<button
|
||||
v-on:click="addEnvironment"
|
||||
class="icon-link"
|
||||
tabindex="0"
|
||||
type="button">
|
||||
{{ 'portfolios.applications.add_another_environment' | translate }}
|
||||
{{ Icon("plus") }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<span class="action-group">
|
||||
{% block next_button %}
|
||||
{{ SaveButton(text=('portfolios.applications.new.step_2_button_text' | translate)) }}
|
||||
{% endblock %}
|
||||
<a class="usa-button usa-button-secondary" href="{{ url_for('applications.view_new_application_step_1', application_id=application.id) }}">
|
||||
Previous
|
||||
</a>
|
||||
<a href="{{ url_for('applications.portfolio_applications', portfolio_id=portfolio.id) }}">
|
||||
Cancel
|
||||
</a>
|
||||
</span>
|
||||
</form>
|
||||
</application-environments>
|
||||
|
||||
{% endblock %}
|
||||
|
||||
@ -11,31 +11,30 @@
|
||||
|
||||
{% block application_content %}
|
||||
{% include "fragments/flash.html" %}
|
||||
<div class="panel__content">
|
||||
<p>
|
||||
{{ ('portfolios.applications.new.step_3_description' | translate) }}
|
||||
</p>
|
||||
<hr>
|
||||
|
||||
{{ MemberManagementTemplate(
|
||||
application,
|
||||
members,
|
||||
new_member_form,
|
||||
"applications.update_new_application_step_3",
|
||||
user_can(permissions.CREATE_APPLICATION_MEMBER)) }}
|
||||
|
||||
<p>
|
||||
{{ ('portfolios.applications.new.step_3_description' | translate) }}
|
||||
</p>
|
||||
<hr class="panel__break">
|
||||
|
||||
{{ MemberManagementTemplate(
|
||||
application,
|
||||
members,
|
||||
new_member_form,
|
||||
"applications.update_new_application_step_3",
|
||||
user_can(permissions.CREATE_APPLICATION_MEMBER)) }}
|
||||
|
||||
|
||||
<span class="action-group">
|
||||
<a class="usa-button" href="{{ url_for('applications.settings', application_id=application_id) }}">
|
||||
Return to Application Settings
|
||||
</a>
|
||||
<a class="usa-button usa-button-secondary" href="{{ url_for('applications.view_new_application_step_2', application_id=application.id) }}">
|
||||
Previous
|
||||
</a>
|
||||
<a href="{{ url_for('applications.portfolio_applications', portfolio_id=portfolio.id) }}">
|
||||
Cancel
|
||||
</a>
|
||||
</span>
|
||||
|
||||
<span class="action-group">
|
||||
<a class="usa-button" href="{{ url_for('applications.settings', application_id=application_id) }}">
|
||||
Return to Application Settings
|
||||
</a>
|
||||
<a class="usa-button usa-button-secondary" href="{{ url_for('applications.view_new_application_step_2', application_id=application.id) }}">
|
||||
Previous
|
||||
</a>
|
||||
<a href="{{ url_for('applications.portfolio_applications', portfolio_id=portfolio.id) }}">
|
||||
Cancel
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user