adjustments to choose and contribution for vcerts

common/templates/course_modes/_contribution.html

@@ -23,7 +23,7 @@
         </label>
         <div class="wrapper">
           <span class="deco-denomination">$</span>
-          <input type="text" size="5" name="contribution-other-amt" id="contribution-other-amt" value="${chosen_price if (chosen_price and chosen_price not in suggested_prices) else ''}"/>
+          <input type="text" size="9" name="contribution-other-amt" id="contribution-other-amt" value="${chosen_price if (chosen_price and chosen_price not in suggested_prices) else ''}"/>
           <span class="denomination-name">${currency}</span>
         </div>
       </li>

common/templates/course_modes/choose.html

@@ -9,9 +9,12 @@
 <script type="text/javascript">
 
 $(document).ready(function() {
+  $('.expandable-area').slideUp();
   $('.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');
   });
 });
@@ -45,27 +48,6 @@ $(document).ready(function() {
 
         <form class="form-register-choose" method="post" name="enrollment_mode_form" id="enrollment_mode_form">
 
-          % if "audit" in modes:
-          <div class="register-choice register-choice-audit">
-            <div class="wrapper-copy">
-              <h4 class="title">${_("Audit This Course")}</h4>
-              <div class="copy">
-                <p>${_("Sign up to audit this course for free and track your own progress.")}</p>
-              </div>
-            </div>
-
-            <ul class="list-actions">
-              <li class="action action-select">
-                <input type="submit" name="mode" value="Select Audit" />
-              </li>
-            </ul>
-          </div>
-
-          <span class="deco-divider">
-            <span class="copy">${_("or")}</span>
-          </span>
-          % endif
-
           % if "verified" in modes:
           <div class="register-choice register-choice-certificate">
             <div class="wrapper-copy">
@@ -77,7 +59,7 @@ $(document).ready(function() {
             </div>
 
             <div class="field field-certificate-contribution">
-              <h5 class="label">${_("Select your contribution for this course:")}</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">
@@ -147,6 +129,26 @@ $(document).ready(function() {
           </div>
           % endif
 
+          % if "audit" in modes:
+          <span class="deco-divider">
+            <span class="copy">${_("or")}</span>
+          </span>
+          <div class="register-choice register-choice-audit">
+            <div class="wrapper-copy">
+              <h4 class="title">${_("Audit This Course")}</h4>
+              <div class="copy">
+                <p>${_("Sign up to audit this course for free and track your own progress.")}</p>
+              </div>
+            </div>
+
+            <ul class="list-actions">
+              <li class="action action-select">
+                <input type="submit" name="mode" value="Select Audit" />
+              </li>
+            </ul>
+          </div>
+          % endif
+
           <input type="hidden" name="csrfmiddlewaretoken" value="${ csrf_token }">
         </form>
       </article>

lms/static/sass/views/_verification.scss

@@ -131,7 +131,7 @@
   }
 
   .expandable-area {
-    @include transition(opacity 0.25s ease-in-out 0s, height 0.25s ease-in-out 0s);
+   // @include transition(opacity 0.25s ease-in-out 0s, height 0.25s ease-in-out 0s);
   }
 
   // STATE: active
@@ -150,12 +150,14 @@
       }
     }
 
+/* using jquery
     .expandable-area {
       visibility: none;
       height: 0;
       opacity: 0.0;
       overflow-y: scroll;
     }
+*/
   }
 
   // STATE: expanded
@@ -166,11 +168,13 @@
       @include transform-origin(50% 50%);
     }
 
+/*
     .expandable-area {
       visibility: visible;
       height: ($baseline*16);
       opacity: 1.0;
     }
+*/
   }
 }
 
@@ -879,6 +883,7 @@
               display: inline-block;
               vertical-align: middle;
               margin-right: ($baseline/4);
+              padding: 3px 0;
 
               &:last-child {
                 margin-right: 0;
@@ -1037,7 +1042,7 @@
 
       // specific fields
       #contribution-other-amt {
-        width: ($baseline*3);
+        width: ($baseline*4.5);
         padding: ($baseline/4) ($baseline/2);
       }
     }
@@ -1294,7 +1299,7 @@
       }
 
       #contribution-other-amt {
-        width: ($baseline*3);
+        width: ($baseline*4.5);
         padding: ($baseline/4) ($baseline/2);
       }
 
@@ -1304,6 +1309,7 @@
           display: inline-block;
           vertical-align: middle;
           margin-right: ($baseline/4);
+          padding: 1px 0;
 
           &:last-child {
             margin-right: 0;

lms/templates/verify_student/photo_verification.html

@@ -317,7 +317,7 @@
                     <h4 class="title">${_("Check Your Contribution Level")}</h4>
 
                     <div class="copy">
-                      <p>${_("Please confirm your contribution for this course:")}</p>
+                      <p>${_("Please confirm your contribution for this course (min. $")} ${min_price} <span class="denomination-name">${currency}</span>${_("):")}</p>
                     </div>
 
                     <%include file="/course_modes/_contribution.html" args="suggested_prices=suggested_prices, currency=currency, chosen_price=chosen_price, min_price=min_price"/>