darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-09-02 17:48:50 -04:00
Code Issues Packages Projects Releases Wiki Activity

Add some letter spacing to two factor textbox

Browse Source 
Entering, or reading back sequences of digits is easier when they’re a
bit more spaced out.

This is because we read words as shapes, but read numbers
digit-by-digit.

So this commit adjusts the tracking of the type to put a bit more space
in for textboxes that are going to accept digits.
This commit is contained in:
Chris Hill-Scott
2017-10-16 16:51:44 +01:00
parent 7809a70cf3
commit 57069e427d
5 changed files with 13 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
app/assets/stylesheets/components/textbox.scss
View File

@@ -54,3 +54,8 @@
.textbox-right-aligned { .textbox-right-aligned {
text-align: right; text-align: right;
} }
.extra-tracking .form-control {
padding-left: 5px;
letter-spacing: 0.04em;
}

4
app/templates/views/register-from-invite.html
View File

@@ -14,7 +14,9 @@ Create an account
<p>Your account will be created with this email: {{email_address}}</p> <p>Your account will be created with this email: {{email_address}}</p>
<form method="post" autocomplete="off"> <form method="post" autocomplete="off">
{{ textbox(form.name, width='3-4') }} {{ textbox(form.name, width='3-4') }}
{{ textbox(form.mobile_number, width='3-4', hint='We’ll send you a security code by text message') }} <div class="extra-tracking">
{{ textbox(form.mobile_number, width='3-4', hint='We’ll send you a security code by text message') }}
</div>
{{ textbox(form.password, hint="At least 8 characters", width='3-4') }} {{ textbox(form.password, hint="At least 8 characters", width='3-4') }}
{{ page_footer("Continue") }} {{ page_footer("Continue") }}
{{form.service}} {{form.service}}

4
app/templates/views/register.html
View File

@@ -14,7 +14,9 @@ Create an account
<form method="post" novalidate> <form method="post" novalidate>
{{ textbox(form.name, width='3-4') }} {{ textbox(form.name, width='3-4') }}
{{ textbox(form.email_address, hint="Must be from a government organisation", width='3-4', safe_error_message=True) }} {{ textbox(form.email_address, hint="Must be from a government organisation", width='3-4', safe_error_message=True) }}
{{ textbox(form.mobile_number, width='3-4', hint='We’ll send you a security code by text message') }} <div class="extra-tracking">
{{ textbox(form.mobile_number, width='3-4', hint='We’ll send you a security code by text message') }}
</div>
<input class="visually-hidden" aria-hidden="true" tabindex="-1" id="defeat-chrome-autocomplete"> <input class="visually-hidden" aria-hidden="true" tabindex="-1" id="defeat-chrome-autocomplete">
{{ textbox(form.password, hint="At least 8 characters", width='3-4') }} {{ textbox(form.password, hint="At least 8 characters", width='3-4') }}
{{ page_footer("Continue") }} {{ page_footer("Continue") }}

2
app/templates/views/send-test.html
View File

@@ -16,7 +16,7 @@
<form method="post" class="js-stick-at-top-when-scrolling" data-module="autofocus" autocomplete="off"> <form method="post" class="js-stick-at-top-when-scrolling" data-module="autofocus" autocomplete="off">
<div class="grid-row"> <div class="grid-row">
<div class="column-two-thirds"> <div class="column-two-thirds {% if form.placeholder_value.label.text == 'phone number' %}extra-tracking{% endif %}">
{{ textbox( {{ textbox(
form.placeholder_value, form.placeholder_value,
hint='Optional' if optional_placeholder else None, hint='Optional' if optional_placeholder else None,

2
app/templates/views/two-factor.html
View File

@@ -15,7 +15,7 @@
<p>We’ve sent you a text message with a security code.</p> <p>We’ve sent you a text message with a security code.</p>
<form autocomplete="off" method="post"> <form autocomplete="off" method="post" class="extra-tracking">
{{ textbox( {{ textbox(
form.sms_code, form.sms_code,
width='5em', width='5em',