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

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>