Verified: cleans up extraneous reg selection markup and expandable UI

This commit is contained in:
Brian Talbot
2013-08-29 16:43:02 -04:00
parent 8c107569e9
commit db8a810009
3 changed files with 80 additions and 42 deletions

View File

@@ -1,8 +1,8 @@
<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>

View File

@@ -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">
@@ -168,13 +168,6 @@ $(document).ready(function() {
</div>
</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">