Commit db8a8100 by Brian Talbot

Verified: cleans up extraneous reg selection markup and expandable UI

parent 8c107569
<ul class="list-fields contribution-options"> <ul class="list-fields contribution-options">
% for price in suggested_prices: % for price in suggested_prices:
<li class="field contribution-option"> <li class="field contribution-option">
<input type="radio" name="contribution" value="${price|h}" ${'checked' if price == chosen_price else ''}/> <input type="radio" name="contribution" value="${price|h}" ${'checked' if price == chosen_price else ''} id="contribution-${price|h}" />
<label for="contribution-${price|h}" /> <label for="contribution-${price|h}">
<span class="deco-denomination">$</span> <span class="deco-denomination">$</span>
<span class="label-value">${price}</span> <span class="label-value">${price}</span>
<span class="denomination-name">${currency}</span> <span class="denomination-name">${currency}</span>
......
...@@ -9,10 +9,10 @@ ...@@ -9,10 +9,10 @@
<script type="text/javascript"> <script type="text/javascript">
$(document).ready(function() { $(document).ready(function() {
$('.is-expandable .expandable-more').addClass('is-hidden'); $('.is-expandable').addClass('is-ready');
$('.is-expandable .title-expand').click(function(e) { $('.is-expandable .title-expand').click(function(e) {
e.preventDefault(); e.preventDefault();
$(this).parent().find('.expandable-more').toggleClass('is-hidden'); $(this).parent().toggleClass('is-expanded');
}); });
}); });
</script> </script>
...@@ -36,13 +36,13 @@ $(document).ready(function() { ...@@ -36,13 +36,13 @@ $(document).ready(function() {
</header> </header>
%if error: %if error:
<div class="error"> <div class="wrapper-msg wrapper-msg-error">
${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> </div>
%endif %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"> <div class="wrapper-register-choose wrapper-content-main">
<article class="register-choose content-main"> <article class="register-choose content-main">
...@@ -87,9 +87,9 @@ $(document).ready(function() { ...@@ -87,9 +87,9 @@ $(document).ready(function() {
<%include file="_contribution.html" args="suggested_prices=suggested_prices, currency=currency, chosen_price=chosen_price"/> <%include file="_contribution.html" args="suggested_prices=suggested_prices, currency=currency, chosen_price=chosen_price"/>
<div class="help-tip is-expandable"> <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"> <dl class="list-faq">
<dt class="faq-question">Why do I have to pay?</dt> <dt class="faq-question">Why do I have to pay?</dt>
<dd class="faq-answer"> <dd class="faq-answer">
...@@ -169,13 +169,6 @@ $(document).ready(function() { ...@@ -169,13 +169,6 @@ $(document).ready(function() {
</li> </li>
<li class="help-item"> <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> <h3 class="title">Have questions?</h3>
<div class="copy"> <div class="copy">
<p>Please read <a href="">our FAQs to view common questions about our certificates</a>.</p> <p>Please read <a href="">our FAQs to view common questions about our certificates</a>.</p>
......
...@@ -17,11 +17,6 @@ ...@@ -17,11 +17,6 @@
padding: ($baseline*0.75) $baseline; padding: ($baseline*0.75) $baseline;
} }
// MISC: custom link
.custom-link {
@extend .ui-fake-link;
}
// MISC: expandable UI // MISC: expandable UI
.is-expandable { .is-expandable {
...@@ -30,11 +25,48 @@ ...@@ -30,11 +25,48 @@
} }
.expandable-more { .expandable-icon {
display: block; @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; 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 @@ ...@@ -408,16 +440,6 @@
// help - faq // help - faq
.list-faq { .list-faq {
margin-bottom: $baseline; 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 @@ ...@@ -765,6 +787,7 @@
.label, label { .label, label {
margin-bottom: 0; margin-bottom: 0;
padding: 6px 0;
} }
input { input {
...@@ -790,8 +813,6 @@ ...@@ -790,8 +813,6 @@
// specific fields // specific fields
#contribution-other-amt { #contribution-other-amt {
position: relative;
top: -($baseline/4);
width: ($baseline*3); width: ($baseline*3);
padding: ($baseline/4) ($baseline/2); padding: ($baseline/4) ($baseline/2);
} }
...@@ -800,6 +821,22 @@ ...@@ -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 // UI: main content
.wrapper-content-main { .wrapper-content-main {
...@@ -963,6 +1000,18 @@ ...@@ -963,6 +1000,18 @@
.action-intro { .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 { .help-register {
...@@ -984,10 +1033,6 @@ ...@@ -984,10 +1033,6 @@
width: 0%; width: 0%;
} }
.wrapper-content-supplementary .content-supplementary .help-item {
width: flex-grid(3,12);
}
// contribution selection // contribution selection
.field-certificate-contribution { .field-certificate-contribution {
margin: $baseline 0; margin: $baseline 0;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment