Merge pull request #1427 from dod-ccpo/new-portfolio-styling--v2

portfolio form styling

atst/forms/portfolio.py

@@ -33,6 +33,7 @@ class PortfolioForm(BaseForm):
 class PortfolioCreationForm(PortfolioForm):
     defense_component = SelectMultipleField(
         translate("forms.portfolio.defense_component.title"),
+        description=translate("forms.portfolio.defense_component.help_text"),
         choices=SERVICE_BRANCHES,
         widget=ListWidget(prefix_label=False),
         option_widget=CheckboxInput(),

styles/components/_forms.scss

@@ -2,10 +2,6 @@
 .form-row {
   margin: ($gap * 4) 0;
 
-  &--bordered {
-    border-bottom: $color-gray-lighter 1px solid;
-  }
-
   .form-col {
     flex-grow: 1;
 
@@ -22,8 +18,9 @@
     }
 
     .usa-input {
-      input {
+      input,
-        max-width: none;
+      textarea {
+        max-width: $max-input-width;
       }
     }
   }
@@ -204,6 +201,10 @@
   }
 }
 
-.form-container__half {
+.form-container {
-  max-width: 46rem;
+  margin-bottom: $action-footer-height + $large-spacing;
+
+  &--narrow {
+    max-width: $max-input-width;
+  }
 }

styles/components/_member_form.scss

@@ -5,17 +5,11 @@
     margin-left: 0;
   }
 
-  .input__inline-fields {
-    text-align: left;
-
-    .usa-input__choices label {
-      font-weight: $font-bold;
-    }
-  }
-
   .input__inline-fields {
     padding: $gap * 2;
     border: 1px solid $color-gray-lighter;
+    text-align: left;
+    max-width: 100%;
 
     &.checked {
       border: 1px solid $color-blue;
@@ -33,7 +27,7 @@
 
   .user-info {
     .usa-input {
-      width: 45rem;
+      max-width: $max-input-width;
 
       input,
       label,
@@ -53,8 +47,7 @@
   }
 }
 
-#modal--add-app-mem,
+.form-content--member-form {
-#modal--add-portfolio-manager {
   .modal__body {
     min-width: 75rem;
   }

styles/components/_portfolio_layout.scss

@@ -519,3 +519,15 @@
     }
   }
 }
+
+#portfolio-create {
+  .usa-input__choices {
+    .usa-input__title {
+      font-weight: $font-bold;
+    }
+
+    label {
+      font-size: $base-font-size;
+    }
+  }
+}

styles/core/_util.scss

@@ -98,7 +98,3 @@ hr {
 .usa-section {
   padding: 0;
 }
-
-.form {
-  margin-bottom: $action-footer-height + $large-spacing;
-}

styles/core/_variables.scss

@@ -21,6 +21,7 @@ $home-pg-icon-width: 6rem;
 $large-spacing: 4rem;
 $max-page-width: $max-panel-width + $sidenav-expanded-width + $large-spacing;
 $action-footer-height: 6rem;
+$max-input-width: 46rem;
 
 /*
  * USWDS Variables

styles/elements/_inputs.scss

@@ -58,7 +58,7 @@
 
 .usa-input {
   margin: ($gap * 2) 0;
-  max-width: 75rem;
+  max-width: $max-input-width;
 
   &-label-helper {
     font-size: $small-font-size;
@@ -111,8 +111,7 @@
     @include h5;
 
     font-weight: normal;
-
+    max-width: $max-input-width;
-    @include line-max;
 
     .icon-link {
       padding: 0 ($gap / 2);
@@ -180,6 +179,10 @@
           left: -3rem;
         }
       }
+
+      .usa-input__title {
+        margin-bottom: $gap;
+      }
     }
 
     select {
@@ -372,19 +375,15 @@ select {
 .phone-input {
   display: flex;
   flex-direction: row;
+  justify-content: flex-start;
 
   &__phone {
     margin-right: $gap * 4;
+    flex-grow: 1;
 
     .usa-input {
       margin: 0;
 
-      input,
-      label,
-      .usa-input__message {
-        max-width: 20rem;
-      }
-
       .icon-validation {
         left: 20rem;
       }
@@ -392,7 +391,8 @@ select {
   }
 
   &__extension {
-    margin-left: $gap * 4;
+    margin-right: $gap * 4;
+    flex-grow: 0;
 
     .usa-input {
       margin: 0;

styles/sections/_task_order.scss

@@ -140,6 +140,10 @@
   &__confirmation {
     margin-left: $gap * 8;
   }
+
+  .usa-input {
+    max-width: 100%;
+  }
 }
 
 .task-order__modal-cancel {

templates/applications/fragments/members.html

@@ -36,7 +36,7 @@
       {% set invite_expired = member.role_status == 'invite_expired' %}
       {%- if user_can(permissions.EDIT_APPLICATION_MEMBER) %}
         {% set modal_name = "edit_member-{}".format(loop.index) %}
-        {% call Modal(modal_name, classes="form-content--app-mem") %}
+        {% call Modal(modal_name, classes="form-content--member-form") %}
           <div class="modal__form--header">
             <h1>{{ Icon('avatar') }} {{ "portfolios.applications.members.form.edit_access_header" | translate({ "user": member.user_name }) }}</h1>
           </div>
@@ -56,7 +56,7 @@
 
         {%- if invite_pending or invite_expired %}
           {% set resend_invite_modal = "resend_invite-{}".format(member.role_id) %}
-          {% call Modal(resend_invite_modal, classes="form-content--app-mem") %}
+          {% call Modal(resend_invite_modal, classes="form-content--member-form") %}
             <div class="modal__form--header">
               <h1>{{ "portfolios.applications.members.new.verify" | translate }}</h1>
             </div>
@@ -183,6 +183,7 @@
             modal=new_member_modal_name,
           )
         ],
+        classes="form-content--member-form",
       ) }}
   {% endif %}
   </div>

templates/applications/new/step_1.html

@@ -22,7 +22,7 @@
   {% include "fragments/flash.html" %}
 
   <base-form inline-template :enable-save="true">
-    <form method="POST" action="{{ action }}" v-on:submit="handleSubmit" class="form">
+    <form method="POST" action="{{ action }}" v-on:submit="handleSubmit" class="form-container">
       {{ form.csrf_token }}
       <div class="form-row">
         <div class="form-col">

templates/applications/new/step_2.html

@@ -21,7 +21,7 @@
   </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" class="form">
+    <form method="POST" action="{{ url_for('applications.update_new_application_step_2', portfolio_id=portfolio.id, application_id=application.id) }}" v-on:submit="handleSubmit" class="form-container">
       <div class="subheading">{{ 'portfolios.applications.environments_heading' | translate }}</div>
       <div class="panel">
         <div class="panel__content">

templates/applications/settings.html

@@ -20,7 +20,7 @@
 
   {% if user_can(permissions.EDIT_APPLICATION) %}
     <base-form inline-template>
-      <form method="POST" action="{{ url_for('applications.update', application_id=application.id) }}" class="col col--half">
+      <form method="POST" action="{{ url_for('applications.update', application_id=application.id) }}" class="form-container--narrow">
         {{ application_form.csrf_token }}
         {{ TextInput(application_form.name, validation="applicationName", optional=False) }}
         {{ TextInput(application_form.description, validation="defaultTextAreaField", paragraph=True, optional=True, showOptional=False) }}

templates/components/multi_step_modal_form.html

@@ -25,10 +25,10 @@
   </div>
 {% endmacro %}
 
-{% macro MultiStepModalForm(name, form, form_action, steps, dismissable=False) -%}
+{% macro MultiStepModalForm(name, form, form_action, steps, dismissable=False, classes="") -%}
   {% set step_count = steps|length %}
   <multi-step-modal-form inline-template :steps={{ step_count }}>
-    {% call Modal(name=name, dismissable=dismissable) %}
+    {% call Modal(name=name, dismissable=dismissable, classes=classes) %}
       <form id="{{ name }}" action="{{ form_action }}" method="POST" v-on:submit="handleSubmit">
         {{ form.csrf_token }}
         <div v-if="$root.activeModal === '{{ name }}'">

templates/portfolios/admin.html

@@ -13,7 +13,7 @@
   <div v-cloak class="portfolio-admin">
     {% include "fragments/flash.html" %}
     <!-- max width of this section is 460px -->
-    <section class="form-container__half">
+    <section class="form-container--narrow">
       <h3>Portfolio name and component</h3>
       {% if user_can(permissions.EDIT_PORTFOLIO_NAME) %}
         <base-form inline-template>

templates/portfolios/fragments/portfolio_members.html

@@ -14,7 +14,7 @@
       {% set invite_expired = member.status == 'invite_expired' %}
 
       {% set modal_name = "edit_member-{}".format(loop.index) %}
-      {% call Modal(modal_name, classes="form-content--app-mem") %}
+      {% call Modal(modal_name, classes="form-content--member-form") %}
         <div class="modal__form--header">
           <h1>{{ Icon('avatar') }} {{ "portfolios.applications.members.form.edit_access_header" | translate({ "user": member.user_name }) }}</h1>
         </div>
@@ -34,7 +34,7 @@
 
       {% if invite_pending or invite_expired -%}
         {% set resend_invite_modal = "resend_invite-{}".format(member.role_id) %}
-        {% call Modal(resend_invite_modal, classes="form-content--app-mem") %}
+        {% call Modal(resend_invite_modal, classes="form-content--member-form") %}
           <div class="modal__form--header">
             <h1>{{ "portfolios.applications.members.new.verify" | translate }}</h1>
           </div>
@@ -182,6 +182,7 @@
           modal=new_manager_modal,
         )
       ],
+      classes="form-content--member-form",
     ) }}
   {% endif %}
 </div>

templates/portfolios/new/step_1.html

@@ -19,24 +19,25 @@
   {{ StickyCTA(text="portfolios.new.cta_step_1"|translate, context=("portfolios.new.sticky_header_context"|translate({"step": "1"}) )) }}
   <base-form inline-template>
     <div class="row">
-      <form id="portfolio-create" class="col form" action="{{ url_for('portfolios.create_portfolio') }}" method="POST">
+      <form id="portfolio-create" class="col form-container" action="{{ url_for('portfolios.create_portfolio') }}" method="POST">
         {{ form.csrf_token }}
-        <div class="form-row form-row--bordered">
+        <div class="form-row">
           <div class="form-col">
             {{ TextInput(form.name, validation="portfolioName", optional=False, classes="form-col") }}
             {{"forms.portfolio.name.help_text" | translate | safe }}
           </div>
         </div>
-        <div class="form-row form-row--bordered">
+        <hr>
+        <div class="form-row">
           <div class="form-col">
             {{ TextInput(form.description, validation="defaultTextAreaField", paragraph=True) }}
             {{"forms.portfolio.description.help_text" | translate | safe }}
           </div>
         </div>
+        <hr>
         <div class="form-row">
           <div class="form-col">
             {{ MultiCheckboxInput(form.defense_component, optional=False) }}
-            {{ "forms.portfolio.defense_component.help_text" | translate | safe }}
           </div>
         </div>
         <div

templates/task_orders/builder_base.html

@@ -28,7 +28,7 @@
 
       {% include "fragments/flash.html" %}
 
-      <div class="task-order form">
+      <div class="task-order form-container">
         {% block to_builder_form_field %}{% endblock %}
       </div>
       <div

translations.yaml

@@ -271,7 +271,7 @@ forms:
       label: Portfolio Name
       length_validation_message: Portfolio names can be between 4-100 characters
       help_text: |
-        <div>
+        <div class="usa-input__help">
           <p>
             Naming can be difficult. Choose a name that is descriptive enough for users to identify the Portfolio. You may consider naming based on your organization.
           </p>
@@ -285,7 +285,7 @@ forms:
     description:
       label: Portfolio Description
       help_text: |
-        <div>
+        <div class="usa-input__help">
           <p>
             Add a brief one to two sentence description of your Portfolio. Consider this your statement of work.
           </p>
@@ -310,11 +310,9 @@ forms:
       title: Select DoD component(s) funding your Portfolio
       validation_message: You must select at least one defense component.
       help_text: |
-        <p>
           Select the DOD component(s) that will fund all Applications within this Portfolio.
           In JEDI, multiple DoD organizations can fund the same Portfolio.<br/>
-          Select all that apply.<br/>
+          Select all that apply.
-        </p>
   attachment:
     object_name:
       length_error: Object name may be no longer than 40 characters.