Skip to content

E
edx-platform
Commit f2abc3c3 by Brian Talbot
Options

lms - revised classes and styling mechanics for login/register forms and added… 

lms - revised classes and styling mechanics for login/register forms and added necessary screen-reader mixin for other visually hidden text in those pages
parent 2a6fde9d
Showing with 45 additions and 29 deletions
lms/static/sass/base/_base.scss
......@@ -204,5 +204,6 @@ mark {
}
}
.sr {
@include text-sr();
}
\ No newline at end of file
lms/static/sass/base/_mixins.scss
......@@ -7,10 +7,23 @@
@return $body-line-height * $amount;
}
@mixin hide-text(){
text-indent: -9999px;
// image-replacement hidden text
@mixin text-hide() {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
display: block;
}
// hidden elems - screenreaders
@mixin text-sr() {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
@mixin vertically-and-horizontally-centered ( $height, $width ) {
......
lms/static/sass/multicourse/_account.scss
......@@ -13,14 +13,15 @@
// js-enabled
.js {
// utility
.is-shown {
display: block;
}
#register-form, #login-form {
.status.message {
display: none;
// hidden
.is-hidden {
display: none;
&.is-shown {
display: block;
}
}
}
}
......
lms/templates/login.html
......@@ -61,30 +61,30 @@
<section role="main" class="content">
<header>
<h2 class="is-hidden">Login Form</h2>
<h2 class="sr">Login Form</h2>
</header>
<form role="form" id="login-form" method="post" data-remote="true" action="/login_ajax">
<!-- status messages -->
<div role="alert" class="status message is-hidden">
<div role="alert" class="status message">
<h3 class="message-title">We're Sorry, edX accounts are unavailable currently</h3>
<p class="message-copy">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
<div role="alert" class="status message submission-error is-hidden">
<div role="alert" class="status message submission-error">
<h3 class="message-title">The following errors occured while logging you in: </h3>
<ul class="message-copy">
<li>Your email or password is incorrect</li>
</ul>
</div>
<p class="instructions is-hidden">
<p class="instructions sr">
Please provide the following information to log into your edX account. Required fields are noted by <strong class="indicator">bold text and an asterisk (*)</strong>.
</p>
<fieldset class="group group-form group-form-requiredinformation">
<legend class="is-hidden">Required Information</legend>
<legend class="sr">Required Information</legend>
<ol class="list-input">
<li class="field required text" id="field-email">
......@@ -102,7 +102,7 @@
</fieldset>
<fieldset class="group group-form group-form-secondary group-form-accountpreferences">
<legend class="is-hidden">Account Preferences</legend>
<legend class="sr">Account Preferences</legend>
<ol class="list-input">
<li class="field required checkbox" id="field-remember">
......@@ -120,7 +120,7 @@
<aside role="complementary">
<header>
<h2 class="is-hidden">Helpful Information</h2>
<h2 class="sr">Helpful Information</h2>
</header>
% if settings.MITX_FEATURES.get('AUTH_USE_OPENID'):
......
lms/templates/register.html
......@@ -48,18 +48,18 @@
<section role="main" class="content">
<header>
<h2 class="is-hidden">Registration Form</h2>
<h2 class="sr">Registration Form</h2>
</header>
<form role="form" id="register-form" method="post" data-remote="true" action="/create_account">
<!-- status messages -->
<div role="alert" class="status message is-hidden">
<div role="alert" class="status message">
<h3 class="message-title">We're sorry, edX enrollment is not available in your region</h3>
<p class="message-copy">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
<div role="alert" class="status message submission-error is-hidden">
<div role="alert" class="status message submission-error">
<h3 class="message-title">The following errors occured while processing your registration: </h3>
<ul class="message-copy">
<li>You must accept the terms of service.</li>
......@@ -68,12 +68,12 @@
</ul>
</div>
<div role="alert" class="status message submission-error is-hidden">
<div role="alert" class="status message submission-error">
<h3 class="message-title">The following errors occured while processing your registration: </h3>
<p class="message-copy">To enroll, you must follow the honor code</p>
</div>
<div role="alert" class="status message system-error is-hidden">
<div role="alert" class="status message system-error">
<h3 class="message-title">We're sorry, our systems seem to be having trouble processing your registration</h3>
<p class="message-copy">Someone has been made aware of this issue. Please try again shortly. Please <a href="">contact us</a> about any concerns you have.</p>
</div>
......@@ -84,7 +84,7 @@
</p>
<fieldset class="group group-form group-form-requiredinformation">
<legend class="is-hidden">Required Information</legend>
<legend class="sr">Required Information</legend>
% if has_extauth_info is UNDEFINED:
......@@ -128,7 +128,7 @@
</fieldset>
<fieldset class="group group-form group-form-secondary group-form-personalinformation">
<legend class="is-hidden">Optional Personal Information</legend>
<legend class="sr">Optional Personal Information</legend>
<ol class="list-input">
<li class="field-group">
......@@ -166,7 +166,7 @@
</fieldset>
<fieldset class="group group-form group-form-personalinformation2">
<legend class="is-hidden">Optional Personal Information</legend>
<legend class="sr">Optional Personal Information</legend>
<ol class="list-input">
<li class="field text" id="field-address-mailing">
......@@ -182,7 +182,7 @@
</fieldset>
<fieldset class="group group-form group-form-accountacknowledgements">
<legend class="is-hidden">Account Acknowledgements</legend>
<legend class="sr">Account Acknowledgements</legend>
<ol class="list-input">
<li class="field-group">
......@@ -207,7 +207,7 @@
<aside role="complementary">
<header>
<h3 class="is-hidden">Registration Help</h3>
<h3 class="sr">Registration Help</h3>
</header>
<div class="cta cta-welcome">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment