pk/atst
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix inputs in member modal forms

Browse Source
This commit is contained in:
leigh-mil 2020-02-17 11:49:32 -05:00
parent 2665094136
commit c5e31975e2
5 changed files with 16 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
styles/components/_member_form.scss
View File

@ -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,
#modal--add-portfolio-manager {
.form-content--member-form {
.modal__body {
min-width: 75rem;
}

11
styles/elements/_inputs.scss
View File

@ -371,19 +371,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;
}
@ -391,7 +387,8 @@ select {
}
&__extension {
margin-left: $gap * 4;
margin-right: $gap * 4;
flex-grow: 0;
.usa-input {
margin: 0;

5
templates/applications/fragments/members.html
View File

@ -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>

4
templates/components/multi_step_modal_form.html
View File

@ -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 }}'">

5
templates/portfolios/fragments/portfolio_members.html
View File

@ -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>