Merge pull request #1112 from dod-ccpo/app-settings-styling

App settings styling (part 1)

templates/applications/base.html

@@ -5,7 +5,7 @@
 {% block portfolio_header %}
   {% include "portfolios/header.html" %}
   {% if application %}
-    {{ StickyCTA(text=application.name, return_link_url=url_for('applications.portfolio_applications', portfolio_id=application.portfolio_id), return_link_text="BACK TO APPLICATIONS") }}
+    {{ StickyCTA(text=application.name) }}
   {% endif %}
 {% endblock %}
 

templates/applications/fragments/member_form_fields.html

@@ -52,20 +52,12 @@
 {% endmacro %}
 
 {% macro InfoFields(member_form) %}
-  <div class='form-row'>
+  <div class="application-member__user-info">
     {{ TextInput(member_form.first_name, validation='requiredField', optional=False) }}
-  </div>
-  <div class='form-row'>
     {{ TextInput(member_form.last_name, validation='requiredField', optional=False) }}
-  </div>
-  <div class='form-row'>
     {{ TextInput(member_form.email, validation='email', optional=False) }}
-  </div>
-  <div class="form-row">
     {{ PhoneInput(member_form.phone_number, member_form.phone_ext)}}
-  </div>
-  <div class='form-row'>
     {{ TextInput(member_form.dod_id, validation='dodId', optional=False) }}
+    <a href="#">How do I find the DoD ID?</a>
   </div>
-  <a href="#">How do I find the DoD ID?</a>
 {% endmacro %}

templates/applications/settings.html

@@ -19,58 +19,40 @@
 
 {% 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>
   {% else %}
-    <div class="panel">
-      <div class="panel__content">
-        <p>
-          {{ "fragments.edit_application_form.explain" | translate }}
-        </p>
-        <div class="form-row">
-          <div class="form-col">
-            <div class="usa-input usa-input__title__view-only">
-              {{ application_form.name.label() }}
-            </div>
-            <p>
-              {{ application_form.name.data }}
-            </p>
-          </div>
-        </div>
-        <div class="form-row">
-          <div class="form-col">
-            <div class="usa-input usa-input__title__view-only">
-              {{ application_form.description.label() }}
-            </div>
-            <p>
-              {{ application_form.description.data }}
-            </p>
-          </div>
-        </div>
+    <!-- TODO: use new spacing styling to add in bottom margin here -->
+    <div class="">
+      <p>
+        {{ "fragments.edit_application_form.explain" | translate }}
+      </p>
+      <div class="usa-input usa-input__title__view-only">
+        {{ application_form.name.label() }}
       </div>
+      <p>
+        {{ application_form.name.data }}
+      </p>
+      <div class="usa-input usa-input__title__view-only">
+        {{ application_form.description.label() }}
+      </div>
+      <p>
+        {{ application_form.description.data }}
+      </p>
     </div>
   {% endif %}
+  <hr>
 
   {{ MemberManagementTemplate(
     application,

templates/components/sticky_cta.html

@@ -1,14 +1,7 @@
 {% from 'components/icon.html' import Icon %}
 
-{% macro StickyCTA(text, context=None, return_link_url=None, return_link_text=None) -%}
+{% macro StickyCTA(text, context=None) -%}
   <div class="sticky-cta" v-sticky='{ "stickyBitStickyOffset": 76 }'>
-    {% if return_link_url and return_link_text %}
-    <div class="sticky-cta-return-link">
-      <a href="{{ return_link_url }}">
-        {{ Icon('caret_left', classes="icon--tiny icon--blue") }} {{ return_link_text}}
-      </a>
-    </div>
-    {% endif %}
     <div class="sticky-cta-container">
       <div class="sticky-cta-text">
         <h3>{{ text }}</h3>

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>

templates/portfolios/header.html

@@ -13,11 +13,19 @@
 <div class='portfolio-header row'>
   <div class='col col--grow'>
     <div class='portfolio-header__name'>
+      <p>{{ "portfolios.header" | translate }}</p>
       <h1>{{ portfolio.name }}</h1>
     </div>
   </div>
   <div class='row links'>
-    {% if user_can(permissions.VIEW_PORTFOLIO_FUNDING) %}
+    {% if user_can(permissions.VIEW_PORTFOLIO_ADMIN) %}
+      {{ Link(
+        icon='cog',
+        text='navigation.portfolio_navigation.breadcrumbs.admin' | translate,
+        url=url_for("portfolios.admin", portfolio_id=portfolio.id),
+        active=request.url_rule.endpoint == "portfolios.admin",
+      ) }}
+    {% endif %}{% if user_can(permissions.VIEW_PORTFOLIO_FUNDING) %}
       {{ Link(
         icon='funding',
         text='navigation.portfolio_navigation.breadcrumbs.funding' | translate,
@@ -39,13 +47,6 @@
         active=request.url_rule.endpoint == "portfolios.reports",
       ) }}
     {% endif %}
-    {% if user_can(permissions.VIEW_PORTFOLIO_ADMIN) %}
-      {{ Link(
-        icon='cog',
-        text='navigation.portfolio_navigation.breadcrumbs.admin' | translate,
-        url=url_for("portfolios.admin", portfolio_id=portfolio.id),
-        active=request.url_rule.endpoint == "portfolios.admin",
-      ) }}
-    {% endif %}
+
   </div>
 </div>