Skip to content

E
edx-platform
Commit e9e1d350 by Renzo Lucioni Committed by AlasdairSwan
Options

ECOM-869 Update copy and hide supplementary content wrapper and requirement… 

ECOM-869 Update copy and hide supplementary content wrapper and requirement blocks if user is inactive
parent 90e0a2d1
Showing with 156 additions and 133 deletions
lms/static/sass/views/_decoupled-verification.scss
......@@ -23,6 +23,12 @@
}
}
.placeholder-cam {
.copy {
font-weight: bold !important;
}
}
.requirements-container {
.list-reqs {
......@@ -41,7 +47,7 @@
}
&.account-not-activated {
width: 990px;
width: 300px;
.req {
height: 290px;
......@@ -75,6 +81,7 @@
display: inline;
float: left;
line-height: 45px;
color: black;
}
.wizard-steps {
......@@ -119,11 +126,23 @@
.expandable-area {
margin-top: 5px;
padding-bottom: 20px;
}
}
.help-tips {
margin-left: 0 !important;
.title {
font-size: 16px !important;
}
.list-tips {
.tip {
font-size: 16px;
line-height: 1.5em;
}
}
}
.photo-tip {
......@@ -137,6 +156,12 @@
padding-left: 20px;
}
.list-faq {
dd {
color: black;
}
}
.wrapper-task {
.msg-retake {
margin-top: 0;
......
lms/templates/verify_student/intro_step.underscore
......@@ -9,7 +9,13 @@
</h3>
<% } else { %>
<h3 class="title"><%- introTitle %></h3>
<% if ( introMsg ) { %>
<% if ( !isActive ) { %>
<div class="instruction">
<p>
<%- gettext( "You need to activate your account before you can enroll in courses. Check your inbox for an activation email. After you complete activation you can return and refresh this page." ) %>
</p>
</div>
<% } else if ( introMsg ) { %>
<div class="instruction"><p><%- introMsg %></p></div>
<% } %>
<% } %>
......@@ -17,69 +23,63 @@
<div class="requirements-container">
<ul class="list-reqs <% if ( requirements['account-activation-required'] ) { %>account-not-activated<% } %>">
<% if ( requirements['account-activation-required'] ) { %>
<li class="req req-0 req-activate">
<h4 class="title"><%- gettext( "Activate Your Account" ) %></h4>
<div class="placeholder-art">
<i class="icon-envelope-alt"></i>
</div>
<li class="req req-0 req-activate">
<h4 class="title"><%- gettext( "Activate Your Account" ) %></h4>
<div class="placeholder-art">
<i class="icon-envelope-alt"></i>
</div>
<div class="copy">
<p>
<span class="copy-super"><%- gettext( "Check your email" ) %></span>
<span class="copy-sub"><%-
gettext( "You need to activate your account before you can register for courses. Check your inbox for an activation email." )
%>
</span>
</p>
</div>
</li>
<% } %>
<% if ( requirements['photo-id-required'] ) { %>
<li class="req req-1 req-id">
<h4 class="title"><%- gettext( "Photo ID" ) %></h4>
<div class="placeholder-art">
<i class="icon-list-alt icon-under"></i>
<i class="icon-user icon-over"></i>
</div>
<div class="copy">
<p>
<span class="copy-super"><%- gettext( "Check your email" ) %></span>
</p>
</div>
</li>
<% } else { %>
<% if ( requirements['photo-id-required'] ) { %>
<li class="req req-1 req-id">
<h4 class="title"><%- gettext( "Photo ID" ) %></h4>
<div class="placeholder-art">
<i class="icon-list-alt icon-under"></i>
<i class="icon-user icon-over"></i>
</div>
<div class="copy">
<p>
<span class="copy-sub"><%- gettext( "A driver's license, passport, or government-issued ID with your name and picture" ) %></span>
</p>
</div>
</li>
<% } %>
<div class="copy">
<p>
<span class="copy-sub"><%- gettext( "A driver's license, passport, or government-issued ID with your name and picture" ) %></span>
</p>
</div>
</li>
<% } %>
<% if ( requirements['webcam-required'] ) { %>
<li class="req req-2 req-webcam">
<h4 class="title"><%- gettext( "Webcam" ) %></h4>
<div class="placeholder-art">
<i class="icon-facetime-video"></i>
</div>
<% if ( requirements['webcam-required'] ) { %>
<li class="req req-2 req-webcam">
<h4 class="title"><%- gettext( "Webcam" ) %></h4>
<div class="placeholder-art">
<i class="icon-facetime-video"></i>
</div>
<div class="copy"></div>
</li>
<div class="copy"></div>
</li>
<% } %>
<% } %>
</ul>
</div>
<% if ( nextStepTitle ) { %>
<% if ( nextStepTitle && isActive ) { %>
<nav class="nav-wizard is-ready">
<ol class="wizard-steps">
<li class="wizard-step">
<a class="next action-primary" <% if ( !isActive ) { %>disabled="true"<% } %> id="next_step_button" href="?skip-first-step=1">
<% if ( !isActive ) { %>
<%- gettext( "Activate Your Account" ) %>
<% } else if ( hasPaid ) { %>
<%- _.sprintf(
gettext( "Next: %(nextStepTitle)s" ),
{ nextStepTitle: nextStepTitle }
) %>
<% } else { %>
<%- nextStepTitle %>
<% } %>
</a>
<a class="next action-primary" id="next_step_button" href="?skip-first-step=1">
<% if ( hasPaid ) { %>
<%- _.sprintf(
gettext( "Next: %(nextStepTitle)s" ),
{ nextStepTitle: nextStepTitle }
) %>
<% } else { %>
<%- nextStepTitle %>
<% } %>
</a>
</li>
</ol>
</nav>
......
lms/templates/verify_student/make_payment_step.underscore
......@@ -105,6 +105,8 @@
gettext( "You can pay now even if you don't have the following items available, but you will need to have these by %(date)s to qualify to earn a Verified Certificate." ),
{ date: verificationDeadline }
) %>
<% } else if ( !isActive ) { %>
<%- gettext( "You need to activate your account before you can enroll in courses. Check your inbox for an activation email. After you complete activation you can return and refresh this page." ) %>
<% } else if ( !upgrade ) { %>
<%- gettext( "You can pay now even if you don't have the following items available, but you will need to have these to qualify to earn a Verified Certificate." ) %>
<% } %>
......@@ -116,66 +118,60 @@
<div class="requirements-container">
<ul class="list-reqs <% if ( requirements['account-activation-required'] ) { %>account-not-activated<% } %>">
<% if ( requirements['account-activation-required'] ) { %>
<li class="req req-0 req-activate">
<h4 class="title"><%- gettext( "Activate Your Account" ) %></h4>
<div class="placeholder-art">
<i class="icon-envelope-alt"></i>
</div>
<div class="copy">
<p>
<span class="copy-super"><%- gettext( "Check your email" ) %></span>
<span class="copy-sub"><%-
gettext( "You need to activate your account before you can enroll in courses. Check your inbox for an activation email." )
%>
</span>
</p>
</div>
</li>
<% } %>
<li class="req req-0 req-activate">
<h4 class="title"><%- gettext( "Activate Your Account" ) %></h4>
<div class="placeholder-art">
<i class="icon-envelope-alt"></i>
</div>
<% if ( requirements['photo-id-required'] ) { %>
<li class="req req-1 req-id">
<h4 class="title"><%- gettext( "Government-issued Photo ID" ) %></h4>
<div class="placeholder-art">
<i class="icon-list-alt icon-under"></i>
<i class="icon-user icon-over"></i>
</div>
<div class="copy">
<p>
<span class="copy-super"><%- gettext( "Check your email" ) %></span>
</p>
</div>
</li>
<% } else {%>
<% if ( requirements['photo-id-required'] ) { %>
<li class="req req-1 req-id">
<h4 class="title"><%- gettext( "Government-issued Photo ID" ) %></h4>
<div class="placeholder-art">
<i class="icon-list-alt icon-under"></i>
<i class="icon-user icon-over"></i>
</div>
<div class="copy"></div>
</li>
<% } %>
<div class="copy"></div>
</li>
<% } %>
<% if ( requirements['webcam-required'] ) { %>
<li class="req req-2 req-webcam">
<h4 class="title"><%- gettext( "Webcam" ) %></h4>
<div class="placeholder-art">
<i class="icon-facetime-video"></i>
</div>
<% if ( requirements['webcam-required'] ) { %>
<li class="req req-2 req-webcam">
<h4 class="title"><%- gettext( "Webcam" ) %></h4>
<div class="placeholder-art">
<i class="icon-facetime-video"></i>
</div>
<div class="copy"></div>
</li>
<div class="copy"></div>
</li>
<% } %>
<% } %>
</ul>
</div>
<% } %>
<% if ( isActive ) { %>
<nav class="nav-wizard is-ready <% if ( isActive && !upgrade ) { %>center<% } %>">
<% if ( upgrade ) { %>
<a class="next action-primary is-disabled right" id="pay_button">
<%- gettext( "Next: Make payment" ) %>
</a>
<% } else if ( isActive ) { %>
<% } else { %>
<a class="next action-primary is-disabled" id="pay_button">
<%- gettext( "Continue to payment" ) %>
</a>
<% } else { %>
<a class="next action-primary is-disabled" id="activate_button">
<%- gettext( "Activate your account" ) %>
</a>
<% } %>
</nav>
<% } %>
<form id="payment-processor-form"></form>
</div>
lms/templates/verify_student/pay_and_verify.html
......@@ -76,6 +76,7 @@ from verify_student.views import PayAndVerifyView
data-is-active='${is_active}'
></div>
% if is_active:
## Support
<div class="wrapper-content-supplementary">
<aside class="content-supplementary">
......@@ -98,6 +99,7 @@ from verify_student.views import PayAndVerifyView
</ul>
</aside>
</div>
% endif
</section>
</div>
......
lms/templates/verify_student/payment_confirmation_step.underscore
......@@ -83,49 +83,49 @@
<div class="requirements-container">
<ul class="list-reqs <% if ( requirements['account-activation-required'] ) { %>account-not-activated<% } %>">
<% if ( requirements['account-activation-required'] ) { %>
<li class="req req-0 req-activate">
<h4 class="title"><%- gettext( "Activate Your Account" ) %></h4>
<div class="placeholder-art">
<i class="icon-envelope-alt"></i>
</div>
<div class="copy">
<p>
<span class="copy-super"><%- gettext( "Check your email." ) %></span>
<span class="copy-sub"><%-
gettext( "You need to activate your account before you can enroll in courses. Check your inbox for an activation email." )
%>
</span>
</p>
</div>
</li>
<% } %>
<li class="req req-0 req-activate">
<h4 class="title"><%- gettext( "Activate Your Account" ) %></h4>
<div class="placeholder-art">
<i class="icon-envelope-alt"></i>
</div>
<% if ( requirements['photo-id-required'] ) { %>
<li class="req req-1 req-id">
<h4 class="title"><%- gettext( "Photo ID" ) %></h4>
<div class="placeholder-art">
<i class="icon-list-alt icon-under"></i>
<i class="icon-user icon-over"></i>
</div>
<div class="copy">
<p>
<span class="copy-super"><%- gettext( "Check your email" ) %></span>
<span class="copy-sub"><%-
gettext( "You need to activate your account before you can enroll in courses. Check your inbox for an activation email." )
%>
</span>
</p>
</div>
</li>
<% } else { %>
<% if ( requirements['photo-id-required'] ) { %>
<li class="req req-1 req-id">
<h4 class="title"><%- gettext( "Photo ID" ) %></h4>
<div class="placeholder-art">
<i class="icon-list-alt icon-under"></i>
<i class="icon-user icon-over"></i>
</div>
<div class="copy">
<p>
<span class="copy-sub"><%- gettext( "A driver's license, passport, or government-issued ID with your name and picture." ) %></span>
</p>
</div>
</li>
<% } %>
<div class="copy">
<p>
<span class="copy-sub"><%- gettext( "A driver's license, passport, or government-issued ID with your name and picture." ) %></span>
</p>
</div>
</li>
<% } %>
<% if ( requirements['webcam-required'] ) { %>
<li class="req req-2 req-webcam">
<h4 class="title"><%- gettext( "Webcam" ) %></h4>
<div class="placeholder-art">
<i class="icon-facetime-video"></i>
</div>
<% if ( requirements['webcam-required'] ) { %>
<li class="req req-2 req-webcam">
<h4 class="title"><%- gettext( "Webcam" ) %></h4>
<div class="placeholder-art">
<i class="icon-facetime-video"></i>
</div>
<div class="copy"></div>
</li>
<div class="copy"></div>
</li>
<% } %>
<% } %>
</ul>
</div>
......
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