diff --git a/styles/atat.scss b/styles/atat.scss index 4c8aa263..0134dd89 100644 --- a/styles/atat.scss +++ b/styles/atat.scss @@ -38,6 +38,7 @@ @import "components/dod_login_notice.scss"; @import "components/sticky_cta.scss"; @import "components/error_page.scss"; +@import "components/member_form.scss"; @import "sections/login"; @import "sections/home"; diff --git a/styles/components/_member_form.scss b/styles/components/_member_form.scss new file mode 100644 index 00000000..c734cfd1 --- /dev/null +++ b/styles/components/_member_form.scss @@ -0,0 +1,55 @@ +.member-form { + text-align: left; + min-width: 75rem; + + input[type="checkbox"] + label::before { + 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; + + &.checked { + border: 1px solid $color-blue; + } + + label { + font-weight: $font-bold; + } + + p.usa-input__help { + margin-bottom: 0; + padding-left: 3rem; + } + } + + .user-info { + .usa-input { + width: 45rem; + + input, + label, + .usa-input__message { + max-width: unset; + } + + label .icon-validation { + left: unset; + right: -$gap * 4; + } + + &--validation--phoneExt { + width: 18rem; + } + } + } +} diff --git a/styles/sections/_application_edit.scss b/styles/sections/_application_edit.scss index 8ff79b7b..8282cb64 100644 --- a/styles/sections/_application_edit.scss +++ b/styles/sections/_application_edit.scss @@ -23,66 +23,6 @@ } } -#modal--add-app-mem, -.form-content--app-mem { - text-align: left; - - .modal__body { - min-width: 75rem; - } - - input[type="checkbox"] + label::before { - 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; - - &.checked { - border: 1px solid $color-blue; - } - - label { - font-weight: $font-bold; - } - - p.usa-input__help { - margin-bottom: 0; - padding-left: 3rem; - } - } - - .application-member__user-info { - .usa-input { - width: 45rem; - - input, - label, - .usa-input__message { - max-width: unset; - } - - label .icon-validation { - left: unset; - right: -$gap * 4; - } - - &--validation--phoneExt { - width: 18rem; - } - } - } -} - .environment-roles { padding: 0 ($gap * 3) ($gap * 3); diff --git a/templates/applications/fragments/member_form_fields.html b/templates/applications/fragments/member_form_fields.html index 3aa97687..707653fa 100644 --- a/templates/applications/fragments/member_form_fields.html +++ b/templates/applications/fragments/member_form_fields.html @@ -118,7 +118,7 @@ {% endmacro %} {% macro InfoFields(member_form) %} -
+
{{ TextInput(member_form.first_name, validation='requiredField', optional=False) }} {{ TextInput(member_form.last_name, validation='requiredField', optional=False) }} {{ TextInput(member_form.email, validation='email', optional=False) }} diff --git a/templates/applications/fragments/members.html b/templates/applications/fragments/members.html index c82daa60..9b1cbf4b 100644 --- a/templates/applications/fragments/members.html +++ b/templates/applications/fragments/members.html @@ -1,6 +1,6 @@ {% from "components/icon.html" import Icon %} {% from "components/label.html" import Label %} -{% import "components/member_form_template.html" as member_form %} +{% import "components/member_form.html" as member_form %} {% import "applications/fragments/member_form_fields.html" as member_fields %} {% from "components/modal.html" import Modal %} {% from "components/multi_step_modal_form.html" import MultiStepModalForm %} diff --git a/templates/components/member_form_template.html b/templates/components/member_form.html similarity index 71% rename from templates/components/member_form_template.html rename to templates/components/member_form.html index f62f90c1..14766b6d 100644 --- a/templates/components/member_form_template.html +++ b/templates/components/member_form.html @@ -1,11 +1,11 @@ -{% from "components/icon.html" import Icon %} - -{% macro MemberFormTemplate(title=None, next_button=None, previous=True, modal=modal) %} -
- {% if title %}

{{ title }}

{% endif %} - - {{ caller() }} + +{% macro MemberForm(title=None, next_button=None, previous=True, modal=modal) %} +
+
+ {% if title %}

{{ title }}

{% endif %} + {{ caller() }} +
{{ next_button }} {% if previous %} @@ -19,6 +19,8 @@
{% endmacro %} + + {% macro BasicStep( title=None, form=form, @@ -35,7 +37,7 @@ value='{{ next_button_text }}'> {% endset %} - {% call MemberFormTemplate(title=title, next_button=next_button, previous=previous, modal=modal) %} + {% call MemberForm(title=title, next_button=next_button, previous=previous, modal=modal) %} {{ form }} {% endcall %} {% endmacro %} @@ -57,7 +59,7 @@ value='{{ submit_text }}'> {% endset %} - {% call MemberFormTemplate(title=title, next_button=next_button, previous=previous, modal=modal) %} + {% call MemberForm(title=title, next_button=next_button, previous=previous, modal=modal) %} {{ form }} {% endcall %} {% endmacro %} diff --git a/templates/portfolios/fragments/add_new_portfolio_member.html b/templates/portfolios/fragments/add_new_portfolio_member.html index ced2ef6c..83863636 100644 --- a/templates/portfolios/fragments/add_new_portfolio_member.html +++ b/templates/portfolios/fragments/add_new_portfolio_member.html @@ -9,7 +9,7 @@ {{ Icon('info') }} {{ "portfolios.admin.permissions_info" | translate }} -
+
{% if new %} {% set app_mgmt = form.perms_app_mgmt.name %} {% set funding = form.perms_funding.name %} @@ -30,7 +30,7 @@ {% endmacro %} {% macro InfoFields(member_form) %} -