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 @@ ...@@ -16,10 +16,9 @@
@import 'shared/course_filter'; @import 'shared/course_filter';
@import 'shared/modal'; @import 'shared/modal';
@import 'shared/activation_messages'; @import 'shared/activation_messages';
@import 'multicourse/home'; @import 'multicourse/home';
@import 'multicourse/dashboard'; @import 'multicourse/dashboard';
@import 'multicourse/testcenter-register'; @import 'multicourse/account';
@import 'multicourse/courses'; @import 'multicourse/courses';
@import 'multicourse/course_about'; @import 'multicourse/course_about';
@import 'multicourse/jobs'; @import 'multicourse/jobs';
...@@ -29,8 +28,7 @@ ...@@ -29,8 +28,7 @@
@import 'multicourse/password_reset'; @import 'multicourse/password_reset';
@import 'multicourse/error-pages'; @import 'multicourse/error-pages';
@import 'multicourse/help'; @import 'multicourse/help';
@import 'multicourse/login'; @import 'multicourse/testcenter-register';
@import 'multicourse/register';
@import 'discussion'; @import 'discussion';
@import 'news'; @import 'news';
lms/static/sass/base/_variables.scss
...@@ -12,6 +12,8 @@ $sans-serif: 'Open Sans', $verdana; ...@@ -12,6 +12,8 @@ $sans-serif: 'Open Sans', $verdana;
$monospace: Monaco, 'Bitstream Vera Sans Mono', 'Lucida Console', monospace; $monospace: Monaco, 'Bitstream Vera Sans Mono', 'Lucida Console', monospace;
$serif: $georgia; $serif: $georgia;
$white: rgb(255,255,255);
$black: rgb(0,0,0);
$blue: rgb(29,157,217); $blue: rgb(29,157,217);
$pink: rgb(182,37,104); $pink: rgb(182,37,104);
$yellow: rgb(255, 252, 221); $yellow: rgb(255, 252, 221);
...@@ -23,6 +25,13 @@ $border-color: rgb(200, 200, 200); ...@@ -23,6 +25,13 @@ $border-color: rgb(200, 200, 200);
$sidebar-color: rgb(246, 246, 246); $sidebar-color: rgb(246, 246, 246);
$outer-border-color: rgb(170, 170, 170); $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); $base-font-color: rgb(60,60,60);
$lighter-base-font-color: rgb(100,100,100); $lighter-base-font-color: rgb(100,100,100);
$text-color: $dark-gray; $text-color: $dark-gray;
......
lms/static/sass/multicourse/_testcenter-register.scss
// Pearson VUE Test Center Registration
// =====
.testcenter-register { .testcenter-register {
@include clearfix; @include clearfix;
padding: 60px 0px 120px; padding: 60px 0px 120px;
......
lms/templates/login.html
...@@ -7,8 +7,10 @@ ...@@ -7,8 +7,10 @@
<script type="text/javascript"> <script type="text/javascript">
$(function() { $(function() {
var view_name = 'view-login';
// adding js class for styling with accessibility in mind // adding js class for styling with accessibility in mind
$('body').addClass('js'); $('body').addClass('js').addClass(view_name);
// new window/tab opening // new window/tab opening
$('a[rel="external"], a[class="new-vp"]') $('a[rel="external"], a[class="new-vp"]')
...@@ -19,9 +21,9 @@ ...@@ -19,9 +21,9 @@
// form field label styling on focus // form field label styling on focus
$("form :input").focus(function() { $("form :input").focus(function() {
$("label[for='" + this.id + "']").addClass("is-focused"); $("label[for='" + this.id + "']").parent().addClass("is-focused");
}).blur(function() { }).blur(function() {
$("label").removeClass("is-focused"); $("label").parent().removeClass("is-focused");
}); });
}); });
...@@ -31,7 +33,10 @@ ...@@ -31,7 +33,10 @@
<section class="login container"> <section class="login container">
<section class="introduction"> <section class="introduction">
<header> <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> </header>
</section> </section>
...@@ -43,14 +48,16 @@ ...@@ -43,14 +48,16 @@
<form role="form" id="login-form" method="post" data-remote="true" action="/login"> <form role="form" id="login-form" method="post" data-remote="true" action="/login">
<!-- status messages --> <!-- status messages -->
<div role="alert" class="status message submission-error"> <div role="alert" class="status message">
<h3 class="message-title"></h3> <h3 class="message-title">We're Sorry, edX accounts are unavailable currently</h3>
<p class="message-copy"></p> <p class="message-copy">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div> </div>
<div role="alert" class="status message system-error"> <div role="alert" class="status message submission-error">
<h3 class="message-title"></h3> <h3 class="message-title">The following errors occured while logging you in: </h3>
<p class="message-copy"></p> <ul class="message-copy">
<li>Your email or password is incorrect</li>
</ul>
</div> </div>
<p class="instructions is-hidden"> <p class="instructions is-hidden">
...@@ -61,11 +68,11 @@ ...@@ -61,11 +68,11 @@
<legend class="is-hidden">Required Information</legend> <legend class="is-hidden">Required Information</legend>
<ol class="list-input"> <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> <label for="email">E-mail</label>
<input class="" id="email" type="email" name="email" value="" placeholder="eg. example@edx.org" /> <input class="" id="email" type="email" name="email" value="" placeholder="eg. example@edx.org" />
</li> </li>
<li class="field required" id="field-password"> <li class="field required password" id="field-password">
<label for="password">Password</label> <label for="password">Password</label>
<input id="password" type="password" name="password" value="" placeholder="*****" /> <input id="password" type="password" name="password" value="" placeholder="*****" />
<span class="tip tip-input"><a href="#" class="action action-forgotpw">Forgot password?</a></span> <span class="tip tip-input"><a href="#" class="action action-forgotpw">Forgot password?</a></span>
...@@ -77,7 +84,7 @@ ...@@ -77,7 +84,7 @@
<legend class="is-hidden">Account Preferences</legend> <legend class="is-hidden">Account Preferences</legend>
<ol class="list-input"> <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" /> <input id="remember-yes" type="checkbox" name="remember" value="true" />
<label for="remember-yes">Remember me</label> <label for="remember-yes">Remember me</label>
</li> </li>
...@@ -87,7 +94,9 @@ ...@@ -87,7 +94,9 @@
<div class="form-actions"> <div class="form-actions">
<button name="submit" type="submit" id="submit" class="action action-primary action-update">Access My Courses</button> <button name="submit" type="submit" id="submit" class="action action-primary action-update">Access My Courses</button>
% if has_extauth_info is UNDEFINED: % 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 % endif
</div> </div>
</form> </form>
...@@ -106,12 +115,6 @@ ...@@ -106,12 +115,6 @@
</div> </div>
% endif % 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"> <div class="cta cta-forgotpw">
<h3>Forgot Your edX Password</h3> <h3>Forgot Your edX Password</h3>
<p><a href="#" class="action action-forgotpw">Request help with resetting your password</a></p> <p><a href="#" class="action action-forgotpw">Request help with resetting your password</a></p>
......
lms/templates/register.html
...@@ -13,8 +13,10 @@ ...@@ -13,8 +13,10 @@
<script type="text/javascript"> <script type="text/javascript">
$(function() { $(function() {
var view_name = 'view-register';
// adding js class for styling with accessibility in mind // adding js class for styling with accessibility in mind
$('body').addClass('js'); $('body').addClass('js').addClass(view_name);
// new window/tab opening // new window/tab opening
$('a[rel="external"], a[class="new-vp"]') $('a[rel="external"], a[class="new-vp"]')
...@@ -25,9 +27,9 @@ ...@@ -25,9 +27,9 @@
// form field label styling on focus // form field label styling on focus
$("form :input").focus(function() { $("form :input").focus(function() {
$("label[for='" + this.id + "']").addClass("is-focused"); $("label[for='" + this.id + "']").parent().addClass("is-focused");
}).blur(function() { }).blur(function() {
$("label").removeClass("is-focused"); $("label").parent().removeClass("is-focused");
}); });
}); });
...@@ -38,6 +40,9 @@ ...@@ -38,6 +40,9 @@
<section class="introduction"> <section class="introduction">
<header> <header>
<h1>Register for edX</h1> <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> </header>
</section> </section>
...@@ -49,18 +54,33 @@ ...@@ -49,18 +54,33 @@
<form role="form" id="register-form" method="post" data-remote="true" action="/create_account"> <form role="form" id="register-form" method="post" data-remote="true" action="/create_account">
<!-- status messages --> <!-- 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"> <div role="alert" class="status message submission-error">
<h3 class="message-title"></h3> <h3 class="message-title">The following errors occured while processing your registration: </h3>
<p class="message-copy"></p> <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>
<div role="alert" class="status message system-error"> <div role="alert" class="status message system-error">
<h3 class="message-title"></h3> <h3 class="message-title">We're sorry, our systems seem to be having trouble processing your registration now.</h3>
<p class="message-copy"></p> <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> </div>
<p class="instructions"> <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> </p>
<fieldset class="group group-form group-form-requiredinformation"> <fieldset class="group group-form group-form-requiredinformation">
...@@ -69,20 +89,20 @@ ...@@ -69,20 +89,20 @@
% if has_extauth_info is UNDEFINED: % if has_extauth_info is UNDEFINED:
<ol class="list-input"> <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> <label for="email">E-mail</label>
<input class="" id="email" type="email" name="email" value="" placeholder="eg. example@edx.org" /> <input class="" id="email" type="email" name="email" value="" placeholder="eg. example@edx.org" />
</li> </li>
<li class="field required" id="field-password"> <li class="field required password" id="field-password">
<label for="password">Password</label> <label for="password">Password</label>
<input id="password" type="password" name="password" value="" placeholder="*****" /> <input id="password" type="password" name="password" value="" placeholder="*****" />
</li> </li>
<li class="field required" id="field-username"> <li class="field required text" id="field-username">
<label for="username">Public Username</label> <label for="username">Public Username</label>
<input id="username" type="text" name="username" value="" placeholder="e.g. JaneDoe314159" /> <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> <span class="tip tip-input">Will be shown in any discussions or forums you participate in</span>
</li> </li>
<li class="field required" id="field-name"> <li class="field required text" id="field-name">
<label for="name">Full Name</label> <label for="name">Full Name</label>
<input id="name" type="text" name="name" value="" placeholder="e.g. Jane Doe" /> <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> <span class="tip tip-input">Needed for any certificates you earn</span>
...@@ -97,7 +117,7 @@ ...@@ -97,7 +117,7 @@
</div> </div>
<ol class="list-input"> <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> <label for="username">Public Username</label>
<input id="username" type="text" name="username" value="${extauth_username}" placeholder="e.g. JaneDoe314159" /> <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> <span class="tip tip-input">Will be shown in any discussions or forums you participate in</span>
...@@ -111,34 +131,36 @@ ...@@ -111,34 +131,36 @@
<legend class="is-hidden">Optional Personal Information</legend> <legend class="is-hidden">Optional Personal Information</legend>
<ol class="list-input"> <ol class="list-input">
<li class="field" id="field-education-level"> <li class="field-group">
<label for="education-level">Highest Level of Education Completed</label> <div class="field select" id="field-education-level">
<select id="education-level" name="level_of_education"> <label for="education-level">Highest Level of Education Completed</label>
<option value="">--</option> <select id="education-level" name="level_of_education">
%for code, ed_level in UserProfile.LEVEL_OF_EDUCATION_CHOICES: <option value="">--</option>
<option value="${code}">${ed_level}</option> %for code, ed_level in UserProfile.LEVEL_OF_EDUCATION_CHOICES:
%endfor <option value="${code}">${ed_level}</option>
</select> %endfor
</li> </select>
</div>
<li class="field" id="field-gender">
<label for="gender">Highest Level of Education Completed</label> <div class="field select" id="field-gender">
<select id="gender" name="gender"> <label for="gender">Gender</label>
<option value="">--</option> <select id="gender" name="gender">
%for code, gender in UserProfile.GENDER_CHOICES: <option value="">--</option>
<option value="${code}">${gender}</option> %for code, gender in UserProfile.GENDER_CHOICES:
%endfor <option value="${code}">${gender}</option>
</select> %endfor
</li> </select>
</div>
<li class="field" id="field-yob">
<label for="yob">Year of Birth</label> <div class="field select" id="field-yob">
<select id="yob" name="year_of_birth"> <label for="yob">Year of Birth</label>
<option value="">--</option> <select id="yob" name="year_of_birth">
%for year in UserProfile.VALID_YEARS: <option value="">--</option>
<option value="${year}">${year}</option> %for year in UserProfile.VALID_YEARS:
%endfor <option value="${year}">${year}</option>
</select> %endfor
</select>
</div>
</li> </li>
</ol> </ol>
</fieldset> </fieldset>
...@@ -147,12 +169,12 @@ ...@@ -147,12 +169,12 @@
<legend class="is-hidden">Optional Personal Information</legend> <legend class="is-hidden">Optional Personal Information</legend>
<ol class="list-input"> <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> <label for="address-mailing">Mailing Address</label>
<textarea id="address-mailing" name="mailing_address" value=""></textarea> <textarea id="address-mailing" name="mailing_address" value=""></textarea>
</li> </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> <label for="goals">Do you have any goals in signing up for edX?</label>
<textarea id="goals" name="goals" value=""></textarea> <textarea id="goals" name="goals" value=""></textarea>
</li> </li>
...@@ -163,14 +185,16 @@ ...@@ -163,14 +185,16 @@
<legend class="is-hidden">Account Acknowledgements</legend> <legend class="is-hidden">Account Acknowledgements</legend>
<ol class="list-input"> <ol class="list-input">
<li class="field required" id="field-tos"> <li class="field-group">
<input id="tos-yes" type="checkbox" name="terms_of_service" value="true" /> <div class="field required checkbox" id="field-tos">
<label for="tos-yes">I agree to the <a href="${reverse('tos')}" class="new-vp">Terms of Service</a></label> <input id="tos-yes" type="checkbox" name="terms_of_service" value="true" />
</li> <label for="tos-yes">I agree to the <a href="${reverse('tos')}" class="new-vp">Terms of Service</a></label>
</div>
<li class="field required" id="field-honorcode">
<input id="honorcode-yes" type="checkbox" name="honor_code" value="true" /> <div class="field required checkbox" id="field-honorcode">
<label for="honorcode-yes">I agree to the <a href="${reverse('honor')}" class="new-vp">Honor Code</a></label> <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> </li>
</ol> </ol>
</fieldset> </fieldset>
...@@ -178,7 +202,9 @@ ...@@ -178,7 +202,9 @@
<div class="form-actions"> <div class="form-actions">
<button name="submit" type="submit" id="submit" class="action action-primary action-update">Register &amp; Create My Account</button> <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: % 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 % endif
</div> </div>
</form> </form>
...@@ -189,14 +215,9 @@ ...@@ -189,14 +215,9 @@
<h3 class="is-hidden">Registration Help</h3> <h3 class="is-hidden">Registration Help</h3>
</header> </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"> <div class="cta cta-help">
<h3>Need Help?</h3> <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> </div>
</aside> </aside>
</section> </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