Skip to content

E
edx-platform
Commit 796541af by Marko Jevtić
Options

Merge pull request #7987 from edx/mjevtic/SOL-837 

(SOL-837) Added RTL support to payment page
parents c914400c f5b166f1
Showing with 834 additions and 837 deletions
lms/djangoapps/shoppingcart/tests/test_views.py
......@@ -1460,7 +1460,7 @@ class ShoppingcartViewsClosedEnrollment(ModuleStoreTestCase):
self.assertIn(reg_item1, context['shoppingcart_items'][0])
self.assertEqual(1, len(context['shoppingcart_items']))
self.assertEqual(True, context['is_course_enrollment_closed'])
self.assertIn(self.testing_course.display_name, context['appended_expired_course_names'])
self.assertIn(self.testing_course.display_name, context['expired_course_names'])
def test_to_check_that_cart_item_enrollment_is_closed_when_clicking_the_payment_button(self):
self.login_user()
......
lms/djangoapps/shoppingcart/views.py
......@@ -177,8 +177,6 @@ def show_cart(request):
Order.remove_cart_item_from_order(expired_item, request.user)
cart.update_order_type()
appended_expired_course_names = ", ".join(expired_cart_item_names)
callback_url = request.build_absolute_uri(
reverse("shoppingcart.views.postpay_callback")
)
......@@ -188,7 +186,7 @@ def show_cart(request):
'shoppingcart_items': valid_cart_item_tuples,
'amount': cart.total_cost,
'is_course_enrollment_closed': is_any_course_expired,
'appended_expired_course_names': appended_expired_course_names,
'expired_course_names': expired_cart_item_names,
'site_name': site_name,
'form_html': form_html,
'currency_symbol': settings.PAID_COURSE_REGISTRATION_CURRENCY[1],
......
lms/envs/devstack.py
......@@ -132,19 +132,6 @@ FEATURES['ENABLE_DASHBOARD_SEARCH'] = True
FEATURES['CERTIFICATES_HTML_VIEW'] = True
#####################################################################
# See if the developer has any local overrides.
try:
from .private import * # pylint: disable=import-error
except ImportError:
pass
#####################################################################
# Lastly, run any migrations, if needed.
MODULESTORE = convert_module_store_setting_if_needed(MODULESTORE)
SECRET_KEY = '85920908f28904ed733fe576320db18cabd7b6cd'
########################## Course Discovery #######################
FEATURES['ENABLE_COURSE_DISCOVERY'] = True
FEATURES['COURSES_ARE_BROWSEABLE'] = True
......@@ -158,3 +145,24 @@ VERIFY_STUDENT["SOFTWARE_SECURE"] = {
"API_ACCESS_KEY": "BBBBBBBBBBBBBBBBBBBB",
"API_SECRET_KEY": "CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC",
}
########################## Shopping cart ##########################
FEATURES['ENABLE_SHOPPING_CART'] = True
FEATURES['STORE_BILLING_INFO'] = True
FEATURES['ENABLE_PAID_COURSE_REGISTRATION'] = True
FEATURES['ENABLE_COSMETIC_DISPLAY_PRICE'] = True
#####################################################################
# See if the developer has any local overrides.
try:
from .private import * # pylint: disable=wildcard-import
except ImportError:
pass
#####################################################################
# Lastly, run any migrations, if needed.
MODULESTORE = convert_module_store_setting_if_needed(MODULESTORE)
SECRET_KEY = '85920908f28904ed733fe576320db18cabd7b6cd'
lms/static/sass/views/_shoppingcart.scss
// lms - views - shopping cart
// ====================
$enrollment-details-width-difference: $baseline*11.85;
$data-input-width-difference: $baseline*12.25;
$date-span-width-difference: $baseline*35;
$cart-list-border: 1px solid $border-color-1;
$hr-border: 1px solid $dark-gray2;
$input-border: 2px solid $dark-gray2;
$discount-border: 2px solid $light-gray1;
$steps-border: 3px solid $light-gray1;
$light-border: 1px solid $gray-l5;
.pull-right {
@include float(right);
}
.fa-caret-right {
// flip the icon for RTL
&:before {
@include rtl {
content: "\f0d9"; // FA icon arrow to the right
}
}
}
.notification {
padding: ($baseline*1.5) ($baseline*1.5) 0 ($baseline*1.5);
}
.error_msg {
margin: $baseline;
border: 1px solid $red;
padding: ($baseline/4);
color: $red;
border: 1px solid $red;
}
.cart-errors{
background: #FFEEF5;
color:#B72667;
text-align: center;
padding: ($baseline/2) 0;
font-family: "Open Sans",Verdana,Geneva,sans-serif,sans-serif;
font-size: 15px;
border-bottom: 1px solid #B72667;
margin-bottom: $baseline;
.cart-errors {
@include text-align(center);
@extend %t-copy-base;
display: none;
}
.cart-list {
padding: ($baseline*1.5);
margin-top: ($baseline*2);
border-radius: 3px;
border: 1px solid $border-color-1;
background-color: $action-primary-fg;
> h2 {
font-size: 1.5em;
color: $base-font-color;
}
.cart-table {
width: 100%;
tr:nth-child(even) {
background-color: $gray-l6;
border-bottom: 1px solid $gray-l5;
}
tr.always-gray{
background: #eee !important;
border-top: 2px solid $white;
}
tr.always-white {
background: $white !important;
td {
padding: ($baseline*1.5) 0 ($baseline/2);
}
}
tr td.cart-total {
padding: ($baseline/2) 0;
span {
display: inline-block;
margin-right: ($baseline*0.75);
margin-left: ($baseline*0.75);
font-weight: bold;
}
}
.cart-headings {
height: 35px;
border-bottom: 1px solid #BEBEBE;
th {
text-align: left;
border-bottom: 1px solid $border-color-1;
&.qty {
width: 100px;
}
&.u-pr {
width: 70px;
}
&.prc {
width: 150px;
}
&.cur {
width: 100px;
text-align: center;
}
&.dsc{
width: 640px;
padding-right: 50px;
text-align: left;
}
}
}
.cart-items {
td {
padding: ($baseline/2) 0;
position: relative;
line-height: normal;
span.old-price {
position: relative;
text-decoration: line-through;
color: red;
font-size: 12px;
top: -1px;
margin-left: 3px;
}
}
td:nth-child(3) {
text-align: center;
}
td:last-child {
width: 50px;
text-align: center;
}
td:nth-child(1) {
line-height: 22px;
text-align: left;
padding-right: $baseline;
}
}
.cart-totals {
td {
&.cart-total-cost {
font-size: 1.25em;
font-weight: bold;
padding: ($baseline/2) 25px;
}
}
}
}
table.order-receipt {
width: 100%;
.order-number {
font-weight: bold;
}
.order-date {
text-align: right;
}
.items-ordered {
padding-top: ($baseline*2.5);
}
tr {
}
th {
text-align: left;
padding: 25px 0 15px 0;
&.qty {
width: 50px;
}
&.u-pr {
width: 100px;
}
&.pri {
width: 125px;
}
&.curr {
width: 75px;
}
}
tr.order-item {
td {
padding-bottom: ($baseline/2);
span.old-price {
text-decoration: line-through !important;
}
}
}
}
margin-bottom: $baseline;
border-bottom: 1px solid $pink;
padding: ($baseline/2) 0;
background: $pink-l5;
color: $pink;
}
#expiry-msg {
padding: 15px;
@extend %t-copy-sub1;
margin-top: ($baseline*0.15);
border-top: $light-border;
background-color: $gray-l5;
margin-top: 3px;
font-family: $sans-serif;
font-size: 14px;
padding: ($baseline*0.75);
text-shadow: 0px 1px 1px $white;
border-top: 1px solid #f0f0f0;
}
.confirm-enrollment {
.confirm-enrollment {
.title {
font-size:24px;
border-bottom:1px solid $gray-l5;
text-align: left;
line-height:70px;
@include text-align(left);
@extend %t-title4;
border-bottom: $light-border;
}
.course-image {
float: left;
width: 223px;
margin-right: ($baseline/2);
@include float(left);
@include margin-right($baseline/2);
width: ($baseline*11.15);
vertical-align: top;
}
.enrollment-details {
margin-bottom: $baseline;
float: left;
width: calc(100% - 237px);
@include float(left);
margin-bottom: ($baseline);
width: calc(100% - #{$enrollment-details-width-difference});
.sub-title {
font-size: 18px;
@extend %t-title5;
text-transform: uppercase;
color: #9b9b93;
color: $gray-l1;
}
.course-date-label {
float: right;
color: #9b9b93;
@include float(right);
color: $gray-l1;
}
.course-dates {
float: right;
font-size: 18px;
@include float(right);
@extend %t-copy-lead1;
}
.course-title {
h1 {
color: #4a4a46;
font-size: 26px;
text-align: left;
font-weight: 600;
}
.course-title h1 {
@include text-align(left);
@extend %t-title4;
@extend %t-strong;
color: $black-t3;
}
.enrollment-text {
color: #9b9b93;
font-family: 'Open Sans',Verdana,Geneva,sans;
@extend %t-copy-base;
line-height: normal;
a {
font-family: 'Open Sans',Verdana,Geneva,sans;
}
color: $gray-l1;
}
}
a.contact-support-bg-color {
background-color: #9b9b9b;
background-image: linear-gradient(#9b9b9b, #9b9b9b);
border: 16px solid #9b9b9b;
box-shadow: 0 1px 0 0 #9b9b9b inset;
text-shadow: 0 1px 0 #9b9b9b;
box-shadow: 0 1px 0 0 $gray-l1 inset;
border: 16px solid $gray-l1;
background-color: $gray-l1;
background-image: linear-gradient($gray-l1, $gray-l1);
text-shadow: 0 1px 0 $gray-l1;
}
a.course-link-bg-color {
background-color: #00A1E5;
border: 16px solid #00A1E5;
box-shadow: 0 1px 0 0 #00A1E5 inset;
text-shadow: 0 1px 0 #00A1E5;
box-shadow: 0 1px 0 0 $blue2 inset;
border: 16px solid $blue2;
background-color: $blue2;
text-shadow: 0 1px 0 $blue2;
}
a.link-button {
text-transform: none;
width: 250px;
background-clip: padding-box;
float: right;
border-radius: 3px;
color: $white;
@include float(right);
@include border-radius(3px);
@include text-align(center);
@extend %t-copy-lead2;
display: inline-block;
padding: 6px 18px;
background-clip: padding-box;
padding: ($baseline*0.3) ($baseline*0.9);
width: ($baseline*12.5);
text-transform: none;
text-decoration: none;
font-size: 24px;
text-align: center;
color: $white;
// STATE: hover
&:hover {
background: $m-blue-d2;
border: 16px solid $m-blue-d2;
box-shadow: 0 1px 0 0 $m-blue-d2 inset;
box-shadow: 0 1px 0 0 $blue inset;
border: 16px solid $blue;
background: $blue;
}
}
input[type="submit"], button {
text-transform: none;
width: 450px;
height: 70px;
background-clip: padding-box;
background-color: #00a1e5;
background-image: linear-gradient(#00A1E5,#00A1E5);
float: right;
border: 1px solid #00A1E5;
border-radius: 3px;
box-shadow: 0 1px 0 0 #00A1E5 inset;
color: $white;
button[type="submit"] {
@include float(right);
@include border-radius(3px);
@extend %t-copy-lead2;
display: inline-block;
padding: 7px 18px;
box-shadow: 0 1px 0 0 $blue2 inset;
border: 1px solid $blue2;
background-color: $blue2;
background-image: linear-gradient($blue2, $blue2);
background-clip: padding-box;
padding: ($baseline*0.35) ($baseline*0.9);
width: ($baseline*22.5);
height: ($baseline*3.5);
text-shadow: 0 1px 0 $blue2;
text-transform: none;
text-decoration: none;
text-shadow: 0 1px 0 #00A1E5;
font-size: 24px;
color: $white;
// STATE: hover
&:hover {
background: $m-blue-d2;
box-shadow: none;
background: $blue;
}
}
}
.shopping-cart {
a.blue {
@include border-radius(3px);
@extend %t-copy-lead2;
@extend %t-regular;
display: inline-block;
margin: ($baseline/2) 0 $baseline 0;
background: $blue2;
color: white;
padding: $baseline ($baseline*2);
border-radius: 3px;
font-size: 24px;
font-weight: 400;
margin: ($baseline/2) 0 $baseline;
color: white;
// STATE: hover
&:hover {
text-decoration: none;
}
......@@ -341,21 +188,21 @@
}
input[type="text"], input[type="email"], select {
font-family: "Open Sans",Verdana,Geneva,sans-serif,sans-serif;
font-style: normal;
border: 2px solid $dark-gray2;
@extend %t-action2;
@extend %t-strong;
border: $input-border;
padding: ($baseline*0.4) ($baseline*0.6);
width: ($baseline*13);
height: auto;
padding: 8px 12px;
font-weight: 600;
width: 260px;
font-size: 16px;
font-style: normal;
// STATE: focus
&:focus {
border-color: $dark-gray2;
box-shadow: none;
outline: none;
border-color: $dark-gray2;
}
// CASE: has class error
&.error {
border-color: $red1;
}
......@@ -370,125 +217,139 @@
}
h1 {
font-size: 24px;
color: $dark-gray1;
text-align: left;
padding: ($baseline*1.5) 0;
@include text-align(left);
@extend %t-title4;
margin: ($baseline/2) 0 0 0;
letter-spacing: 0px;
padding: ($baseline*1.5) 0;
letter-spacing: 0;
color: $dark-gray1;
}
ul.steps{
padding: 0;
margin: 0;
list-style: none;
border-top: 3px solid $light-gray1;
border-bottom: 3px solid $light-gray1;
ul.steps {
@extend %ui-no-list;
border-top: $steps-border;
border-bottom: $steps-border;
li {
@include font-size(20);
display: inline-block;
padding: 26px ($baseline*1.5);
margin: 0 ($baseline*1.5);
font-size: 20px;
font-weight: 100;
position: relative;
margin: 0 ($baseline*1.5);
padding: ($baseline*1.3) ($baseline*1.5);
color: $dark-gray1;
font-weight: 100;
//STATE: active
&.active {
font-weight: 400;
border-bottom: 3px solid $light-gray1;
@extend %t-regular;
border-bottom: $steps-border;
}
//CASE: is first child
&:first-child {
padding-left: ($baseline*1.5);
margin-left: 0;
@include margin-left(0);
@include padding-left($baseline*1.5);
}
//CASE: is last child
&:last-child {
padding-right: 30px;margin-right: 0;
&:after{display: none;}
@include margin-right(0);
@include padding-right($baseline*1.5);
&:after {
display: none;
}
}
&:after {
content: "\f178";
@include right(-$baseline*2);
@include ltr {content: "\f178";}
@include rtl {content: "\f177";}
position: absolute;
top: ($baseline*1.3);
color: $light-gray;
font-family: FontAwesome;
right: -40px;
color: #ddd;
font-weight: 100;
}
}
}
hr {
border-top: 1px solid $dark-gray2;
border-top: $hr-border;
}
.user-data {
margin: $baseline 0;
.image {
width: 220px;
float: left;
@include float(left);
width: ($baseline*11);
img {
width: 100%;
height: auto;
height: 100%;
}
}
.data-input {
width: calc(100% - 245px);
float: left;
margin-left: 25px;
@include float(left);
@include margin-left($baseline*1.25);
width: calc(100% - #{$data-input-width-difference});
h3, h3 span {
font-family: "Open Sans",Verdana,Geneva,sans-serif,sans-serif;
font-size: 16px;
@extend %t-title6;
padding: 0;
text-transform: uppercase;
color: $light-gray2;
padding: 0;
line-height: 20px;
}
h1 {
font-size: 24px;
color: $dark-gray1;
@include float(left);
@extend %t-title4;
padding: 0 0 ($baseline/2) 0;
width: ($baseline*35);
text-transform: capitalize;
color: $dark-gray1;
// Adding this content to ensure proper display of closing parentheses
&:after {
content: "\200E‎";
}
span {
font-size: 16px;
@extend %t-copy-base;
}
width: 700px;
float: left;
}
span.date {
width: calc(100% - 700px);
float: right;
text-align: right;
@include float(right);
@include text-align(right);
width: calc(100% - #{$date-span-width-difference});
}
hr {
border-top: 1px solid $dark-gray2;
clear: both;
border-top: $hr-border;
}
.three-col {
.col-1 {
width: 450px;
float: left;
font-size: 16px;
@include float(left);
@extend %t-copy-base;
@extend %t-regular;
padding-top: ($baseline*0.55);
width: ($baseline*22.5);
text-transform: uppercase;
color: $light-gray2;
padding-top: 11px;
font-weight: 400;
.price {
span {
@include padding-left($baseline);
@extend %t-copy-lead2;
color: $dark-gray1;
font-size: 24px;
padding-left: $baseline;
}
// CASE: has class green
&.green {
color: $green1;
}
......@@ -500,79 +361,92 @@
}
.col-2 {
width: 350px;
float: left;
line-height: 44px;
@include float(left);
@include line-height(29.73);
margin-top: ($baseline*0.15);
width: ($baseline*17.5);
text-transform: uppercase;
color: $light-gray2;
margin-top: 3px;
.numbers-row {
position: relative;
label{
font-size: 16px;
label {
@extend %t-copy-base;
@extend %t-strong;
cursor: text;
text-transform: uppercase;
color: $light-gray2;
font-family: "Open Sans",Verdana,Geneva,sans-serif,sans-serif;
font-weight: 400;
font-style: normal;
}
.counter {
margin-left: 25px;
border-radius: 3px;
padding: 6px ($baseline*1.5) 6px ($baseline/2);
@include margin-left($baseline*1.25);
@include border-radius(3px);
@include padding($baseline*0.3, $baseline*1.5, $baseline*0.3, $baseline/2);
display: inline-block;
border: 2px solid $dark-gray2;
border: $input-border;
input[type="text"] {
width: 75px;
border: none;
@include text-align(center);
@extend %t-copy-lead2;
@extend %t-strong;
box-shadow: none;
color: #666;
font-size: 25px;
font-style: normal;
font-family: "Open Sans",Verdana,Geneva,sans-serif,sans-serif;
font-weight: 600;
padding: 8px 0;
border: none;
padding: ($baseline*0.4) 0;
width: ($baseline*3.75);
height: auto;
text-align: center;
color: $black-t2;
font-style: normal;
//STATE: focus
&:focus {
outline: none;
@extend %no-outline;
}
}
}
.button {
button {
@include margin-left(-$baseline*1.5);
position: absolute;
box-shadow: none;
border: none;
background: none;
margin-left: -($baseline*1.5);
padding: 0;
border: none;
box-shadow: none;
height: ($baseline*0.85);
text-shadow: none;
height: 17px;
i {
@extend %t-icon3;
color: $dark-gray2;
font-size: 24px;
span{display: none;}
span {
display: none;
}
}
//CASE: has class inc
&.inc {
top: 9px;
@extend %no-outline;
top: ($baseline*0.45);
width: auto;
}
//CASE: has class dec
&.dec {
top: 30px;
height: 22px;
@extend %no-outline;
top: ($baseline*1.5);
width: auto;
height: ($baseline*1.1);
}
}
//STATE: is disabled
&.disabled {
.counter {
border: 2px solid $gray;
//STATE: hover
&:hover {
cursor: not-allowed;
}
......@@ -582,21 +456,20 @@
}
}
.button {
i {
color: $gray-l3;
}
.button i {
color: $gray-l3;
}
}
.updateBtn {
@include float(right);
@include padding($baseline*1.25, $baseline*1.75, $baseline*1.25, 0);
@extend %t-action2;
display: inline-block;
float: right;
font-size: 15px;
padding: 25px 35px 25px 0;
// STATE: focus
&:focus {
outline: none;
@extend %no-outline;
}
}
......@@ -606,29 +479,36 @@
}
}
.disable-numeric-counter{
.disable-numeric-counter {
pointer-events: none;
}
}
.col-3 {
width: 40px;
float: right;
padding-top: 13px;
@include float(right);
padding-top: ($baseline*0.65);
width: ($baseline*2);
a.btn-remove {
float: right;
button.btn-remove {
@include float(right);
opacity: 0.8;
box-shadow: none;
border: none;
background: none;
width: auto;
height: auto;
text-shadow: none;
i {
@include line-height(27.02);
@extend %t-icon3;
color: $dark-gray2;
font-size: 24px;
line-height: 40px;
}
//STATE: hover
&:hover {
text-decoration: none;
opacity: 1;
text-decoration: none;
}
}
}
......@@ -637,390 +517,466 @@
}
.discount {
border-bottom: 2px solid $light-gray1;
border-top: 2px solid $light-gray1;
margin: $baseline 0;
padding: 17px $baseline 15px;
min-height: 45px;
.code-text {
a {
color: $blue1;
font-size: 18px;
text-transform: lowercase;
font-weight: 600;
display: inline-block;
padding: ($baseline/2) 0;
cursor: pointer;
}
margin: $baseline 0;
border-top: $discount-border;
border-bottom: $discount-border;
padding: ($baseline*0.85) ($baseline) ($baseline*0.75) ($baseline);
min-height: ($baseline*2.25);
span{
display: inline-block;
padding: 9px 0;
margin-right: -($baseline);
b{
font-weight: 600;
font-size: 24px;
padding-left: $baseline;
letter-spacing: 0;
}
.code-text {
@include clearfix();
a {
@extend %t-copy-lead1;
@extend %t-strong;
display: inline-block;
cursor: pointer;
padding: ($baseline/2) 0;
color: $blue1;
text-transform: lowercase;
}
span {
@include margin-right(-$baseline);
display: inline-block;
padding: ($baseline*0.45) 0;
b {
@include padding-left($baseline);
@extend %t-copy-lead2;
@extend %t-strong;
letter-spacing: 0;
}
}
}
.code-input {
@include float(left);
display: inline-block;
input[type="text"] {
font-family: "Open Sans",Verdana,Geneva,sans-serif,sans-serif;
font-style: normal;
border: 2px solid $dark-gray2;
@extend %t-copy-base;
@extend %t-strong;
border: $input-border;
padding: ($baseline*0.4) ($baseline*0.6);
width: ($baseline*13);
height: auto;
padding: 8px 12px;
font-weight: 600;
width: 260px;
font-style: normal;
// STATE: focus
&:focus {
border-color: $dark-gray2;
box-shadow: none;
border-color: $dark-gray2;
}
// CASE: has class error
&.error {
border-color: $red1;
}
}
.error-text {
color: $red1;
font-size: 12px;
@extend %t-copy-sub2;
display: block;
padding-bottom: 0;
color: $red1;
}
input[type="submit"] {
padding: 9px 35px;
}
button[type="submit"] {
padding: ($baseline*0.45) ($baseline*1.75);
width: auto;
height: ($baseline*2.25);
}
}
.code-applied{
.code-applied {
display: inline-block;
.green{
.green {
@include margin-right($baseline);
@extend %t-strong;
color: $green1;
font-weight: 600;
margin-right: $baseline;
}
input[type="submit"]{
padding: 9px 35px;
background: white;
border: 2px solid $dark-gray2;
color: $dark-gray2;
button[type="submit"] {
box-shadow: none;
border: $input-border;
background: $white;
padding: ($baseline*0.45) ($baseline*1.75);
text-shadow: none;
&:hover{
background: white;
color: $dark-gray2;
// STATE: hover
&:hover {
border: $input-border;
background: $white;
color: $dark-gray1;
border: 2px solid $dark-gray2;
}
}
}
input[type="submit"]{
button[type="submit"] {
@extend %t-action2;
@extend %t-strong;
float: none;
padding: ($baseline*0.35) $baseline;
width: auto;
padding: 7px $baseline;
height: auto;
float: none;
font-size: 16px;
letter-spacing: 0;
font-weight: 600;
&:hover{
background: #1F8FC2;
border: 1px solid transparent;
// STATE: hover
&:hover {
box-shadow: none;
border: 1px solid transparent;
background: $blue;
}
}
}
.col-two{
overflow: hidden;
padding-bottom: $baseline;
border-bottom: 2px solid $gray-l5;
.row-inside {
float: left;
width: 50%;
padding: ($baseline/2) 0;
b{
font-size: 14px;
width: 190px;
display: inline-block;
margin-right: $baseline;
font-family: "Open Sans",Verdana,Geneva,sans-serif,sans-serif;
vertical-align: top;
}
label{
width: 300px;
margin: 0;
display: inline-block;
font-family: "Open Sans",Verdana,Geneva,sans-serif,sans-serif;
font-style: normal;
font-size: 14px;
word-wrap: break-word;
}
}
.col-two {
border-bottom: 2px solid $gray-l5;
padding-bottom: $baseline;
overflow: hidden;
.row-inside {
@include float(left);
padding: ($baseline/2) 0;
width: 50%;
b {
@include margin-right($baseline);
@extend %t-copy-sub1;
display: inline-block;
width: ($baseline*9.5);
vertical-align: top;
}
.col-1 {
width: 35%;
float: left;
label {
@extend %t-copy-sub1;
display: inline-block;
margin: 0;
width: ($baseline*60);
word-wrap: break-word;
font-style: normal;
}
}
span.radio-group {
display: inline-block;
border: 2px solid #979797;
border-radius: 3px;
margin: ($baseline/2) 0;
margin-left: ($baseline/4);
.col-1 {
@include float(left);
width: 35%;
&:first-child {
margin-left: ($baseline*0.75);
}
span.radio-group {
@include margin($baseline/2, 0, $baseline/2, $baseline/4);
@include border-radius(3px);
display: inline-block;
border: $input-border;
&.blue {
border-color: $blue2;
// CASE: is first child
&:first-child {
@include margin-left($baseline*0.75);
}
label {
color: $blue2;
}
}
// CASE: has class blue
&.blue {
border-color: $blue2;
label {
font-family: "Open Sans",Verdana,Geneva,sans-serif,sans-serif;
font-size: 16px;
font-style: normal;
color: $dark-gray2;
font-weight: 400;
padding: 8px 15px 8px 6px;
display: inline-block;
margin-bottom: 0;
}
}
input[type="radio"]{
margin-left: ($baseline/2);
color: $blue2;
}
}
.col-2{
width: 65%;
float: right;
input[type="submit"]{
width: auto;
padding: 18px 60px 22px 30px;
height: auto;
font-size: 24px;
letter-spacing: 0;
font-weight: 600;
margin-left: ($baseline*0.75);
&#register{
padding: 18px 30px;
}
&:hover{background: $m-blue-d2;box-shadow: none;}
}
p{
font-family: "Open Sans",Verdana,Geneva,sans-serif,sans-serif;
padding: 13px 0;
text-align: right;
label {
@include padding($baseline*0.4, $baseline*0.75, $baseline*0.4, $baseline*0.3);
@extend %t-copy-base;
@extend %t-regular;
display: inline-block;
margin-bottom: 0;
color: $dark-gray2;
font-style: normal;
}
form{
position: relative;
}
input[type="radio"] {
@include margin-left($baseline/2);
}
}
.col-2 {
@include float(right);
width: 65%;
button[type="submit"] {
@include float(right);
@include margin-left($baseline*0.75);
@include padding($baseline*0.75, $baseline*3, $baseline*1.1, $baseline*1.5);
@extend %t-copy-lead2;
@extend %t-strong;
width: auto;
height: ($baseline*3.35);
letter-spacing: 0;
// CASE: has id register
&#register {
padding: ($baseline*0.9) ($baseline*1.5);
}
.fa-caret-right {
position: absolute;
right: 30px;
top: 22px;
color: white;
font-size: 24px;
}
label.pull-right{
font-family: "Open Sans",Verdana,Geneva,sans-serif,sans-serif;
font-style: normal;
text-align: right;
padding: 10px 25px 10px;
display: inline-block;
float: right;
line-height: 20px;
color: $dark-gray1;
// STATE: hover
&:hover {
box-shadow: none;
background: $blue;
}
}
p {
@include text-align(right);
@extend %t-copy-base;
padding: ($baseline*0.65) 0;
}
form {
position: relative;
}
.fa-caret-right {
@include right($baseline*1.5);
@extend %t-icon3;
position: absolute;
top: ($baseline*1.1);
color: $white;
}
}
.disclaimer{
color: $light-gray2;
}
.disclaimer {
@include text-align(right);
@extend %t-light;
padding: ($baseline/2) 0;
text-align: right;
font-weight: 300;
color: $light-gray2;
}
h3{
font-family: "Open Sans",Verdana,Geneva,sans-serif,sans-serif;
font-size: 16px;
font-weight: 400;
padding: 30px 20px;
h3 {
@extend %t-title6;
@extend %t-regular;
padding: ($baseline*1.5) $baseline;
color: $dark-gray1;
}
.billing-data{
.billing-data {
display: table;
width: 100%;
h3{
padding: 12px 0px;
color: $dark-gray1;
font-size: 17px;
h3 {
@extend %t-title5;
margin-bottom: ($baseline/4);
padding: ($baseline*0.6) 0;
color: $dark-gray1;
}
.row{
.row {
display: table-row;
}
.col-half{
width: 45%;
float: left;
background: $light-gray1;
padding: 20px;
border-radius: 4px;
margin-bottom: ($baseline*0.75);
min-height: 240px;
&:nth-child(even){
margin-left: 30px;
}
.data-group{
.col-half {
@include float(left);
@include border-radius(4px);
margin-bottom: ($baseline*0.75);
label{
display: block;
font-family: "Open Sans",Verdana,Geneva,sans-serif,sans-serif;
font-size: 16px;
font-style: normal;
font-weight: 400;
color: $dark-gray2;
background: $light-gray1;
padding: $baseline;
width: 45%;
min-height: ($baseline*12);
// CASE: index of child is even
&:nth-child(even) {
@include margin-left($baseline*1.5);
}
input{width: 100%;margin-bottom: ($baseline/4);}
&:nth-child(4n){
margin-right: 0;
.data-group {
margin-bottom: ($baseline*0.75);
label {
@extend %t-copy-base;
@extend %t-regular;
display: block;
color: $dark-gray2;
font-style: normal;
}
input {
@extend %t-copy-base;
margin-bottom: ($baseline/4);
width: 100%;
}
// CASE: index of child is a multiple of 4
&:nth-child(4n) {
@include margin-right(0);
}
}
}
}
}
.error-text{
color: $red1;
font-size: 12px;
@extend %t-copy-sub2;
display: block;
padding-bottom: 0;
color: $red1;
}
.gray-bg{
.gray-bg {
@include border-radius(3px);
@include padding($baseline, $baseline, $baseline, $baseline*1.5);
margin: $baseline 0;
background: $light-gray1;
border-radius: 3px;
padding: 20px 20px 20px 30px;
margin: 20px 0;
overflow: hidden;
.message-left{
.message-left {
@include float(left);
@include line-height(16.22);
width: 100%;
float: left;
line-height: 24px;
color: $dark-gray1;
b{
b {
text-transform: capitalize;
}
a.blue{
margin:0 0 0 20px;
i{
margin-left: ($baseline/2);
a.blue {
@include margin(0, 0, 0, $baseline);
i {
@include margin-left($baseline/2);
}
}
.mt-7 {
display: block;
margin-top: 7px;
margin-top: ($baseline*0.35);
}
}
}
.bordered-bar{
border-bottom: 2px solid $light-gray1;
border-top: 2px solid $light-gray1;
.bordered-bar {
margin-bottom: $baseline;
padding: 20px;
h2{
color: $dark-gray1;
font-family: "Open Sans",Verdana,Geneva,sans-serif,sans-serif;
font-weight: bold;
border-top: $discount-border;
border-bottom: $discount-border;
padding: $baseline;
h2 {
@xtend %t-title5;
@extend %t-strong;
margin-bottom: 0;
font-size: 17px;
span{
padding-left: 60px;
color: $dark-gray1;
span {
@include padding-left($baseline*3);
text-transform: capitalize;
.blue-link{
.blue-link {
@extend %t-copy-sub1;
color: $blue2;
font-size: 14px;
&:hover{
// STATE: hover
&:hover {
text-decoration: none;
}
}
}
}
}
.pattern{
.pattern {
margin-top: ($baseline/2);
margin-bottom: $baseline;
padding:20px;
padding: $baseline;
color: $dark-gray1;
h2 {
font-family: $sans-serif;
}
}
hr.border{
border-top: 2px solid $light-gray1;
hr.border {
border-top: $discount-border;
}
.no-border{border: none !important; }
table.course-receipt{
width: 94%;
.no-border {
border: none !important;
}
table.course-receipt {
margin: auto;
margin-bottom: 27px;
thead{
th{
color: $light-gray2;
font-weight: normal;
text-align: center;
text-transform: uppercase;
padding: 8px 0;
border-bottom: 1px solid $dark-gray2;
&:first-child{
text-align: left;
}
&:last-child{
text-align: center;
}
margin-bottom: ($baseline*1.35);
width: 94%;
thead th {
@include text-align(center);
border-bottom: $hr-border;
padding: ($baseline*0.4) 0;
text-transform: uppercase;
color: $light-gray2;
font-weight: normal;
// CASE: has first child
&:first-child {
@include text-align(left);
}
// CASE: has last child
&:last-child {
@include text-align(center);
}
}
tr{
tr {
border-bottom: 1px solid $light-gray1;
&:last-child{
// CASE: has last child
&:last-child {
border-bottom: none;
}
td{
padding: 15px 0;
text-align: center;
color: $dark-gray1;
td {
@include text-align(center);
padding: ($baseline*0.75) 0;
width: 30%;
&:nth-child(2){width: 20%;}
&:nth-child(3){width: 40%;}
&:first-child{
text-align: left;
font-size: 18px;
color: $dark-gray1;
// CASE: index of child is a multiple of 2
&:nth-child(2) {
width: 20%;
}
// CASE: index of child is a multiple of 3
&:nth-child(3) {
width: 40%;
}
// CASE: has first child
&:first-child {
@extend %t-copy-lead1;
@include text-align(left);
text-transform: capitalize;
}
&:last-child{
text-align: center;
span{
padding: 2px 10px;
font-size: 13px;
color: #fff;
// CASE: has last child
&:last-child {
@include text-align(center);
span {
@include border-radius(3px);
@include text-align(center);
@extend %t-copy-sub1;
display: inline-block;
border-radius: 3px;
min-width: 55px;
text-align: center;
&.red{
padding: ($baseline/10) ($baseline/2);
min-width: ($baseline*2.75);
color: $white;
// CASE: has class red
&.red {
background: rgb(231, 92, 92);
}
&.green{
// CASE: has class green
&.green {
background: rgb(108, 204, 108);
}
}
......@@ -1031,42 +987,41 @@
}
.empty-cart {
padding: $baseline 0;
background: $light-gray1;
text-align: center;
border-radius: 3px;
@include border-radius(3px);
@include text-align(center);
margin: $baseline 0;
background: $light-gray1;
padding: $baseline 0;
h2 {
font-size: 24px;
font-family: "Open Sans",Verdana,Geneva,sans-serif,sans-serif;
font-weight: 600;
letter-spacing: 0;
color: #9b9b9b;
text-align: center;
@include text-align(center);
@extend %t-title4;
@extend %t-strong;
margin-top: $baseline;
text-transform: initial;
margin-bottom: ($baseline/4);
text-transform: initial;
letter-spacing: 0;
color: $gray-l1;
}
p {
font-size: 14px;
font-family: $sans-serif;
color: #9d9d9d;
text-align: center;
@include text-align(center);
@extend %t-copy-sub1;
text-shadow: 0 1px 1px $white;
color: $gray-l1;
}
a.blue {
@include border-radius(3px);
@extend %t-copy-lead2;
@extend %t-regular;
display: inline-block;
margin: ($baseline/2) 0 $baseline 0;
background: $blue2;
color: white;
padding: $baseline ($baseline*2);
border-radius: 3px;
font-size: 24px;
font-weight: 400;
margin: ($baseline/2) 0 $baseline;
color: white;
// STATE: hover
&:hover {
text-decoration: none;
}
......@@ -1086,13 +1041,13 @@
}
.shopping-cart {
font-size: 14px;
padding-right: ($baseline*2);
@include padding-right($baseline*2);
font-size: 14px;
.gray-bg {
margin: 0;
padding: ($baseline/2) 0 $baseline 0;
background: none;
padding: ($baseline/2) 0 $baseline 0;
.message-left {
width: 100%;
......@@ -1100,37 +1055,24 @@
}
.bordered-bar {
h2 {
font-size: 14px;
}
span {
float: right;
@include float(right);
}
}
.user-data {
.data-input {
h1 {
font-size: 18px;
}
}
.user-data .data-input h1 {
font-size: 18px;
}
table.course-receipt {
tr {
td {
a {
&:before {
content:" " attr(data-base-url) " ";
display: inline-block;}
}
.redemption-url {
&:before {
display: inline-block;
content:" " attr(data-base-url) " ";
}
}
......
lms/templates/shoppingcart/cybersource_form.html
<form action="${action}" method="post">
% for pk, pv in params.iteritems():
<input type="hidden" name="${pk}" value="${pv}" />
% endfor
<%! from django.utils.translation import ugettext as _ %>
<form action="${action}" method="post">
% for pk, pv in params.iteritems():
<input type="hidden" name="${pk}" value="${pv}" aria-hidden="true" />
% endfor
<i class="icon fa fa-caret-right"></i><input type="submit" value="Payment"/>
</form>
<button type="submit">${_('Payment')}<i class="icon fa fa-caret-right" aria-hidden="true"></i></button>
</form>
lms/templates/shoppingcart/receipt.html
......@@ -79,7 +79,7 @@ from courseware.courses import course_image_url, get_course_about_section, get_c
% if reg_code_info['is_redeemed']:
<td>${reg_code_info['redemption_url']}</td>
% else:
<td><a href="${reg_code_info['redemption_url']}" data-base-url="${site_name}">${reg_code_info['redemption_url']}</a></td>
<td><a class="redemption-url" href="${reg_code_info['redemption_url']}" data-base-url="${site_name}">${reg_code_info['redemption_url']}</a></td>
% endif
<td>
% if reg_code_info['is_redeemed']:
......@@ -304,17 +304,16 @@ from courseware.courses import course_image_url, get_course_about_section, get_c
</span>
</h3>
<h1>${_(" {course_name} ").format(course_name=course.display_name)}
<span class="pull-right">
% if course_start_time:
${course_start_time}
%endif
-
% if course_end_time:
${course_end_time}
%endif
</span>
</h1>
<h1>${course.display_name}</h1>
<span class="pull-right">
% if course_start_time:
${course_start_time}
%endif
-
% if course_end_time:
${course_end_time}
%endif
</span>
<hr/>
<div class="three-col">
% if item.status == "purchased":
......
lms/templates/shoppingcart/shopping_cart.html
......@@ -6,143 +6,192 @@ from courseware.courses import course_image_url, get_course_about_section
from django.core.urlresolvers import reverse
from edxmako.shortcuts import marketing_link
from django.utils.translation import ugettext as _
from django.utils.translation import ungettext
%>
<section class="wrapper confirm-enrollment shopping-cart cart-view">
<%block name="custom_content">
% if is_course_enrollment_closed:
<%
# Translators: course_names is a comma-separated list of one or more course names
expiry_message = ungettext(
"{course_names} has been removed because the enrollment period has closed.",
"{course_names} have been removed because the enrollment period has closed.",
len(expired_course_names)
).format(
course_names=", ".join(expired_course_names),
)
%>
% endif
<div class="container">
% if shoppingcart_items:
<%block name="billing_details_highlight">
% if order.order_type == 'business':
<li class="billing">${_('Billing Details')}</li>
% else:
<li class="billing hidden">${_('Billing Details')}</li>
% endif
</%block>
% if is_course_enrollment_closed:
<p id="expiry-msg">${expiry_message}</p>
% endif
<%
discount_applied = False
order_type = 'personal'
%>
<article class="wrapper confirm-enrollment shopping-cart cart-view" aria-label="${_('Shopping Cart')}">
% for item, course in shoppingcart_items:
<%
## Translators: currency_symbol is a symbol indicating type of currency, ex "$".
## This string would look like this when all variables are in:
## "$500.00"
unit_cost = _(
"{currency_symbol}{price}"
).format(
currency_symbol=currency_symbol,
price="{0:0.2f}".format(item.unit_cost)
)
%>
% if loop.index > 0 :
<hr>
%endif
% if item.order.order_type == 'business':
<% order_type = 'business' %>
%endif
<div class="user-data">
<div class="clearfix">
<div class="image">
<img src="${course_image_url(course)}"
alt="${course.display_number_with_default | h} ${get_course_about_section(course, 'title')} ${_('Cover Image')}" />
<%block name="custom_content">
<div class="container">
% if shoppingcart_items:
<%block name="billing_details_highlight">
% if order.order_type == 'business':
<li class="billing">${_('Billing Details')}</li>
% else:
<li class="billing hidden">${_('Billing Details')}</li>
% endif
</%block>
% if is_course_enrollment_closed:
<p id="expiry-msg">${_('{course_names} has been removed because the enrollment period has closed.').format(course_names=appended_expired_course_names)}</p>
% endif:
<%
discount_applied = False
order_type = 'personal'
%>
<section class="wrapper confirm-enrollment shopping-cart cart-view">
% for item, course in shoppingcart_items:
% if loop.index > 0 :
<hr>
%endif
% if item.order.order_type == 'business':
<% order_type = 'business' %>
%endif
<div class="user-data">
<div class="clearfix">
<div class="image">
<img style="width: 100%; height: 100%;" src="${course_image_url(course)}"
alt="${course.display_number_with_default | h} ${get_course_about_section(course, 'title')} Cover Image" />
</div>
<div class="data-input">
<h3>${_('Registration for:')} <span class="pull-right">${_('Course Dates:')}</span></h3>
<h1>${ course.display_name }</h1><span class="pull-right">${course.start_datetime_text()} - ${course.end_datetime_text()}</span>
<hr />
<div class="three-col">
<div class="col-1">
% if item.list_price != None:
<% discount_applied = True %>
<div class="price">${_('Price per student:')} <span class="line-through"> ${currency_symbol}${"{0:0.2f}".format(item.list_price)}</span></div>
<div class="price green">${_('Discount Applied:')} <span> ${currency_symbol}${"{0:0.2f}".format(item.unit_cost)} </span></div>
% else:
<div class="price">${_('Price per student:')} <span> ${currency_symbol}${"{0:0.2f}".format(item.unit_cost)}</span></div>
% endif
</div>
<div class="col-2">
<div class="numbers-row">
<label for="students">${_('Students:')}</label>
<div class="counter">
<input maxlength="3" title="Input qty and press enter." max="999" type="text" name="students" value="${item.qty}" id="${item.id}" data-unit-cost="${item.unit_cost}" data-qty="${item.qty}">
</div>
<div class="data-input">
## Translators: "Registration for:" is followed by a course name
<h3>${_('Registration for:')}
<span class="pull-right">${_('Course Dates:')}</span>
</h3>
<h1>${ course.display_name }</h1><span class="pull-right">${course.start_datetime_text()} - ${course.end_datetime_text()}</span>
<hr>
<div class="three-col">
<div class="col-1">
% if item.list_price != None:
<% discount_applied = True %>
<div class="price">${_('Price per student:')}
<span class="line-through">
## Translators: currency_symbol is a symbol indicating type of currency, ex "$".
## This string would look like this when all variables are in:
## "$500.00"
${_("{currency_symbol}{price}").format(currency_symbol=currency_symbol, price="{0:0.2f}".format(item.list_price))}
</span>
</div>
<div class="price green">${_('Discount Applied:')}
<span>${unit_cost}</span>
</div>
% else:
<div class="price">${_('Price per student:')}
<span>${unit_cost}</span>
</div>
% endif
</div>
<div class="col-2">
<div class="numbers-row">
<label for="students">${_('Students:')}</label>
<div class="counter">
<input maxlength="3" title="${_('Input quantity and press enter.')}" max="999" type="text" name="students" value="${item.qty}" id="${item.id}" data-unit-cost="${item.unit_cost}" data-qty="${item.qty}">
</div>
<button class="inc button"><i class="icon fa fa-caret-up" aria-hidden="true"><span>+</span></i></button><button class="dec button"><i class="icon fa fa-caret-down"></i></button>
<!--<a name="updateBtn" class="updateBtn hidden" id="updateBtn-${item.id}" href="#">update</a>-->
<span class="error-text hidden" id="students-${item.id}" aria-hidden="true"></span>
</div>
</div>
<div class="inc button"><i class="icon fa fa-caret-up"><span>+</span></i></div><div class="dec button"><i class="icon fa fa-caret-down"></i></div>
<!--<a name="updateBtn" class="updateBtn hidden" id="updateBtn-${item.id}" href="#">update</a>-->
<span class="error-text hidden" id="students-${item.id}"></span>
</div>
<div class="col-3">
<button href="#" class="btn-remove" data-item-id="${item.id}"><i class="icon fa fa-times-circle" aria-hidden="true"></i></button>
</div>
</div>
</div>
</div>
<div class="col-3">
<a href="#" class="btn-remove" data-item-id="${item.id}"><i class="icon fa fa-times-circle"></i></a>
</div>
% endfor
<div class="discount">
<div class="code-text">
% if not discount_applied:
<div class="code-input">
<input type="text" placeholder="${_('discount or activation code')}" id="input_code">
<button type="submit" class="blue" id="submit-code">${_('Apply')}</button>
<span class="error-text hidden" id="code" ></span>
</div>
% else:
<div class="code-applied">
<span class="green"><i class="icon fa fa-check-square-o" aria-hidden="true"></i>${_('code has been applied')}</span>
<button type="submit" class="blue-border" id="submit-reset-redemption">${_('Reset')}</button>
</div>
% endif
<span class="pull-right">${_('TOTAL:')}
<b id="total-amount" data-amount="${'{price:0.2f}'.format(price=amount)}">
## Translators: currency_symbol l is a symbol indicating type of currency, ex "$". currency_abbr is
## an abbreviation for the currency, ex "USD". This string would look like this when all variables are in:
## "$500.00 USD"
${_("{currency_symbol}{price} {currency_abbr}").format(currency_symbol=currency_symbol, price="{0:0.2f}".format(amount), currency_abbr=currency.upper())}
</b>
</span>
</div>
</div>
</div>
</div>
</div>
% endfor
<div class="discount">
<div class="code-text">
% if not discount_applied:
<div class="code-input">
<input type="text" placeholder="discount or activation code" id="input_code">
<input type="submit" value="Apply" class="blue" id="submit-code">
<span class="error-text hidden" id="code" ></span>
</div>
% else:
<div class="code-applied">
<span class="green"><i class="icon fa fa-check-square-o"></i>${_('code has been applied')}</span>
<input type="submit" value="Reset" class="blue-border" id="submit-reset-redemption">
</div>
%endif
<span class="pull-right">${_('TOTAL:')} <b id="total-amount" data-amount="${'{0:0.2f}'.format(amount)}">${currency_symbol}${"{0:0.2f}".format(amount)} ${currency.upper()}</b></span>
</div>
</div>
<div class="col-two">
<div class="col-2 relative">
% if order_type == 'business':
<div name="billing">
<input type="submit" value = "Billing Details" name="billing-details"><i class="icon fa fa-caret-right"></i>
<div class="col-two">
<div class="col-2 relative">
% if order_type == 'business':
<div name="billing">
<button type="submit" name="billing-details">${_('Billing Details')}<i class="icon fa fa-caret-right" aria-hidden="true"></i></button>
<p>
${_('After this purchase is complete, a receipt is generated with relative billing details and registration codes for students.')}
</p>
</div>
<div name="payment" class="hidden">
<div id="processor_form">
${form_html}
</div>
<p>
${_('After this purchase is complete, a receipt is generated with relative billing details and registration codes for students.')}
${_('After this purchase is complete, {username} will be enrolled in this course.').format(username=u'<br/><b>{username}</b>'.format(username=order.user.username))}
</p>
</div>
<div name="payment" class="hidden">
<div id="processor_form">
${form_html}
</div>
<p>
${_('After this purchase is complete, {username} will be enrolled in this course.').format(username=u'<br/><b>{username}</b>'.format(username=order.user.username))}
</p>
</div>
% else:
<div name="payment">
${form_html}
<p>
${_('After this purchase is complete, {username} will be enrolled in this course.').format(username=u'<br/><b>{username}</b>'.format(username=order.user.username))}
</p>
</div>
<div name="billing" class="hidden">
<input type="submit" value = "Billing Details" name="billing-details"><i class="icon fa fa-caret-right"></i>
</div>
% else:
<div name="payment">
${form_html}
<p>
${_('After this purchase is complete, a receipt is generated with relative billing details and registration codes for students.')}
${_('After this purchase is complete, {username} will be enrolled in this course.').format(username=u'<br/><b>{username}</b>'.format(username=order.user.username))}
</p>
</div>
%endif
</div>
<div name="billing" class="hidden">
<button type="submit" name="billing-details">${_('Billing Details')}<i class="icon fa fa-caret-right" aria-hidden="true"></i></button>
<p>
${_('After this purchase is complete, a receipt is generated with relative billing details and registration codes for students.')}
</p>
</div>
%endif
</div>
</div>
</article>
% else:
<article aria-label="${_('Empty Cart')}">
<div class="empty-cart" >
<h2>${_('Your Shopping cart is currently empty.')}</h2>
% if is_course_enrollment_closed:
<p>${expiry_message}</p>
% endif
<a href="${marketing_link('COURSES')}" class="blue">${_('View Courses')}</a>
</div>
</div>
</section>
% else:
<div class="empty-cart" >
<h2>${_('Your Shopping cart is currently empty.')}</h2>
% if is_course_enrollment_closed:
<p>${_('{course_names} has been removed because the enrollment period has closed.').format(course_names=appended_expired_course_names)}</p>
% endif
<a href="${marketing_link('COURSES')}" class="blue">${_('View Courses')}</a>
</div>
% endif
</div>
</article>
% endif
</div>
</section>
<form id='refresh_tracker'>
<input id="reloadValue" type="hidden" name="reloadValue" value="" />
</form>
......@@ -168,7 +217,7 @@ from django.utils.translation import ugettext as _
location.reload(true);
}
$('a.btn-remove').click(function(event) {
$('button.btn-remove').click(function(event) {
event.preventDefault();
var post_url = "${reverse('shoppingcart.views.remove_item')}";
$.post(post_url, {id:$(this).data('item-id')})
......@@ -222,7 +271,7 @@ from django.utils.translation import ugettext as _
})
});
$("input[name='billing-details']").click(function(event){
$("button[name='billing-details']").click(function(event){
// check if there is code exists in the inout_code field
// before going to billing details page
// if exists then trigger click event of the apply code button
......
lms/templates/shoppingcart/shopping_cart_flow.html
......@@ -12,17 +12,17 @@ from django.utils.translation import ugettext as _
<%block name="bodyextra">
<div class="container">
<section class="wrapper confirm-enrollment shopping-cart">
<header class="wrapper confirm-enrollment shopping-cart">
<h1> ${_("{platform_name} - Shopping Cart").format(platform_name=microsite.get_value('platform_name', settings.PLATFORM_NAME))}</h1>
% if shoppingcart_items:
<ul class="steps">
<ul class="steps" aria-label="${_('Steps')}">
<li <%block name="review_highlight"/>>${_('Review')}</li>
<%block name="billing_details_highlight"/>
<li <%block name="payment_highlight"/>>${_('Payment')}</li>
<li <%block name="confirmation_highlight"/>>${_('Confirmation')}</li>
</ul>
%endif
</section>
</header>
</div>
<%block name="custom_content"/>
......
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