Merge pull request #913 from edx/ormsbee/certs_small_ux

Small UI fixes

common/djangoapps/course_modes/views.py

@@ -25,10 +25,13 @@ class ChooseModeView(View):
         if CourseEnrollment.enrollment_mode_for_user(request.user, course_id) == 'verified':
             return redirect(reverse('dashboard'))
         modes = CourseMode.modes_for_course_dict(course_id)
+        course = course_from_id(course_id)
         context = {
             "course_id": course_id,
             "modes": modes,
-            "course_name": course_from_id(course_id).display_name,
+            "course_name": course.display_name_with_default,
+            "course_org" : course.display_org_with_default,
+            "course_num" : course.display_number_with_default,
             "chosen_price": None,
             "error": error,
         }

lms/djangoapps/shoppingcart/models.py

@@ -381,6 +381,18 @@ class CertificateItem(OrderItem):
             return super(CertificateItem, self).single_item_receipt_template
 
     @property
+    def single_item_receipt_context(self):
+        course = course_from_id(self.course_id)
+        return {
+            "course_id" : self.course_id,
+            "course_name": course.display_name_with_default,
+            "course_org": course.display_org_with_default,
+            "course_num": course.display_number_with_default,
+            "course_start_date_text": course.start_date_text,
+            "course_has_started": course.start > datetime.today().replace(tzinfo=pytz.utc),
+        }
+
+    @property
     def additional_instruction_text(self):
         return _("Note - you have up to 2 weeks into the course to unenroll from the Verified Certificate option "
                  "and receive a full refund. To receive your refund, contact {billing_email}. "

lms/djangoapps/shoppingcart/views.py

@@ -113,5 +113,6 @@ def show_receipt(request, ordernum):
 
     if order_items.count() == 1:
         receipt_template = order_items[0].single_item_receipt_template
+        context.update(order_items[0].single_item_receipt_context)
 
     return render_to_response(receipt_template, context)

lms/djangoapps/verify_student/views.py

@@ -55,11 +55,15 @@ class VerifyView(View):
             chosen_price = request.session["donation_for_course"][course_id]
         else:
             chosen_price = verify_mode.min_price
+
+        course = course_from_id(course_id)
         context = {
             "progress_state": progress_state,
             "user_full_name": request.user.profile.name,
             "course_id": course_id,
-            "course_name": course_from_id(course_id).display_name,
+            "course_name": course.display_name_with_default,
+            "course_org" : course.display_org_with_default,
+            "course_num" : course.display_number_with_default,
             "purchase_endpoint": get_purchase_endpoint(),
             "suggested_prices": [
                 decimal.Decimal(price)
@@ -91,9 +95,12 @@ class VerifiedView(View):
         else:
             chosen_price = verify_mode.min_price.format("{:g}")
 
+        course = course_from_id(course_id)
         context = {
             "course_id": course_id,
-            "course_name": course_from_id(course_id).display_name,
+            "course_name": course.display_name_with_default,
+            "course_org" : course.display_org_with_default,
+            "course_num" : course.display_number_with_default,
             "purchase_endpoint": get_purchase_endpoint(),
             "currency": verify_mode.currency.upper(),
             "chosen_price": chosen_price,
@@ -150,10 +157,14 @@ def show_requirements(request, course_id):
     """
     if CourseEnrollment.enrollment_mode_for_user(request.user, course_id) == 'verified':
         return redirect(reverse('dashboard'))
+
+    course = course_from_id(course_id)
     context = {
         "course_id": course_id,
+        "course_name": course.display_name_with_default,
+        "course_org" : course.display_org_with_default,
+        "course_num" : course.display_number_with_default,
         "is_not_active": not request.user.is_active,
-        "course_name": course_from_id(course_id).display_name,
     }
     return render_to_response("verify_student/show_requirements.html", context)
 

lms/static/js/verify_student/photocapture.js

@@ -47,18 +47,20 @@ var submitToPaymentProcessing = function() {
   });
 }
 
-function doResetButton(resetButton, captureButton, approveButton, nextButton) {
+function doResetButton(resetButton, captureButton, approveButton, nextButtonNav, nextLink) {
   approveButton.removeClass('approved');
-  nextButton.addClass('disabled');
+  nextButtonNav.addClass('is-not-ready');
+  nextLink.attr('href', "#");
 
   captureButton.show();
   resetButton.hide();
   approveButton.hide();
 }
 
-function doApproveButton(approveButton, nextButton) {
+function doApproveButton(approveButton, nextButtonNav, nextLink) {
+  nextButtonNav.removeClass('is-not-ready');
   approveButton.addClass('approved');
-  nextButton.removeClass('disabled');
+  nextLink.attr('href', "#next");
 }
 
 function doSnapshotButton(captureButton, resetButton, approveButton) {
@@ -67,7 +69,6 @@ function doSnapshotButton(captureButton, resetButton, approveButton) {
   approveButton.show();
 }
 
-
 function submitNameChange(event) {
   event.preventDefault();
   $("#lean_overlay").fadeOut(200);
@@ -101,7 +102,8 @@ function initSnapshotHandler(names, hasHtml5CameraSupport) {
   var captureButton = $("#" + name + "_capture_button");
   var resetButton = $("#" + name + "_reset_button");
   var approveButton = $("#" + name + "_approve_button");
-  var nextButton = $("#" + name + "_next_button");
+  var nextButtonNav = $("#" + name + "_next_button_nav");
+  var nextLink = $("#" + name + "_next_link");
   var flashCapture = $("#" + name + "_flash");
 
   var ctx = null;
@@ -139,12 +141,12 @@ function initSnapshotHandler(names, hasHtml5CameraSupport) {
       flashCapture[0].reset();
     }
 
-    doResetButton(resetButton, captureButton, approveButton, nextButton);
+    doResetButton(resetButton, captureButton, approveButton, nextButtonNav, nextLink);
     return false;
   }
 
   function approve() {
-    doApproveButton(approveButton, nextButton)
+    doApproveButton(approveButton, nextButtonNav, nextLink)
     return false;
   }
 
@@ -152,7 +154,8 @@ function initSnapshotHandler(names, hasHtml5CameraSupport) {
   captureButton.show();
   resetButton.hide();
   approveButton.hide();
-  nextButton.addClass('disabled');
+  nextButtonNav.addClass('is-not-ready');
+  nextLink.attr('href', "#");
 
   // Connect event handlers...
   video.click(snapshot);

lms/static/sass/elements/_controls.scss

@@ -176,6 +176,9 @@
   cursor: default;
   pointer-events: none;
   box-shadow: none;
+  :hover {
+    pointer-events: none;
+  }
 }
 
 // ====================

lms/templates/shoppingcart/verified_cert_receipt.html

 <%! from django.utils.translation import ugettext as _ %>
 <%! from django.core.urlresolvers import reverse %>
 <%! from student.views import course_from_id %>
-<%! from datetime import datetime %>
-<%! import pytz %>
 
 <%inherit file="../main.html" />
 <%block name="bodyclass">register verification-process step-confirmation</%block>
@@ -15,8 +13,6 @@
     ${notification}
 </section>
 % endif
-<% course_id = order_items[0].course_id %>
-<% course = course_from_id(course_id) %>
 
 <div class="container">
   <section class="wrapper cart-list">
@@ -25,7 +21,7 @@
   <h2 class="title">
     <span class="wrapper-sts">
       <span class="sts">${_("You are now registered for")}</span>
-      <span class="sts-course">${course.display_name}</span>
+      <span class="sts-course">${course_name} (${course_org}, ${course_num})</span>
     </span>
     <span class="sts-track">
       <span class="sts-track-value">
@@ -108,11 +104,11 @@
                   <tr>
                     <td>${item.line_desc}</td>
                     <td>
-                       ${_("Starts: {start_date}").format(start_date=course.start_date_text)}
+                       ${_("Starts: {start_date}").format(start_date=course_start_date_text)}
                     </td>
                     <td class="options">
-                      %if course.start > datetime.today().replace(tzinfo=pytz.utc):
-                          ${_("Starts: {start_date}").format(start_date=course.start_date_text)}
+                      %if course_has_started:
+                          ${_("Starts: {start_date}").format(start_date=course_start_date_text)}
                       %else:
                       <a class="action action-course" href="${reverse('course_root', kwargs={'course_id': item.course_id})}">${_("Go to Course")}</a>
                       %endif

lms/templates/verify_student/_verification_header.html

@@ -4,7 +4,7 @@
   <h2 class="title">
     <span class="wrapper-sts">
       <span class="sts">${_("You are registering for")}</span>
-      <span class="sts-course">${course_name}</span>
+      <span class="sts-course">${course_name} (${course_org}, ${course_num})</span>
     </span>
     <span class="sts-track">
       <span class="sts-track-value">

lms/templates/verify_student/photo_verification.html

@@ -141,12 +141,12 @@
                 </div>
               </div>
 
-              <nav class="nav-wizard"> <!-- FIXME: Additional class is-ready, is-not-ready -->
+              <nav class="nav-wizard" id="face_next_button_nav">
                 <span class="help help-inline">${_("Once you verify your photo looks good, you can move on to step 2.")}</span>
 
                 <ol class="wizard-steps">
                   <li class="wizard-step">
-                    <a class="next action-primary" id="face_next_button" href="#next" aria-hidden="true" title="Next">${_("Go to Step 2: Take ID Photo")}</a>
+                    <a id="face_next_link" class="next action-primary" href="#next" aria-hidden="true" title="Next">${_("Go to Step 2: Take ID Photo")}</a>
                   </li>
                 </ol>
               </nav>
@@ -228,12 +228,12 @@
                 </div>
               </div>
 
-              <nav class="nav-wizard">
+              <nav class="nav-wizard" id="photo_id_next_button_nav">
                 <span class="help help-inline">${_("Once you verify your ID photo looks good, you can move on to step 3.")}</span>
 
                 <ol class="wizard-steps">
                   <li class="wizard-step">
-                    <a class="next action-primary" id="photo_id_next_button" href="#next" aria-hidden="true" title="Next">${_("Go to Step 3: Review Your Info")}</a>
+                    <a id="photo_id_next_link" class="next action-primary" href="#next" aria-hidden="true" title="Next">${_("Go to Step 3: Review Your Info")}</a>
                   </li>
                 </ol>
               </nav>