Style improvements to the add a new application page:

- fix size of description textarea
- place "remove" buttons closer to text input fields for environments
- add icon for "add another environment" link

styles/sections/_application_edit.scss

@@ -5,6 +5,10 @@
 
   .usa-input {
     margin: 0 ($gap * 4) 0 0;
+    flex-grow: 2;
+  }
+
+  .application-edit__env-list-item-block {
     flex-grow: 1;
   }
 

templates/fragments/applications/edit_application_form.html

@@ -1,8 +0,0 @@
-{% from "components/text_input.html" import TextInput %}
-
-{{ form.csrf_token }}
-<p>
-  {{ "fragments.edit_application_form.explain" | translate }}
-</p>
-{{ TextInput(form.name) }}
-{{ TextInput(form.description, paragraph=True) }}

templates/portfolios/applications/new.html

@@ -37,7 +37,26 @@
             </div>
           {% endcall %}
 
-          {% include "fragments/applications/edit_application_form.html" %}
+          {{ form.csrf_token }}
+          <p>
+            {{ "fragments.edit_application_form.explain" | translate }}
+          </p>
+          <div class="form-row">
+            <div class="form-col form-col--two-thirds">
+              {{ TextInput(form.name) }}
+            </div>
+            <div class="form-col form-col--third">
+              &nbsp;
+            </div>
+          </div>
+          <div class="form-row">
+            <div class="form-col form-col--two-thirds">
+              {{ TextInput(form.description, paragraph=True) }}
+            </div>
+            <div class="form-col form-col--third">
+              &nbsp;
+            </div>
+          </div>
 
           <div> {# this extra div prevents this bug: https://www.pivotaltracker.com/story/show/160768940 #}
             <div v-cloak v-for="title in errors" :key="title">
@@ -57,22 +76,29 @@
               <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" placeholder="e.g. Development, Staging, Production"/>
+                  <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"/>
-                  <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>
-                <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>
+              <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>
 

translations.yaml

@@ -400,6 +400,7 @@ portfolios:
   applications:
     add_application_text: Add a new application
     add_environment: Add new environment
+    add_another_environment: Add another environment
     app_settings_text: App settings
     create_button_text: Create
     csp_console_text: CSP console