ux adjustments to vcert flow

common/templates/course_modes/choose.html

@@ -13,10 +13,14 @@ $(document).ready(function() {
   $('.is-expandable').addClass('is-ready');
   $('.is-expandable .title-expand').click(function(e) {
       e.preventDefault();
-      //$(this).parent().toggleClass('is-expanded');
       $(this).next('.expandable-area').slideToggle();
       $(this).parent().toggleClass('is-expanded');
   });
+
+  $('#contribution-other-amt').focus(function() {
+    $('#contribution-other').attr('checked',true);
+  });
+
 });
 </script>
 </%block>
@@ -59,7 +63,7 @@ $(document).ready(function() {
             </div>
 
             <div class="field field-certificate-contribution">
-              <h5 class="label">${_("Select your contribution for this course (min. $")} ${min_price} <span class="denomination-name">${currency}</span> ${_("):")}</h5>
+              <h5 class="label">${_("Select your contribution for this course (min. $")} ${min_price} <span class="denomination-name">${currency}</span>${_("):")}</h5>
 
               %if error:
               <div class="msg msg-error msg-inline">
@@ -98,7 +102,7 @@ $(document).ready(function() {
                         </li>
 
                         <li class="field field-explain">
-                          <label for="explain"><span class="sr">${_("Explain your situation: ")}</span>${_("Tell us why you would like the fee waived for this course in at least 180 characters.")}</label>
+                          <label for="explain"><span class="sr">${_("Explain your situation: ")}</span>${_("Please write a few sentences about why you would like the fee waived for this course")}</label>
                           <textarea name="explain"></textarea>
                         </li>
                       </ul>
@@ -119,7 +123,7 @@ $(document).ready(function() {
           <div class="help help-register">
             <h3 class="title">${_("Verified Registration Requirements")}</h3>
             <div class="copy">
-              <p>${_("To register for a Verified Certificate of Achievement option, you will need a webcam, a credit or debit card, and an ID.")} <a href="">${_("View requirements")}</a></p>
+              <p>${_("To register for a Verified Certificate of Achievement option, you will need a webcam, a credit or debit card, and an ID.")}</p>
             </div>
 
             <h3 class="title">${_("What is an ID Verified Certificate?")}</h3>

lms/templates/shoppingcart/verified_cert_receipt.html

@@ -183,11 +183,11 @@
                         <h4 class="title">${_("Billing details:")}</h4>
                         <div class="copy">
                             <p>
-                                ${order.bill_to_cardtype} ${order.bill_to_ccnum}<br />
-                                ${order.bill_to_first} ${order.bill_to_last},
-                                ${order.bill_to_street1} ${order.bill_to_street2}
-                                ${order.bill_to_city}, ${order.bill_to_state} ${order.bill_to_postalcode}
-                                ${order.bill_to_country.upper()}
+                                ${order.bill_to_first} ${order.bill_to_last}<br />
+                                ${order.bill_to_street1} ${order.bill_to_street2}<br />
+                                ${order.bill_to_city}, ${order.bill_to_state} ${order.bill_to_postalcode}<br />
+                                ${order.bill_to_country.upper()}<br />
+                                ${order.bill_to_cardtype} ${order.bill_to_ccnum}
                             </p>
                         </div>
 

lms/templates/verify_student/photo_verification.html

@@ -79,7 +79,7 @@
                   <div class="placeholder-cam" id="face_capture_div">
 
                     <div class="placeholder-art">
-                      <p class="copy">${_("Don't see your picture? Make sure to allow your browser to use your camera when it asks for permission")}</p>
+                      <p class="copy">${_("Don't see your picture? Make sure to allow your browser to use your camera when it asks for permission. <br />Still not working? You can {a_start} audit the course  {a_end} without verifying.").format(a_start='<a rel="external" href="/course_modes/choose/' + course_id + '">', a_end="</a>")}</p>
                     </div>
 
                     <video id="face_video" autoplay></video><br/>
@@ -164,7 +164,7 @@
                   <div class="placeholder-cam" id="photo_id_capture_div">
 
                     <div class="placeholder-art">
-                      <p class="copy">${_("Don't see your picture? Make sure to allow your browser to use your camera when it asks for permission")}</p>
+                      <p class="copy">${_("Don't see your picture? Make sure to allow your browser to use your camera when it asks for permission. Still not working? You can {a_start} audit the course  {a_end} without verifying.").format(a_start='<a rel="external" href="/course_modes/choose/' + course_id + '">', a_end="</a>")}</p>
                     </div>
 
                     <video id="photo_id_video" autoplay></video><br/>