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