Skip to content

E
edx-platform
Commit 7c7d0da5 by Brian Talbot Committed by John Jarvis
Options

drupal integration - styled page layout, form fields and states, added in status… 

drupal integration - styled page layout, form fields and states, added in status message areas/standards and revised Sass
parent 6bff4170
Showing with 117 additions and 82 deletions
lms/static/sass/application.scss
......@@ -16,10 +16,9 @@
@import 'shared/course_filter';
@import 'shared/modal';
@import 'shared/activation_messages';
@import 'multicourse/home';
@import 'multicourse/dashboard';
@import 'multicourse/testcenter-register';
@import 'multicourse/account';
@import 'multicourse/courses';
@import 'multicourse/course_about';
@import 'multicourse/jobs';
......@@ -29,8 +28,7 @@
@import 'multicourse/password_reset';
@import 'multicourse/error-pages';
@import 'multicourse/help';
@import 'multicourse/login';
@import 'multicourse/register';
@import 'multicourse/testcenter-register';
@import 'discussion';
@import 'news';
lms/static/sass/base/_variables.scss
......@@ -12,6 +12,8 @@ $sans-serif: 'Open Sans', $verdana;
$monospace: Monaco, 'Bitstream Vera Sans Mono', 'Lucida Console', monospace;
$serif: $georgia;
$white: rgb(255,255,255);
$black: rgb(0,0,0);
$blue: rgb(29,157,217);
$pink: rgb(182,37,104);
$yellow: rgb(255, 252, 221);
......@@ -23,6 +25,13 @@ $border-color: rgb(200, 200, 200);
$sidebar-color: rgb(246, 246, 246);
$outer-border-color: rgb(170, 170, 170);
// edx.org-related
$m-gray-l: rgb(247, 247, 247);
$m-gray: rgb(67,67,67);
$m-blue: rgb(2,159,211);
$m-base-font-size: em(16);
$base-font-color: rgb(60,60,60);
$lighter-base-font-color: rgb(100,100,100);
$text-color: $dark-gray;
......
lms/static/sass/multicourse/_testcenter-register.scss
// Pearson VUE Test Center Registration
// =====
.testcenter-register {
@include clearfix;
padding: 60px 0px 120px;
......
lms/templates/login.html
......@@ -7,8 +7,10 @@
<script type="text/javascript">
$(function() {
var view_name = 'view-login';
// adding js class for styling with accessibility in mind
$('body').addClass('js');
$('body').addClass('js').addClass(view_name);
// new window/tab opening
$('a[rel="external"], a[class="new-vp"]')
......@@ -19,9 +21,9 @@
// form field label styling on focus
$("form :input").focus(function() {
$("label[for='" + this.id + "']").addClass("is-focused");
$("label[for='" + this.id + "']").parent().addClass("is-focused");
}).blur(function() {
$("label").removeClass("is-focused");
$("label").parent().removeClass("is-focused");
});
});
......@@ -31,7 +33,10 @@
<section class="login container">
<section class="introduction">
<header>
<h1>Log Into Your edX Account</h1>
<h1>Log Into Your Account</h1>
<span class="wrapper wrapper-action">
<a class="action action-register" href="#">Not enrolled? Sign up</a>
</span>
</header>
</section>
......@@ -43,14 +48,16 @@
<form role="form" id="login-form" method="post" data-remote="true" action="/login">
<!-- status messages -->
<div role="alert" class="status message submission-error">
<h3 class="message-title"></h3>
<p class="message-copy"></p>
<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 system-error">
<h3 class="message-title"></h3>
<p class="message-copy"></p>
<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">
......@@ -61,11 +68,11 @@
<legend class="is-hidden">Required Information</legend>
<ol class="list-input">
<li class="field required" id="field-email">
<li class="field required text" id="field-email">
<label for="email">E-mail</label>
<input class="" id="email" type="email" name="email" value="" placeholder="eg. example@edx.org" />
</li>
<li class="field required" id="field-password">
<li class="field required password" id="field-password">
<label for="password">Password</label>
<input id="password" type="password" name="password" value="" placeholder="*****" />
<span class="tip tip-input"><a href="#" class="action action-forgotpw">Forgot password?</a></span>
......@@ -77,7 +84,7 @@
<legend class="is-hidden">Account Preferences</legend>
<ol class="list-input">
<li class="field required" id="field-remember">
<li class="field required checkbox" id="field-remember">
<input id="remember-yes" type="checkbox" name="remember" value="true" />
<label for="remember-yes">Remember me</label>
</li>
......@@ -87,7 +94,9 @@
<div class="form-actions">
<button name="submit" type="submit" id="submit" class="action action-primary action-update">Access My Courses</button>
% if has_extauth_info is UNDEFINED:
<a href="#" class="action action-secondary action-register">Not enrolled? Register</a>
<span class="wrapper wrapper-action action-secondary">
<a href="#" class="action action-register">Not enrolled? Register</a>
</span>
% endif
</div>
</form>
......@@ -106,12 +115,6 @@
</div>
% endif
<div class="cta cta-register">
<h3>Not Enrolled at edX?</h3>
<p>Becoming an edX student is easy. Register quickly and start learning!</p>
<a class="action action-register" href="#">Register with edX</a>
</div>
<div class="cta cta-forgotpw">
<h3>Forgot Your edX Password</h3>
<p><a href="#" class="action action-forgotpw">Request help with resetting your password</a></p>
......
lms/templates/register.html
......@@ -13,8 +13,10 @@
<script type="text/javascript">
$(function() {
var view_name = 'view-register';
// adding js class for styling with accessibility in mind
$('body').addClass('js');
$('body').addClass('js').addClass(view_name);
// new window/tab opening
$('a[rel="external"], a[class="new-vp"]')
......@@ -25,9 +27,9 @@
// form field label styling on focus
$("form :input").focus(function() {
$("label[for='" + this.id + "']").addClass("is-focused");
$("label[for='" + this.id + "']").parent().addClass("is-focused");
}).blur(function() {
$("label").removeClass("is-focused");
$("label").parent().removeClass("is-focused");
});
});
......@@ -38,6 +40,9 @@
<section class="introduction">
<header>
<h1>Register for edX</h1>
<span class="wrapper wrapper-action">
<a class="action action-login" href="${reverse('login')}">Already have an account? Login</a>
</span>
</header>
</section>
......@@ -49,18 +54,33 @@
<form role="form" id="register-form" method="post" data-remote="true" action="/create_account">
<!-- status messages -->
<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">
<h3 class="message-title"></h3>
<p class="message-copy"></p>
<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>
<li>You must accept the terms of service.</li>
<li>Your username must be a minimum of 2 characters long (e.g. "edx").</li>
</ul>
</div>
<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">
<h3 class="message-title"></h3>
<p class="message-copy"></p>
<h3 class="message-title">We're sorry, our systems seem to be having trouble processing your registration now.</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>
<p class="instructions">
Please complete the following fields to register for an edX account. Required fields are noted by <strong class="indicator">bold text and an asterisk (*)</strong>.
Please complete the following fields to register for an edX account. <br />
Required fields are noted by <strong class="indicator">bold text and an asterisk (*)</strong>.
</p>
<fieldset class="group group-form group-form-requiredinformation">
......@@ -69,20 +89,20 @@
% if has_extauth_info is UNDEFINED:
<ol class="list-input">
<li class="field required" id="field-email">
<li class="field required text" id="field-email">
<label for="email">E-mail</label>
<input class="" id="email" type="email" name="email" value="" placeholder="eg. example@edx.org" />
</li>
<li class="field required" id="field-password">
<li class="field required password" id="field-password">
<label for="password">Password</label>
<input id="password" type="password" name="password" value="" placeholder="*****" />
</li>
<li class="field required" id="field-username">
<li class="field required text" id="field-username">
<label for="username">Public Username</label>
<input id="username" type="text" name="username" value="" placeholder="e.g. JaneDoe314159" />
<span class="tip tip-input">Will be shown in any discussions or forums you participate in</span>
</li>
<li class="field required" id="field-name">
<li class="field required text" id="field-name">
<label for="name">Full Name</label>
<input id="name" type="text" name="name" value="" placeholder="e.g. Jane Doe" />
<span class="tip tip-input">Needed for any certificates you earn</span>
......@@ -97,7 +117,7 @@
</div>
<ol class="list-input">
<li class="field required" id="field-username">
<li class="field required text" id="field-username">
<label for="username">Public Username</label>
<input id="username" type="text" name="username" value="${extauth_username}" placeholder="e.g. JaneDoe314159" />
<span class="tip tip-input">Will be shown in any discussions or forums you participate in</span>
......@@ -111,34 +131,36 @@
<legend class="is-hidden">Optional Personal Information</legend>
<ol class="list-input">
<li class="field" id="field-education-level">
<label for="education-level">Highest Level of Education Completed</label>
<select id="education-level" name="level_of_education">
<option value="">--</option>
%for code, ed_level in UserProfile.LEVEL_OF_EDUCATION_CHOICES:
<option value="${code}">${ed_level}</option>
%endfor
</select>
</li>
<li class="field" id="field-gender">
<label for="gender">Highest Level of Education Completed</label>
<select id="gender" name="gender">
<option value="">--</option>
%for code, gender in UserProfile.GENDER_CHOICES:
<option value="${code}">${gender}</option>
%endfor
</select>
</li>
<li class="field" id="field-yob">
<label for="yob">Year of Birth</label>
<select id="yob" name="year_of_birth">
<option value="">--</option>
%for year in UserProfile.VALID_YEARS:
<option value="${year}">${year}</option>
%endfor
</select>
<li class="field-group">
<div class="field select" id="field-education-level">
<label for="education-level">Highest Level of Education Completed</label>
<select id="education-level" name="level_of_education">
<option value="">--</option>
%for code, ed_level in UserProfile.LEVEL_OF_EDUCATION_CHOICES:
<option value="${code}">${ed_level}</option>
%endfor
</select>
</div>
<div class="field select" id="field-gender">
<label for="gender">Gender</label>
<select id="gender" name="gender">
<option value="">--</option>
%for code, gender in UserProfile.GENDER_CHOICES:
<option value="${code}">${gender}</option>
%endfor
</select>
</div>
<div class="field select" id="field-yob">
<label for="yob">Year of Birth</label>
<select id="yob" name="year_of_birth">
<option value="">--</option>
%for year in UserProfile.VALID_YEARS:
<option value="${year}">${year}</option>
%endfor
</select>
</div>
</li>
</ol>
</fieldset>
......@@ -147,12 +169,12 @@
<legend class="is-hidden">Optional Personal Information</legend>
<ol class="list-input">
<li class="field" id="field-address-mailing">
<li class="field text" id="field-address-mailing">
<label for="address-mailing">Mailing Address</label>
<textarea id="address-mailing" name="mailing_address" value=""></textarea>
</li>
<li class="field" id="field-goals">
<li class="field text" id="field-goals">
<label for="goals">Do you have any goals in signing up for edX?</label>
<textarea id="goals" name="goals" value=""></textarea>
</li>
......@@ -163,14 +185,16 @@
<legend class="is-hidden">Account Acknowledgements</legend>
<ol class="list-input">
<li class="field required" id="field-tos">
<input id="tos-yes" type="checkbox" name="terms_of_service" value="true" />
<label for="tos-yes">I agree to the <a href="${reverse('tos')}" class="new-vp">Terms of Service</a></label>
</li>
<li class="field required" id="field-honorcode">
<input id="honorcode-yes" type="checkbox" name="honor_code" value="true" />
<label for="honorcode-yes">I agree to the <a href="${reverse('honor')}" class="new-vp">Honor Code</a></label>
<li class="field-group">
<div class="field required checkbox" id="field-tos">
<input id="tos-yes" type="checkbox" name="terms_of_service" value="true" />
<label for="tos-yes">I agree to the <a href="${reverse('tos')}" class="new-vp">Terms of Service</a></label>
</div>
<div class="field required checkbox" id="field-honorcode">
<input id="honorcode-yes" type="checkbox" name="honor_code" value="true" />
<label for="honorcode-yes">I agree to the <a href="${reverse('honor')}" class="new-vp">Honor Code</a></label>
</div>
</li>
</ol>
</fieldset>
......@@ -178,7 +202,9 @@
<div class="form-actions">
<button name="submit" type="submit" id="submit" class="action action-primary action-update">Register &amp; Create My Account</button>
% if has_extauth_info is UNDEFINED:
<a href="${reverse('login')}" class="action action-secondary action-login">Already have an account? Login.</a>
<span class="wrapper wrapper-action action-secondary">
<a href="${reverse('login')}" class="action action-login">Already have an account? Login</a>
</span>
% endif
</div>
</form>
......@@ -189,14 +215,9 @@
<h3 class="is-hidden">Registration Help</h3>
</header>
<div class="cta cta-login">
<h3>Already Have an Account?</h3>
<p><a class="action action-login" href="${reverse('login')}">Log into your edX account</a> and continue with your classes</p>
</div>
<div class="cta cta-help">
<h3>Need Help?</h3>
<p>Looking for help in registering with edX? <a href="#">View our help section for contact information and answers to commonly asked questions</a></p>
<p>Looking for help in registering with edX? View our <a href="#">help section for contact information and answers to commonly asked questions</a></p>
</div>
</aside>
</section>
\ No newline at end of file
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