Skip to content
Snippets Groups Projects
Unverified Commit 8d018fa7 authored by julianajlk's avatar julianajlk Committed by GitHub
Browse files

Add Value Prop Track Selection template and CSS (#28418) 

REV-2133
parent f7d41c4a
Branches
Tags release-2021-08-20-16.19
No related merge requests found
Hide whitespace changes
Inline Side-by-side
lms/static/sass/views/_track_selection.scss 0 → 100644
+ 243
− 0
View file @ 8d018fa7
@import "extends";
.container-fluid {
max-width: 946px;
}
.col-6 {
width: calc((100% - 30px) / 2);
margin: 0 auto;
}
.verification-process h3 {
color: $gray-700;
font-size: 1.4rem;
text-align: center;
font-weight: 700;
line-height: 1.8rem;
}
.track-selection-choice li {
margin-bottom: 26px;
}
.track-selection-audit {
background-color: white;
border: 1px solid $gray-500;
position: relative;
float: right;
}
.track-selection-certificate {
float: left;
}
.track-selection-certificate .choice-bullets li:last-child {
margin-bottom: 2rem;
}
.certificate-container {
background-color: $info-100;
border: 1px solid $gray-500;
height: auto;
position: relative;
}
.trophy-icon {
padding: 10px;
color: $info-100;
position: absolute;
}
.upgrade-button {
text-align: center
}
.upgrade-button button {
background: $primary-500;
width: 90%;
height: 40px;
font-size: 16px;
box-shadow: none;
border-radius: 0px;
position: relative;
margin-bottom: 1.5rem;
}
#track_selection_upgrade:hover {
background: $primary-300;
border-color: transparent;
color: #fff;
}
.audit-button {
text-align: center;
}
.audit-button button {
color: $primary-500;
width: 90%;
height: 40px;
font-size: 16px;
box-shadow: none;
border-radius: 0px;
border-color: $light-300;
background: white;
position: relative;
margin-bottom: 1.5rem;
}
#track_selection_audit:hover {
background: $primary-500;
border-color: $primary-500;
color: #fff;
border-radius: 0px;
}
.certificate-container-bottom {
border: 1px solid $gray-500;
display: flex;
margin-top: -1px;
padding: 18px;
float: left;
}
.extra-verified-info {
float: right;
font-size: 14px;
margin-left: 12px;
line-height: 24px;
}
.choice-bullets {
padding: 0 3rem 0 2rem;
line-height: 24px;
font-size: 14px;
}
a:not(.btn), a:visited:not(.btn) {
color: $gray-700;
}
.choice-bullets li {
color: $gray-700;
}
.choice-title {
width: 100%;
display: inline-block;
}
.choice-title h4 {
text-align: center;
font-weight: 700;
color: $gray-700;
line-height: 28px;
font-size: 22px;
}
.price-display {
font-style: normal;
font-weight: 700;
line-height: 20px;
float: right;
margin: 0.75rem;
color: $gray-700;
}
.triangle-overlay {
border-color: $primary-700 transparent transparent $primary-700;
border-style: solid;
border-width: 45px;
height: 0;
width: 0;
position: absolute;
}
.info-icon {
margin-left: 0.1rem;
width: 1rem;
vertical-align: middle;
}
.collapsible-item {
letter-spacing: -0.3px;
}
.collapsible {
display: none;
text-decoration: underline;
color: $primary-500;
cursor: pointer;
}
.popover-icon {
color: $primary-500;
position: relative;
}
.popover {
visibility: hidden;
width: 132px;
background-color: #fff;
color: $gray-700;
border: 1px solid #B9BABE;
border-radius: 6px;
text-align: left;
padding: 0.8rem 1rem;
position: absolute;
z-index: 1;
top: -22px;
left: 178%;
}
.popover a {
text-decoration: underline;
}
.visible {
visibility: visible;
}
.popover:before {
position: absolute;
display: inline-block;
left: -18px;
top: 22px;
content: '';
border-width: 9px;
border-style: solid;
border-color: transparent #B9BABE transparent transparent;
}
.popover:after {
position: absolute;
display: inline-block;
border-width: 7px;
border-style: solid;
border-color: transparent #fff transparent transparent;
left: -14px;
top: 24px;
content: '';
}
@media (max-width: map-get($grid-breakpoints, 'sm')) {
.choice-bullets {
padding: 0 2rem 0 1rem;
}
.collapsible {
margin-bottom: 1.3rem;
}
}
@media (max-width: map-get($grid-breakpoints, 'md')) {
.col-6 {
width: 100%;
}
.audit-button button {
margin-top: 0;
}
}
\ No newline at end of file
lms/templates/course_modes/track_selection.html 0 → 100644
+ 189
− 0
View file @ 8d018fa7
<%page expression_filter="h"/>
<%inherit file="../main.html" />
<%namespace name='static' file='/static_content.html'/>
<%!
from django.utils.translation import ugettext as _
from openedx.core.djangolib.markup import HTML, Text
from django.urls import reverse
from openedx.core.djangolib.js_utils import js_escaped_string
%>
<%namespace name='static' file='/static_content.html'/>
<%block name="bodyclass">step-select-track verification-process</%block>
<%block name="pagetitle">
${_("Enroll In {course_name} | Upgrade Now").format(course_name=course_name)}
</%block>
<%block name="js_extra">
<script type="text/javascript">
// popover icon toggle
$(function(){
$('body').click(function (e) {
e.stopPropagation();
$('.popover').css({"visibility": "hidden", "opacity": 0});
});
$('.popover-icon').click(function(e){
e.stopPropagation();
if ($('.popover').css("visibility") == "hidden" || $('.popover').css("visibility") == "" ) {
$('.popover').css({"visibility":"visible", "opacity": 1});
} else {
$('.popover').css({"visibility":"hidden", "opacity": 0});
}
});
});
// resize window
var onresize = function(e) {
width = e.target.outerWidth;
if(width <= 768) {
$('.collapsible-item').css({"display":"none"});
$('.collapsible').css({"display":"block"});
};
}
window.addEventListener("resize", onresize);
// responsive: show more
$(function(){
if($(window).width() <= 768) {
$('.collapsible-item').css({"display":"none"});
$('.collapsible').css({"display":"block"});
};
});
$(function(){
$('.collapsible').click(function(){
$('.collapsible').css({"display":"none"});
$('.collapsible-item').css({"display":"list-item"});
});
});
</script>
</%block>
<%static:webpack entry="Currency">
new Currency();
</%static:webpack>
<%block name="header_extras">
<link rel="stylesheet" type="text/css" href="${static.url('paragon/static/paragon.min.css')}" />
</%block>
<%block name="content">
<div id="currency_data" value="${currency_data}"></div>
<div class="container-md container-fluid mx-auto">
<section class="wrapper m-4 m-md-0">
<div class="wrapper-register-choose wrapper-content-main">
<article class="register-choose content-main">
<header class="page-header content-main">
<h3 class="py-3">
${_("Choose a path for your course in")} ${_(course_name)}
</h3>
</header>
<form class="form-register-choose mb-4 mt-0" method="post" name="enrollment_mode_form" id="enrollment_mode_form">
% if "verified" in modes:
<div class="track-selection-choice track-selection-certificate col-6 mb-5">
<div class="certificate-container">
<div class="triangle-overlay"></div>
<span class="trophy-icon">
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M26.6667 3.33333H23.3333V0H6.66667V3.33333H3.33333C1.5 3.33333 0 4.83333 0 6.66667V8.33333C0 12.5833 3.2 16.05 7.31667 16.5667C8.36667 19.0667 10.6167 20.95 13.3333 21.5V26.6667H6.66667V30H23.3333V26.6667H16.6667V21.5C19.3833 20.95 21.6333 19.0667 22.6833 16.5667C26.8 16.05 30 12.5833 30 8.33333V6.66667C30 4.83333 28.5 3.33333 26.6667 3.33333ZM3.33333 8.33333V6.66667H6.66667V13.0333C4.73333 12.3333 3.33333 10.5 3.33333 8.33333ZM26.6667 8.33333C26.6667 10.5 25.2667 12.3333 23.3333 13.0333V6.66667H26.6667V8.33333Z" fill="#EFF8FA"/>
</svg>
</span>
<p class="price-display">${currency_symbol}${min_price} ${currency}</p>
<div class="choice-title"><h4>${_("Earn a certificate")}</h4></div>
<div class="choice-bullets">
<ul>
<li>${Text(_("Showcase a {link_start}verified certificate{link_end} of completion on your resumé to advance your career")).format(
link_start=HTML('<b><u><a class="verified" href="https://www.edx.org/verified-certificate" target="_blank">'),
link_end=HTML('</a></u></b>'),
)}</li>
<li>${Text(_("Get {start_bold}access to all course activities{end_bold}, including both graded and non-graded assignments, while the course is running")).format(
start_bold=HTML('<b>'),
end_bold=HTML('</b>'),
)}</li>
<div class="collapsible">${_("Show more")}</div>
<li class="collapsible-item">
${Text(_("{start_bold}Full access{end_bold} to course content and materials, even after the course ends")).format(
start_bold=HTML('<b>'),
end_bold=HTML('</b>'),
)}
<span class="popover-icon">
<i class="fa fa-question-circle" aria-hidden="true"></i>
<span class="popover">
${Text(_("{link_start}Learn more{link_end} about course access")).format(
link_start=HTML('<u><a href="https://support.edx.org/hc/en-us/articles/360013426573-What-are-the-differences-between-audit-free-and-verified-paid-courses-" target="_blank">'),
link_end=HTML('</a></u>'),
)}
</span>
</span>
</li>
<li class="collapsible-item">${Text(_("Support our {start_bold}non-profit mission{end_bold} to increase access to high-quality education for everyone, everywhere")).format(
start_bold=HTML('<b>'),
end_bold=HTML('</b>'),
)}</li>
</ul>
</div>
<ul class="list-actions">
<li class="action action-select upgrade-button">
<input type="hidden" name="contribution" value="${price_before_discount or min_price}" />
<button id="track_selection_upgrade" type="submit" name="verified_mode" class="mt-2">
<span>${_('Upgrade Now')}</span>
</buton>
</li>
</ul>
<%static:require_module_async module_name="js/commerce/track_ecommerce_events" class_name="TrackECommerceEvents">
var upgradeLink = $("#track_selection_upgrade");
TrackECommerceEvents.trackUpsellClick(upgradeLink, 'track_selection', {
pageName: "track_selection",
linkType: "button",
linkCategory: "(none)"
});
</%static:require_module_async>
</div>
<div class="certificate-container-bottom">
<span class="mt-1"><i class="fa fa-lightbulb-o fa-lg" aria-hidden="true"></i></span>
<div class="extra-verified-info">${Text(_("Studies show that those who choose this option are {start_bold}more engaged and motivated{end_bold} to complete their courses")).format(
start_bold=HTML('<b>'),
end_bold=HTML('</b>'),
)}</div>
</div>
</div>
% endif
<div class="track-selection-choice track-selection-audit col-6">
<p class="float-right m-3"><b>${_("FREE")}</b></p>
<div class="choice-title"><h4>${_("Access this course")}</h4></div>
<div class="choice-bullets">
<ul>
<li>${Text(_("Get temporary access to {start_bold}non-graded{end_bold} activities, including discussion forums and non-graded assignments")).format(
start_bold=HTML('<b>'),
end_bold=HTML('</b>'),
)}</li>
<li>${Text(_("Get {start_bold}temporary access{end_bold} to the course material, including videos and readings")).format(
start_bold=HTML('<b>'),
end_bold=HTML('</b>'),
)}</li>
% if audit_access_deadline:
<li>${_("Access expires and all progress will be lost on")} ${_(audit_access_deadline)}</li>
% else:
<li>${_("Access expires and all progress will be lost")}</li>
% endif
</ul>
</div>
<ul class="list-actions audit-button">
<li class="action action-select">
<input type="hidden" name="contribution" />
<button id="track_selection_audit" type="submit" name="audit_mode">
<span>${_('Continue')}</span>
</button>
</li>
</ul>
</div>
<input type="hidden" name="csrfmiddlewaretoken" value="${ csrf_token }">
</form>
</article>
</div>
</section>
</div>
</%block>
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