From 5a98e6966ee8bb1ef9ff858917b5ed7208a00018 Mon Sep 17 00:00:00 2001
From: leigh-mil <leigh-ctr@friends.dds.mil>
Date: Thu, 10 Oct 2019 11:11:53 -0400
Subject: [PATCH] Styling for name and description section: As part of this,
 the empty placeholder span was removed from the text input macro and the span
 will now be conditionall rendered if there is an error message

---
 styles/components/_portfolio_layout.scss |  7 +------
 styles/core/_grid.scss                   |  4 ++++
 templates/applications/settings.html     | 25 ++++++++----------------
 templates/components/text_input.html     | 10 +++-------
 translations.yaml                        |  6 +++---
 5 files changed, 19 insertions(+), 33 deletions(-)

diff --git a/styles/components/_portfolio_layout.scss b/styles/components/_portfolio_layout.scss
index fac56c0b..d2a1998b 100644
--- a/styles/components/_portfolio_layout.scss
+++ b/styles/components/_portfolio_layout.scss
@@ -136,7 +136,7 @@
 }
 
 .portfolio-content {
-  margin: 1 * $gap $gap 0 $gap;
+  margin: (4 * $gap) $gap 0 $gap;
 
   .panel {
     @include shadow-panel;
@@ -148,11 +148,6 @@
       padding-bottom: 0;
     }
 
-    .subheading {
-      font-size: 1.4rem;
-      color: $color-gray;
-    }
-
     .responsive-table-wrapper {
       padding-bottom: $gap * 3;
       margin-bottom: 0;
diff --git a/styles/core/_grid.scss b/styles/core/_grid.scss
index f7037d42..ef264cd8 100644
--- a/styles/core/_grid.scss
+++ b/styles/core/_grid.scss
@@ -44,4 +44,8 @@
     flex-grow: 1;
     padding-right: $spacing-small;
   }
+
+  &.col--half {
+    width: 50%;
+  }
 }
diff --git a/templates/applications/settings.html b/templates/applications/settings.html
index 362d4e7b..06c47b8e 100644
--- a/templates/applications/settings.html
+++ b/templates/applications/settings.html
@@ -19,26 +19,16 @@
 
 {% block application_content %}
 
-  <div class='subheading'>{{ 'portfolios.applications.settings.name_description' | translate }}</div>
+  <h3>{{ 'portfolios.applications.settings.name_description' | translate }}</h3>
 
   {% if user_can(permissions.EDIT_APPLICATION) %}
     <base-form inline-template>
-      <form method="POST" action="{{ url_for('applications.update', application_id=application.id) }}">
-        <div class="panel">
-          <div class="panel__content">
-            {{ application_form.csrf_token }}
-            <div class="form-row">
-              <div class="form-col form-col--two-thirds">
-                {{ TextInput(application_form.name, optional=False) }}
-                {{ TextInput(application_form.description, paragraph=True, optional=True) }}
-              </div>
-            </div>
-          </div>
-          <div class="panel__footer">
-            <div class="action-group">
-              {{ SaveButton('common.save_changes'|translate) }}
-            </div>
-          </div>
+      <form method="POST" action="{{ url_for('applications.update', application_id=application.id) }}" class="col col--half">
+        {{ application_form.csrf_token }}
+        {{ TextInput(application_form.name, optional=False) }}
+        {{ TextInput(application_form.description, paragraph=True, optional=True, showOptional=False) }}
+        <div class="action-group action-group--tight">
+          {{ SaveButton('common.save_changes'|translate) }}
         </div>
       </form>
     </base-form>
@@ -71,6 +61,7 @@
       </div>
     </div>
   {% endif %}
+  <hr>
 
   {{ MemberManagementTemplate(
     application,
diff --git a/templates/components/text_input.html b/templates/components/text_input.html
index 9b9cb279..69ebd727 100644
--- a/templates/components/text_input.html
+++ b/templates/components/text_input.html
@@ -15,6 +15,7 @@
   classes='',
   noMaxWidth=False,
   optional=True,
+  showOptional=True,
   showLabel=True,
   watch=False,
   show_validation=True) -%}
@@ -40,7 +41,7 @@
         <label for={{field.name}}>
           <div class="usa-input__title">
             {{ label }}
-            {% if optional %}
+            {% if optional and showOptional %}
               <span class="usa-input-label-helper">(optional)</span>
             {% endif %}
             {% if tooltip and not disabled %}
@@ -108,12 +109,7 @@
       />
 
       {% if show_validation %}
-        <template v-if='showError'>
-          <span class='usa-input__message' v-html='validationError'></span>
-        </template>
-        <template v-else>
-          <span class='usa-input__message'></span>
-        </template>
+        <span v-if='showError' class='usa-input__message' v-html='validationError'></span>
       {% endif %}
 
     </div>
diff --git a/translations.yaml b/translations.yaml
index 7c5e21f1..f1a95729 100644
--- a/translations.yaml
+++ b/translations.yaml
@@ -127,11 +127,11 @@ footer:
   login: 'Last login:'
 forms:
   application:
-    description_label: Description
+    description_label: Application Description
     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: Name
+    name_label: Application Name
   assign_ppoc:
     dod_id: 'Select new primary point of contact:'
   environments:
@@ -371,7 +371,7 @@ portfolios:
     new_application_title: New Application
     settings_heading: Application Settings
     settings:
-      name_description: Name and Description
+      name_description: Application name and description
       team_members: Team Members
     team_settings:
       blank_slate: