Skip to content
Snippets Groups Projects
Commit db8a8100 authored by Brian Talbot's avatar Brian Talbot
Browse files

Verified: cleans up extraneous reg selection markup and expandable UI

parent 8c107569
No related branches found
Tags release-2021-04-08-07.47
No related merge requests found
Hide whitespace changes
Inline Side-by-side
common/templates/course_modes/_contribution.html
+ 2
− 2
View file @ db8a8100
<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
− 16
View file @ db8a8100
......@@ -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">
......
lms/static/sass/views/_verification.scss
+ 69
− 24
View file @ db8a8100
......@@ -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;
......
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