Verified: cleans up extraneous reg selection markup and expandable UI

common/templates/course_modes/_contribution.html

               <ul class="list-fields contribution-options">
                 % for price in suggested_prices:
                 <li class="field contribution-option">
-                  <input type="radio" name="contribution" value="${price|h}" ${'checked' if price == chosen_price else ''}/>
-                  <label for="contribution-${price|h}" />
+                  <input type="radio" name="contribution" value="${price|h}" ${'checked' if price == chosen_price else ''} id="contribution-${price|h}" />
+                  <label for="contribution-${price|h}">
                     <span class="deco-denomination">$</span>
                     <span class="label-value">${price}</span>
                     <span class="denomination-name">${currency}</span>

common/templates/course_modes/choose.html

@@ -9,10 +9,10 @@
 <script type="text/javascript">
 
 $(document).ready(function() {
-  $('.is-expandable .expandable-more').addClass('is-hidden');
+  $('.is-expandable').addClass('is-ready');
   $('.is-expandable .title-expand').click(function(e) {
       e.preventDefault();
-      $(this).parent().find('.expandable-more').toggleClass('is-hidden');
+      $(this).parent().toggleClass('is-expanded');
   });
 });
 </script>
@@ -36,13 +36,13 @@ $(document).ready(function() {
     </header>
 
     %if error:
-    <div class="error">
-        ${error}
+    <div class="wrapper-msg wrapper-msg-error">
+      <div class=" msg msg-error">
+      <h3 class="title">Sorry, there was an error with your registration</h3>
+      <div class="copy">${error}</div>
+      </div>
     </div>
     %endif
-    <h3 class="title">Select your track:</h3>
-
-    <form method="post" name="enrollment_mode_form" id="enrollment_mode_form">
 
     <div class="wrapper-register-choose wrapper-content-main">
       <article class="register-choose content-main">
@@ -87,9 +87,9 @@ $(document).ready(function() {
               <%include file="_contribution.html" args="suggested_prices=suggested_prices, currency=currency, chosen_price=chosen_price"/>
 
               <div class="help-tip is-expandable">
-                <h5 class="title title-expand">Why do I have to pay? What if I don't meet all the requirements?</h5>
+                <h5 class="title title-expand">Why do I have to pay? What if I don't meet all the requirements? <i class="icon-caret-down expandable-icon"></i></h5>
 
-                <div class="copy expandable-more">
+                <div class="copy expandable-area">
                   <dl class="list-faq">
                     <dt class="faq-question">Why do I have to pay?</dt>
                     <dd class="faq-answer">
@@ -169,13 +169,6 @@ $(document).ready(function() {
           </li>
 
           <li class="help-item">
-            <h3 class="title">Verified Certificate of Achievement Requirememts</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>
-            </div>
-          </li>
-
-          <li class="help-item">
             <h3 class="title">Have questions?</h3>
             <div class="copy">
               <p>Please read <a href="">our FAQs to view common questions about our certificates</a>.</p>

lms/static/sass/views/_verification.scss

@@ -17,11 +17,6 @@
   padding: ($baseline*0.75) $baseline;
 }
 
-// MISC: custom link
-.custom-link {
-  @extend .ui-fake-link;
-
-}
 
 // MISC: expandable UI
 .is-expandable {
@@ -30,11 +25,48 @@
 
   }
 
-  .expandable-more {
-    display: block;
+  .expandable-icon {
+    @include transition(all 0.25s ease-in-out 0s);
+    display: inline-block;
+    vertical-align: middle;
+    margin-left: ($baseline/4);
+  }
+
+  .expandable-area {
+    @include transition(opacity 0.25s ease-in-out 0s);
+  }
+
+  // STATE: active
+  &.is-ready {
+
+    .title-expand {
+      @extend .ui-fake-link;
+      color: $m-blue-d2;
+      border-bottom: 1px dotted transparent;
+
+      &:hover {
+        color: $m-blue-d2;
+        border-bottom: 1px dotted $m-blue-d2;
+      }
+    }
 
-    &.is-hidden {
+    .expandable-area {
       display: none;
+      opacity: 0.0;
+    }
+  }
+
+  // STATE: expanded
+  &.is-expanded {
+
+    .expandable-icon {
+      @include transform(rotate(-180deg));
+      @include transform-origin(50% 50%);
+    }
+
+    .expandable-area {
+      display: block;
+      opacity: 1.0;
     }
   }
 }
@@ -408,16 +440,6 @@
           // help - faq
           .list-faq {
             margin-bottom: $baseline;
-
-            .faq-question {
-              @extend .hd-lv3;
-              border-bottom: 1px solid $m-gray-l4;
-              padding-bottom: ($baseline/4);
-            }
-
-            .faq-answer {
-              margin-bottom: ($baseline*1.25);
-            }
           }
         }
       }
@@ -765,6 +787,7 @@
 
       .label, label {
         margin-bottom: 0;
+        padding: 6px 0;
       }
 
       input {
@@ -790,8 +813,6 @@
 
       // specific fields
       #contribution-other-amt {
-        position: relative;
-        top: -($baseline/4);
         width: ($baseline*3);
         padding: ($baseline/4) ($baseline/2);
       }
@@ -800,6 +821,22 @@
 
   // ====================
 
+  // help - faq
+  .list-faq {
+
+    .faq-question {
+      @extend .hd-lv3;
+      border-bottom: 1px solid $m-gray-l4;
+      padding-bottom: ($baseline/4);
+    }
+
+    .faq-answer {
+      margin-bottom: ($baseline*1.25);
+    }
+  }
+
+  // ====================
+
   // UI: main content
   .wrapper-content-main {
 
@@ -963,6 +1000,18 @@
       .action-intro {
 
       }
+
+      // extra register options/info
+      .title-expand {
+        @extend .t-copy-sub1;
+        font-weight: 500 !important;
+        display: inline-block;
+        margin: 0;
+      }
+
+      .expandable-area {
+        margin: $baseline 0;
+      }
     }
 
     .help-register {
@@ -984,10 +1033,6 @@
       width: 0%;
     }
 
-   .wrapper-content-supplementary .content-supplementary .help-item {
-      width: flex-grid(3,12);
-    }
-
     // contribution selection
     .field-certificate-contribution {
       margin: $baseline 0;