From e457e9a60db5d93b77e11d0f22e5c5821b449013 Mon Sep 17 00:00:00 2001
From: dandds <dan-ctr@friends.dds.mil>
Date: Thu, 2 May 2019 07:04:23 -0400
Subject: [PATCH] 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        |  4 ++
 .../applications/edit_application_form.html   |  8 ----
 templates/portfolios/applications/new.html    | 44 +++++++++++++++----
 translations.yaml                             |  1 +
 4 files changed, 40 insertions(+), 17 deletions(-)
 delete mode 100644 templates/fragments/applications/edit_application_form.html

diff --git a/styles/sections/_application_edit.scss b/styles/sections/_application_edit.scss
index 45a5ad12..a24d9373 100644
--- a/styles/sections/_application_edit.scss
+++ b/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;
   }
 
diff --git a/templates/fragments/applications/edit_application_form.html b/templates/fragments/applications/edit_application_form.html
deleted file mode 100644
index ef5dd455..00000000
--- a/templates/fragments/applications/edit_application_form.html
+++ /dev/null
@@ -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) }}
diff --git a/templates/portfolios/applications/new.html b/templates/portfolios/applications/new.html
index 4740fc56..2399b637 100644
--- a/templates/portfolios/applications/new.html
+++ b/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="hidden" :name="'environment_names-' + i" v-model="environment.name"/>
+                  <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>
+                <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>
 
diff --git a/translations.yaml b/translations.yaml
index 6299ca0e..fc61ace9 100644
--- a/translations.yaml
+++ b/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