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": TelField(
"Phone Number", "Phone Number",
description="Enter your 10-digit U.S. phone number",
validators=[PhoneNumber()], validators=[PhoneNumber()],
), ),
"phone_ext": StringField("Extension"), "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> </div>
<div class='form-row'> {{ TextInput(form.email, validation='email') }}
<div class='form-col form-col--half'>
{{ TextInput(form.email, validation='email') }}
</div>
<div class='form-col form-col--third'> <div class='phone-input'>
{{ TextInput(form.phone_number, validation='usPhone') }} <div class='phone-input__phone'>
</div> {{ TextInput(form.phone_number, validation='usPhone') }}
<div class='form-col form-col--sixth'> </div>
{{ TextInput(form.phone_ext)}} <div class='phone-input__extension'>
</div> {{ TextInput(form.phone_ext)}}
</div>
</div> </div>
{{ OptionsInput(form.service_branch) }} {{ OptionsInput(form.service_branch) }}