summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorAlex Pott2014-07-28 21:11:44 (GMT)
committerAlex Pott2014-07-28 21:11:44 (GMT)
commit615f5644cfbd0635d5f72587ed30673114ee0ea0 (patch)
treef1185f84740e6a53b74567a01bfbdb36df2c5b44
parent80152b7d69d5e3eb9ca34646f0227ac956dc8152 (diff)
Issue #2247049 by sqndr, herom, LewisNyman: Redesign password strength indicator so it's less fragile.
-rw-r--r--core/modules/user/css/user.module.css72
-rw-r--r--core/modules/user/user.js6
-rw-r--r--core/themes/bartik/css/style.css37
-rw-r--r--core/themes/seven/css/style.css8
4 files changed, 23 insertions, 100 deletions
diff --git a/core/modules/user/css/user.module.css b/core/modules/user/css/user.module.css
index 4a566c6..892a8b4 100644
--- a/core/modules/user/css/user.module.css
+++ b/core/modules/user/css/user.module.css
@@ -20,50 +20,27 @@
/**
* Password strength indicator.
*/
-.password-strength {
- width: 13em;
- float: right; /* LTR */
-}
-[dir="rtl"] .password-strength {
- float: left;
-}
-.password-strength-title {
+.password-strength__title,
+.password-strength__text {
display: inline;
}
-.password-strength-text {
- float: right; /* LTR */
- font-weight: bold;
-}
-[dir="rtl"] .password-strength-text {
- float: left;
-}
-.password-indicator {
+.password-strength__meter {
background-color: #c4c4c4;
- height: 0.3em;
- width: 100%;
+ height: 0.5em;
}
-.password-indicator div {
+.password-strength__indicator {
height: 100%;
width: 0%;
background-color: #47c965;
}
input.password-confirm,
-input.password-field {
- width: 13.7em;
- margin-bottom: 0.4em;
- float: left; /* LTR */
+input.password-field,
+.password-strength {
+ width: 40%;
}
div.password-confirm {
- float: right; /* LTR */
visibility: hidden;
- width: 13em;
-}
-[dir="rtl"] input.password-confirm,
-[dir="rtl"] input.password-field {
- float: right;
-}
-[dir="rtl"] div.password-confirm {
- float: left;
+ width: 40%;
}
div.form-item div.password-suggestions {
padding: 0.2em 0.5em;
@@ -86,34 +63,3 @@ div.password-suggestions ul {
clear: right;
}
-/**
- * Password strength indicator on narrow viewport.
- */
-@media screen and (max-width: 600px) {
- .password-strength,
- div.password-confirm {
- float: none;
- width: auto;
- max-width: 100%;
- }
- .password-indicator {
- margin-bottom: 0.4em;
- }
- input.password-confirm,
- input.password-field {
- margin-bottom: 0;
- width: 100%;
- max-width: none;
- }
- div.form-item div.password-suggestions {
- width: auto;
- max-width: 100%;
- }
- .confirm-parent,
- .password-parent {
- clear: none;
- width: 100%;
- max-width: none;
- overflow: hidden;
- }
-}
diff --git a/core/modules/user/user.js b/core/modules/user/user.js
index bccbfa1..82d165c 100644
--- a/core/modules/user/user.js
+++ b/core/modules/user/user.js
@@ -25,7 +25,7 @@
// If the password strength indicator is enabled, add its markup.
if (settings.password.showStrengthIndicator) {
- var passwordMeter = '<div class="password-strength"><div class="password-strength-text" aria-live="assertive"></div><div class="password-strength-title">' + translate.strengthTitle + '</div><div class="password-indicator"><div class="indicator"></div></div></div>';
+ var passwordMeter = '<div class="password-strength"><div class="password-strength__meter"><div class="password-strength__indicator"></div></div><div class="password-strength__title">' + translate.strengthTitle + ' </div><div class="password-strength__text" aria-live="assertive"></div></div>';
confirmInput.parent().after('<div class="password-suggestions description"></div>');
innerWrapper.append(passwordMeter);
var passwordDescription = outerWrapper.find('div.password-suggestions').hide();
@@ -56,12 +56,12 @@
passwordDescription.toggle(result.strength !== 100);
// Adjust the length of the strength indicator.
- innerWrapper.find('.indicator')
+ innerWrapper.find('.password-strength__indicator')
.css('width', result.strength + '%')
.css('background-color', result.indicatorColor);
// Update the strength indication text.
- innerWrapper.find('.password-strength-text').html(result.indicatorText);
+ innerWrapper.find('.password-strength__text').html(result.indicatorText);
}
// Check the value in the confirm input and show results.
diff --git a/core/themes/bartik/css/style.css b/core/themes/bartik/css/style.css
index 3586964..27799bc 100644
--- a/core/themes/bartik/css/style.css
+++ b/core/themes/bartik/css/style.css
@@ -307,7 +307,7 @@ ul.menu li {
}
[dir="rtl"] .region-content ul,
[dir="rtl"] .region-content ol {
- padding: 2.5em 0 0.25em 0;
+ padding: 0 15px 0.25em 0;
}
.item-list ul li {
margin: 0;
@@ -1303,39 +1303,10 @@ div.messages {
float: none;
}
-/* -------------- Password Meter ------------- */
+/* -------------- Password Field ------------- */
-[dir="rtl"] #password-strength {
- left: auto;
- margin-top: 2em;
- right: 16em;
-}
-[dir="rtl"] .form-item-pass-pass2 label {
- clear: right;
-}
-.confirm-parent,
-.password-parent {
- width: 34em;
-}
-.password-parent,
-div.form-item div.password-suggestions {
- position: relative;
-}
-.password-strength-text,
-.password-strength-title,
-div.password-confirm {
- font-size: 0.82em;
-}
-.password-strength-text {
- margin-top: 0.2em;
-}
-[dir="rtl"] #password-strength-text {
- margin-top: 0;
- float: left;
-}
-div.password-confirm {
- margin-top: 2.2em;
- width: 20.73em;
+.password-field {
+ margin: 0;
}
/* ---------------- Buttons ---------------- */
diff --git a/core/themes/seven/css/style.css b/core/themes/seven/css/style.css
index 36b12c8..c911eee 100644
--- a/core/themes/seven/css/style.css
+++ b/core/themes/seven/css/style.css
@@ -876,10 +876,13 @@ select.form-select {
}
.form-item .password-suggestions {
- float: left;
+ float: left; /* LTR */
clear: left;
width: 100%;
}
+[dir="rtl"] .form-item .password-suggestions {
+ float: right;
+}
.form-item-pass .description {
clear: both;
}
@@ -945,6 +948,9 @@ select.form-select {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
+ .password-strength {
+ width: 100%;
+ }
div.form-item div.password-suggestions {
float: none;
}