Andal.LND/edx-platform
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: updates to Value Prop Track Selection from QA (#28665)

Browse Source 
REV-2133
This commit is contained in:
julianajlk
2021-09-07 14:23:35 -04:00
committed by GitHub
parent 4078443969
commit fd3290e00d
2 changed files with 87 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

119
lms/static/sass/views/_track_selection.scss
View File

@@ -2,9 +2,8 @@
max-width: 946px;
}
.col-6 {
width: calc((100% - 30px) / 2);
margin: 0 auto;
.page-header h3 {
color: #001B1E;
}
.verification-process h3 {
@@ -15,8 +14,12 @@
line-height: 1.8rem;
}
.track-selection-choice, .verified-note {
margin: 0 1rem;
}
.track-selection-choice li {
margin-bottom: 26px;
margin-bottom: 1.25rem;
}
.track-selection-audit {
@@ -41,25 +44,28 @@
position: relative;
}
.trophy-icon {
padding: 10px;
.award-icon {
padding: 12px;
color: #EFF8FA;
position: absolute;
}
.upgrade-button {
text-align: center
.track-selection-button {
text-align: center;
}
.upgrade-button button {
background: #00262B;
.track-selection-button button {
width: 90%;
height: 40px;
font-size: 16px;
font-size: 1rem;
box-shadow: none;
border-radius: 0px;
position: relative;
margin-bottom: 1.5rem;
padding: 8px;
}
#track_selection_upgrade {
background: #00262B;
}
#track_selection_upgrade:hover {
@@ -68,21 +74,13 @@
color: #fff;
}
.audit-button {
text-align: center;
}
.audit-button button {
#track_selection_audit {
color: #00262B;
width: 90%;
height: 40px;
font-size: 16px;
box-shadow: none;
border-radius: 0px;
border-color: #F2F0EF;
background: white;
position: relative;
margin-bottom: 1.5rem;
position: absolute;
bottom: 0;
left: 5%;
}
#track_selection_audit:hover {
@@ -92,24 +90,32 @@
border-radius: 0px;
}
.certificate-container-bottom {
border: 1px solid #707070;
display: flex;
.verified-note {
display: grid;
grid-template-columns: 5% 95%;
order: 1;
margin-bottom: 2rem;
margin-top: -1px;
padding: 18px;
float: left;
border: 1px solid #707070;
border-top: 0;
padding: 1rem;
}
.extra-verified-info {
.note-info {
float: right;
font-size: 14px;
margin-left: 12px;
line-height: 24px;
line-height: 1.5rem;
}
.note-icon {
display: grid;
place-items: center;
}
.choice-bullets {
padding: 0 3rem 0 2rem;
line-height: 24px;
padding: 0 3rem 1rem 2rem;
line-height: 1.5rem;
font-size: 14px;
}
@@ -135,15 +141,16 @@ a:not(.btn), a:visited:not(.btn) {
}
.price-display {
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: 20px;
line-height: 1.25rem;
float: right;
margin: 0.75rem;
color: #454545;
}
.triangle-overlay {
.corner-overlay {
border-color: #002121 transparent transparent #002121;
border-style: solid;
border-width: 45px;
@@ -152,23 +159,16 @@ a:not(.btn), a:visited:not(.btn) {
position: absolute;
}
.info-icon {
margin-left: 0.1rem;
width: 1rem;
vertical-align: middle;
.collapsible {
color: #00688d !important;
font-weight: 700;
font-size: 14px !important;
}
.collapsible-item {
letter-spacing: -0.3px;
}
.collapsible {
display: none;
text-decoration: underline;
color: #00262B;
cursor: pointer;
}
.popover-icon {
color: #00262B;
position: relative;
@@ -215,7 +215,7 @@ a:not(.btn), a:visited:not(.btn) {
border-style: solid;
border-color: transparent #fff transparent transparent;
left: -14px;
top: 24px;
top: 1.5rem;
content: '';
}
@@ -227,15 +227,28 @@ a:not(.btn), a:visited:not(.btn) {
.collapsible {
margin-bottom: 1.3rem;
}
}
@media (max-width: map-get($grid-breakpoints, 'md')) {
.col-6 {
width: 100%;
.corner-overlay {
border-width: 35px !important;
}
.audit-button button {
margin-top: 0;
.award-icon {
padding: 6px !important;
}
.award-icon svg {
width: 25px !important;
}
.price-display {
font-size: 14px;
}
}
@media (min-width: map-get($grid-breakpoints, 'md')) {
.track-selection-container {
display: grid;
grid-template-columns: 50% 50%;
}
}

39
lms/templates/course_modes/track_selection.html
View File

@@ -50,7 +50,8 @@ from openedx.core.djangolib.js_utils import js_escaped_string
};
});
$(function(){
$('.collapsible').click(function(){
$('.collapsible').click(function(e){
e.preventDefault();
$('.collapsible').css({"display":"none"});
$('.collapsible-item').css({"display":"list-item"});
});
@@ -72,19 +73,20 @@ from openedx.core.djangolib.js_utils import js_escaped_string
<section class="wrapper m-4 mb-5 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">
<header class="page-header">
<h3 class="py-md-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">
<div class="row">
<div class="track-selection-container">
% if "verified" in modes:
<div class="track-selection-choice track-selection-certificate col-6 mb-5">
<div class="track-selection-choice track-selection-certificate mr-md-2">
<div class="certificate-container">
<div class="triangle-overlay"></div>
<span class="trophy-icon">
<div class="corner-overlay"></div>
<span class="award-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>
@@ -101,7 +103,7 @@ from openedx.core.djangolib.js_utils import js_escaped_string
start_bold=HTML('<b>'),
end_bold=HTML('</b>'),
)}</li>
<div class="collapsible">${_("Show more")}</div>
<button class="btn btn-link collapsible">${_("Show more")}</button>
<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>'),
@@ -123,8 +125,9 @@ from openedx.core.djangolib.js_utils import js_escaped_string
)}</li>
</ul>
</div>
<ul class="list-actions">
<li class="action action-select upgrade-button">
<li class="action action-select track-selection-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>
@@ -142,17 +145,17 @@ from openedx.core.djangolib.js_utils import js_escaped_string
</%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>
<div class="verified-note mr-md-2">
<span class="note-icon"><i class="fa fa-lightbulb-o fa-lg" aria-hidden="true"></i></span>
<div class="note-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>
% endif
<div class="track-selection-choice track-selection-audit col-6">
<p class="float-right m-3 text-uppercase font-weight-bold">${_("Free")}</p>
<div class="track-selection-choice track-selection-audit ml-md-3">
<p class="float-right m-3 text-uppercase price-display">${_("Free")}</p>
<div class="choice-title"><h4>${_("Access this course")}</h4></div>
<div class="choice-bullets">
<ul>
@@ -172,7 +175,7 @@ from openedx.core.djangolib.js_utils import js_escaped_string
</ul>
</div>
<ul class="list-actions">
<li class="action action-select audit-button">
<li class="action action-select track-selection-button">
<input type="hidden" name="contribution" />
<button id="track_selection_audit" type="submit" name="audit_mode">
<span>${_('Continue')}</span>