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

Create class to style phone numbers and extensions

Browse Source
This commit is contained in:
leigh-mil 2018-10-31 11:24:32 -04:00
parent 6bc157b2b3
commit 8b9fe61a94
3 changed files with 41 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
atst/forms/edit_user.py
View File

@ -22,7 +22,6 @@ USER_FIELDS = {
),
"phone_number": TelField(
"Phone Number",
description="Enter your 10-digit U.S. phone number",
validators=[PhoneNumber()],
),
"phone_ext": StringField("Extension"),

33
styles/elements/_inputs.scss
View File

@ -314,3 +314,36 @@ select {
}
}
.phone-input {
display: flex;
flex-direction: row;
.phone-input__phone {
margin-right: ($gap * 4);
.usa-input {
input, label, .usa-input__message {
max-width: 20rem;
}
.icon-validation {
left: 20rem;
}
}
}
.phone-input__extension {
margin-left: ($gap * 4);
.usa-input {
input, label {
max-width: 8rem;
}
.icon-validation {
left: 5em;
}
}
}
}

18
templates/fragments/edit_user_form.html
View File

@ -16,17 +16,15 @@
</div>
</div>
<div class='form-row'>
<div class='form-col form-col--half'>
{{ TextInput(form.email, validation='email') }}
</div>
{{ TextInput(form.email, validation='email') }}
<div class='form-col form-col--third'>
{{ TextInput(form.phone_number, validation='usPhone') }}
</div>
<div class='form-col form-col--sixth'>
{{ TextInput(form.phone_ext)}}
</div>
<div class='phone-input'>
<div class='phone-input__phone'>
{{ TextInput(form.phone_number, validation='usPhone') }}
</div>
<div class='phone-input__extension'>
{{ TextInput(form.phone_ext)}}
</div>
</div>
{{ OptionsInput(form.service_branch) }}