Andal.LND/edx-platform
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

lms - revised classes and styling mechanics for login/register forms and added necessary screen-reader mixin for other visually hidden text in those pages

Browse Source
This commit is contained in:
Brian Talbot
2013-02-20 09:15:27 -05:00
parent 2a6fde9db2
commit f2abc3c3e5
5 changed files with 44 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
lms/static/sass/base/_base.scss
View File

@@ -204,5 +204,6 @@ mark {
}
}
.sr {
@include text-sr();
}

19
lms/static/sass/base/_mixins.scss
View File

@@ -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 ) {

15
lms/static/sass/multicourse/_account.scss
View File

@@ -13,14 +13,15 @@
// js-enabled
.js {
// utility
.is-shown {
display: block;
}
#register-form, #login-form {
// hidden
.is-hidden {
display: none;
.status.message {
display: none;
&.is-shown {
display: block;
}
}
}
}

14
lms/templates/login.html
View File

@@ -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'):

20
lms/templates/register.html
View File

@@ -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">