(SOL-837) Added RTL support to payment page
This commit is contained in:
marjev
@@ -1441,7 +1441,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()
|
||||
|
||||
@@ -177,8 +177,6 @@ def show_cart(request):
|
||||
Order.remove_cart_item_from_order(expired_item)
|
||||
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],
|
||||
|
||||
@@ -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'
|
||||
|
||||
@@ -1,336 +1,183 @@
|
||||
// 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;
|
||||
background: none;
|
||||
margin-left: -($baseline*1.5);
|
||||
padding: 0;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
background: none;
|
||||
padding: 0;
|
||||
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;
|
||||
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);
|
||||
|
||||
.code-text {
|
||||
.code-text {
|
||||
@include clearfix();
|
||||
|
||||
a {
|
||||
color: $blue1;
|
||||
font-size: 18px;
|
||||
text-transform: lowercase;
|
||||
font-weight: 600;
|
||||
display: inline-block;
|
||||
padding: ($baseline/2) 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
span{
|
||||
display: inline-block;
|
||||
padding: 9px 0;
|
||||
margin-right: -($baseline);
|
||||
|
||||
b{
|
||||
font-weight: 600;
|
||||
font-size: 24px;
|
||||
padding-left: $baseline;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
}
|
||||
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"]{
|
||||
width: auto;
|
||||
padding: 7px $baseline;
|
||||
height: auto;
|
||||
|
||||
button[type="submit"] {
|
||||
@extend %t-action2;
|
||||
@extend %t-strong;
|
||||
float: none;
|
||||
font-size: 16px;
|
||||
padding: ($baseline*0.35) $baseline;
|
||||
width: auto;
|
||||
height: auto;
|
||||
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;
|
||||
}
|
||||
form{
|
||||
position: relative;
|
||||
}
|
||||
.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;
|
||||
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;
|
||||
float: right;
|
||||
line-height: 20px;
|
||||
color: $dark-gray1;
|
||||
margin-bottom: 0;
|
||||
color: $dark-gray2;
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
// 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;
|
||||
padding: ($baseline/2) 0;
|
||||
text-align: right;
|
||||
font-weight: 300;
|
||||
}
|
||||
h3{
|
||||
font-family: "Open Sans",Verdana,Geneva,sans-serif,sans-serif;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
padding: 30px 20px;
|
||||
|
||||
.disclaimer {
|
||||
@include text-align(right);
|
||||
@extend %t-light;
|
||||
padding: ($baseline/2) 0;
|
||||
color: $light-gray2;
|
||||
}
|
||||
|
||||
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;
|
||||
|
||||
.col-half {
|
||||
@include float(left);
|
||||
@include border-radius(4px);
|
||||
margin-bottom: ($baseline*0.75);
|
||||
background: $light-gray1;
|
||||
padding: 20px;
|
||||
border-radius: 4px;
|
||||
margin-bottom: ($baseline*0.75);
|
||||
min-height: 240px;
|
||||
&:nth-child(even){
|
||||
margin-left: 30px;
|
||||
padding: $baseline;
|
||||
width: 45%;
|
||||
min-height: ($baseline*12);
|
||||
|
||||
// CASE: index of child is even
|
||||
&:nth-child(even) {
|
||||
@include margin-left($baseline*1.5);
|
||||
}
|
||||
.data-group{
|
||||
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;
|
||||
}
|
||||
input{width: 100%;margin-bottom: ($baseline/4);}
|
||||
&:nth-child(4n){
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.error-text{
|
||||
color: $red1;
|
||||
font-size: 12px;
|
||||
display: block;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.gray-bg{
|
||||
background: $light-gray1;
|
||||
border-radius: 3px;
|
||||
padding: 20px 20px 20px 30px;
|
||||
margin: 20px 0;
|
||||
overflow: hidden;
|
||||
.message-left{
|
||||
width: 100%;
|
||||
float: left;
|
||||
line-height: 24px;
|
||||
color: $dark-gray1;
|
||||
b{
|
||||
text-transform: capitalize;
|
||||
}
|
||||
a.blue{
|
||||
margin:0 0 0 20px;
|
||||
i{
|
||||
margin-left: ($baseline/2);
|
||||
|
||||
.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{
|
||||
@extend %t-copy-sub2;
|
||||
display: block;
|
||||
padding-bottom: 0;
|
||||
color: $red1;
|
||||
}
|
||||
|
||||
.gray-bg {
|
||||
@include border-radius(3px);
|
||||
@include padding($baseline, $baseline, $baseline, $baseline*1.5);
|
||||
margin: $baseline 0;
|
||||
background: $light-gray1;
|
||||
overflow: hidden;
|
||||
|
||||
.message-left {
|
||||
@include float(left);
|
||||
@include line-height(16.22);
|
||||
width: 100%;
|
||||
color: $dark-gray1;
|
||||
|
||||
b {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
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) " ";
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
<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>
|
||||
|
||||
@@ -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":
|
||||
|
||||
@@ -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">
|
||||
|
||||
<%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>
|
||||
<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'
|
||||
%>
|
||||
% if is_course_enrollment_closed:
|
||||
<p id="expiry-msg">${expiry_message}</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">
|
||||
<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 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" />
|
||||
<img 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="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>
|
||||
<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="col-3">
|
||||
<a href="#" class="btn-remove" data-item-id="${item.id}"><i class="icon fa fa-times-circle"></i></a>
|
||||
<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>
|
||||
% 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 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, {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">
|
||||
<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>
|
||||
|
||||
</article>
|
||||
% endif
|
||||
</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>
|
||||
<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, {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>
|
||||
<p>
|
||||
${_('After this purchase is complete, a receipt is generated with relative billing details and registration codes for students.')}
|
||||
</p>
|
||||
</div>
|
||||
%endif
|
||||
</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>
|
||||
</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
|
||||
|
||||
@@ -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"/>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user