Skip to content

E
edx-platform
Commit b75398b0 by Brian Talbot
Options

Verification: moves common page elements/copy into central templates w/ supportive styling

parent a432cffc
Showing with 112 additions and 186 deletions
common/templates/course_modes/_contribution.html
<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 ''} id="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}"> <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>
</label> </label>
</li> </li>
% endfor % endfor
<li class="field"> <li class="field">
<ul class="field-group field-group-other"> <ul class="field-group field-group-other">
<li class="contribution-option contribution-option-other1"> <li class="contribution-option contribution-option-other1">
<input type="radio" id="contribution-other" name="contribution" value="" ${'checked' if (chosen_price and chosen_price not in suggested_prices) else ''} /> <input type="radio" id="contribution-other" name="contribution" value="" ${'checked' if (chosen_price and chosen_price not in suggested_prices) else ''} />
<label for=" contribution-other"><span class="sr">Other</span></label> <label for=" contribution-other"><span class="sr">Other</span></label>
</li> </li>
<li class="contribution-option contribution-option-other2"> <li class="contribution-option contribution-option-other2">
<label for="contribution-other-amt"> <label for="contribution-other-amt">
<span class="sr">Other Amount</span> <span class="sr">Other Amount</span>
</label> </label>
<div class="wrapper"> <div class="wrapper">
<span class="deco-denomination">$</span> <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="5" 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> <span class="denomination-name">${currency}</span>
</div> </div>
</li> </li>
</ul> </ul>
</li> </li>
</ul> </ul>
common/templates/course_modes/choose.html
...@@ -37,14 +37,7 @@ $(document).ready(function() { ...@@ -37,14 +37,7 @@ $(document).ready(function() {
<div class="container"> <div class="container">
<section class="wrapper"> <section class="wrapper">
<header class="page-header"> <%include file="/verify_student/_verification_header.html" />
<h2 class="title">
<span class="wrapper-sts">
<span class="sts">${_("You are registering for")}</span>
<span class="sts-course">${course_id} </span>
</span>
</h2>
</header>
<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">
...@@ -153,10 +146,14 @@ $(document).ready(function() { ...@@ -153,10 +146,14 @@ $(document).ready(function() {
<div class="help help-register"> <div class="help help-register">
<h3 class="title">${_("Verified Registration Requirements")}</h3> <h3 class="title">${_("Verified Registration Requirements")}</h3>
<div class="copy"> <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> <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> </div>
<h3 class="title">${_("What is an ID Verified Certificate?")}</h3>
<div class="copy">
<p>${_("Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.")}</p>
</div>
</div> </div>
% endif % endif
...@@ -165,32 +162,7 @@ $(document).ready(function() { ...@@ -165,32 +162,7 @@ $(document).ready(function() {
</article> </article>
</div> <!-- /wrapper-content-main --> </div> <!-- /wrapper-content-main -->
<div class="wrapper-content-supplementary"> <%include file="/verify_student/_verification_support.html" />
<aside class="content-supplementary">
<ul class="list-help">
<li class="help-item">
<h3 class="title">${_("What is an ID Verified Certificate?")}</h3>
<div class="copy">
<p>${_("Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.")}</p>
</div>
</li>
<li class="help-item">
<h3 class="title">${_("Have questions?")}</h3>
<div class="copy">
<p>${_("Please read ")}<a rel="external" href="">${_("our FAQs to view common questions about our certificates")}</a>${_(".")}</p>
</div>
</li>
<li class="help-item">
<h3 class="title">${_("Not the course you wanted?")}</h3>
<div class="copy">
<p><a href="${marketing_link('COURSES')}">${_("Return to our course listings to find another course")}</a></p>
</div>
</li>
</ul>
</aside>
</div> <!-- /wrapper-content-supplementary -->
</section> </section>
</div> </div>
</%block> </%block>
lms/static/sass/views/_verification.scss
...@@ -1080,6 +1080,10 @@ ...@@ -1080,6 +1080,10 @@
// VIEW: select a track // VIEW: select a track
&.step-select-track { &.step-select-track {
.sts-track {
@extend .text-sr;
}
.form-register-choose { .form-register-choose {
@include clearfix(); @include clearfix();
width: flex-grid(12,12); width: flex-grid(12,12);
...@@ -1214,6 +1218,7 @@ ...@@ -1214,6 +1218,7 @@
.title { .title {
@extend .hd-lv4; @extend .hd-lv4;
@extend .t-weight4; @extend .t-weight4;
margin-top: $baseline;
margin-bottom: ($baseline/2); margin-bottom: ($baseline/2);
} }
......
lms/templates/verify_student/_modal_editname.html 0 → 100644
<%! from django.utils.translation import ugettext as _ %>
<section id="edit-name" class="modal">
<header>
<h4>${_("Edit Your Full Name")}</h4>
</header>
<form id="course-checklists" class="course-checklists" method="post" action="">
<div role="alert" class="status message submission-error" tabindex="-1">
<p class="message-title">${_("The following error occured while editing your name:")}
<span class="message-copy"> </span>
</p>
</div>
<p>
<label for="name">${_('Full Name')}</label>
<input id="name" type="text" name="name" value="" placeholder="${_('example: Jane Doe')}" required aria-required="true" />
</p>
<div class="actions">
<button class="action action-primary" type="submit">${_("Save")}</button>
<button class="action action-secondary action-cancel">${_("Cancel")}</button>
</div>
</form>
<a href="#" data-dismiss="modal" rel="view" class="action action-close action-editname-close">
<i class="icon-remove-sign"></i>
<span class="label">close</span>
</a>
</section>
lms/templates/verify_student/_verification_header.html 0 → 100644
<%! from django.utils.translation import ugettext as _ %>
<header class="page-header">
<h2 class="title">
<span class="wrapper-sts">
<span class="sts">${_("You are registering for")}</span>
<span class="sts-course">${course_id}</span>
</span>
<span class="sts-track">
<span class="sts-track-value">
<span class="context">${_("Registering as: ")}</span> ${_("ID Verified")}
</span>
</span>
</h2>
</header>
lms/templates/verify_student/_verification_support.html 0 → 100644
<%! from django.utils.translation import ugettext as _ %>
<div class="wrapper-content-supplementary">
<aside class="content-supplementary">
<ul class="list-help">
<li class="help-item">
<h3 class="title">${_("Have questions?")}</h3>
<div class="copy">
<p>${_("Please read {a_start} our FAQs to view common questions about our certificates {a_end}.").format(a_start='<a rel="external" href="">', a_end="</a>")}</p>
</div>
</li>
<li class="help-item">
<h3 class="title">${_("Change your mind?")}</h3>
<div class="copy">
<p>${_("You can always {a_start} Audit the course for free {a_end} without verifying.").format(a_start='<a rel="external" href="">', a_end="</a>")}</p>
</div>
</li>
</ul>
</aside>
</div> <!-- /wrapper-content-supplementary -->
lms/templates/verify_student/photo_verification.html
...@@ -16,19 +16,7 @@ ...@@ -16,19 +16,7 @@
<div class="container"> <div class="container">
<section class="wrapper"> <section class="wrapper">
<header class="page-header"> <%include file="_verification_header.html" />
<h2 class="title">
<span class="wrapper-sts">
<span class="sts">${_("You are registering for")}</span>
<span class="sts-course">${course_id}</span>
</span>
<span class="sts-track">
<span class="sts-track-value">
<span class="context">${_("Registering as:")}</span> ${_("ID Verified")}
</span>
</span>
</h2>
</header>
<div class="wrapper-progress"> <div class="wrapper-progress">
<section class="progress"> <section class="progress">
...@@ -359,51 +347,9 @@ ...@@ -359,51 +347,9 @@
</article> </article>
</div> <!-- /wrapper-content-main --> </div> <!-- /wrapper-content-main -->
<div class="wrapper-content-supplementary"> <%include file="_verification_support.html" />
<aside class="content-supplementary">
<ul class="list-help">
<li class="help-item">
<h3 class="title">${_("Have questions?")}</h3>
<div class="copy">
<p>${_("Please read {a_start} our FAQs to view common questions about our certificates {a_end}.").format(a_start='<a rel="external" href="">', a_end="</a>")}</p>
</div>
</li>
<li class="help-item">
<h3 class="title">${_("Change your mind?")}</h3>
<div class="copy">
<p>${_("You can always {a_start} Audit the course for free {a_end} without verifying.").format(a_start='<a rel="external" href="">', a_end="</a>")}</p>
</div>
</li>
</ul>
</aside>
</div> <!-- /wrapper-content-supplementary -->
</section> </section>
</div> </div>
<section id="edit-name" class="modal"> <%include file="_modal_editname.html" />
<header>
<h4>${_("Edit Your Full Name")}</h4>
</header>
<form id="course-checklists" class="course-checklists" method="post" action="">
<div role="alert" class="status message submission-error" tabindex="-1">
<p class="message-title">${_("The following error occured while editing your name:")}
<span class="message-copy"> </span>
</p>
</div>
<p>
<label for="name">${_('Full Name')}</label>
<input id="name" type="text" name="name" value="" placeholder="${_('example: Jane Doe')}" required aria-required="true" />
</p>
<div class="actions">
<button class="action action-primary" type="submit">${_("Save")}</button>
<button class="action action-secondary action-cancel">${_("Cancel")}</button>
</div>
</form>
<a href="#" data-dismiss="modal" rel="view" class="action action-close action-editname-close">
<i class="icon-remove-sign"></i>
<span class="label">close</span>
</a>
</section>
</%block> </%block>
lms/templates/verify_student/show_requirements.html
...@@ -22,19 +22,7 @@ ...@@ -22,19 +22,7 @@
<div class="container"> <div class="container">
<section class="wrapper"> <section class="wrapper">
<header class="page-header"> <%include file="_verification_header.html" />
<h2 class="title">
<span class="wrapper-sts">
<span class="sts">${_("You are registering for")}</span>
<span class="sts-course">${course_id}</span>
</span>
<span class="sts-track">
<span class="sts-track-value">
<span class="context">${_("Registering as: ")}</span> ${_("ID Verified")}
</span>
</span>
</h2>
</header>
<div class="wrapper-progress"> <div class="wrapper-progress">
<section class="progress"> <section class="progress">
...@@ -162,25 +150,7 @@ ...@@ -162,25 +150,7 @@
</article> </article>
</div> <!-- /wrapper-content-main --> </div> <!-- /wrapper-content-main -->
<div class="wrapper-content-supplementary"> <%include file="_verification_support.html" />
<aside class="content-supplementary">
<ul class="list-help">
<li class="help-item">
<h3 class="title">${_("Have questions?")}</h3>
<div class="copy">
<p>${_("Please read {a_start} our FAQs to view common questions about our certificates {a_end}.").format(a_start='<a rel="external" href="">', a_end="</a>")}</p>
</div>
</li>
<li class="help-item">
<h3 class="title">${_("Change your mind?")}</h3>
<div class="copy">
<p>${_("You can always {a_start} Audit the course for free {a_end} without verifying.").format(a_start='<a rel="external" href="">', a_end="</a>")}</p>
</div>
</li>
</ul>
</aside>
</div> <!-- /wrapper-content-supplementary -->
</section> </section>
</div> </div>
</%block> </%block>
lms/templates/verify_student/verified.html
...@@ -40,19 +40,7 @@ $(document).ready(function() { ...@@ -40,19 +40,7 @@ $(document).ready(function() {
<div class="container"> <div class="container">
<section class="wrapper"> <section class="wrapper">
<header class="page-header"> <%include file="_verification_header.html" />
<h2 class="title">
<span class="wrapper-sts">
<span class="sts">${_("You are registering for")}</span>
<span class="sts-course">${course_id}</span>
</span>
<span class="sts-track">
<span class="sts-track-value">
<span class="context">${_("Registering as:")}</span> ${_("ID Verified")}
</span>
</span>
</h2>
</header>
<div class="wrapper-progress"> <div class="wrapper-progress">
<section class="progress"> <section class="progress">
...@@ -112,25 +100,7 @@ $(document).ready(function() { ...@@ -112,25 +100,7 @@ $(document).ready(function() {
</article> </article>
</div> <!-- /wrapper-content-main --> </div> <!-- /wrapper-content-main -->
<div class="wrapper-content-supplementary"> <%include file="_verification_support.html" />
<aside class="content-supplementary">
<ul class="list-help">
<li class="help-item">
<h3 class="title">${_("Have questions?")}</h3>
<div class="copy">
<p>${_("Please read {a_start} our FAQs to view common questions about our certificates {a_end}.").format(a_start='<a rel="external" href="">', a_end="</a>")}</p>
</div>
</li>
<li class="help-item">
<h3 class="title">${_("Change your mind?")}</h3>
<div class="copy">
<p>${_("You can always {a_start} Audit the course for free {a_end} without verifying.").format(a_start='<a rel="external" href="">', a_end="</a>")}</p>
</div>
</li>
</ul>
</aside>
</div> <!-- /wrapper-content-supplementary -->
</section> </section>
</div> </div>
</%block> </%block>
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