From 9b8d6206c5b02118d510da4e064bcebff7109982 Mon Sep 17 00:00:00 2001 From: Chris Rodriguez Date: Wed, 27 May 2015 16:22:56 -0400 Subject: [PATCH 1/4] Accessibility tweaks and patching RTL --- lms/static/sass/views/_shoppingcart.scss | 44 ++++++++++-- .../shoppingcart/cybersource_form.html | 2 +- lms/templates/shoppingcart/shopping_cart.html | 67 ++++++++++++------- .../shoppingcart/shopping_cart_flow.html | 4 +- 4 files changed, 86 insertions(+), 31 deletions(-) diff --git a/lms/static/sass/views/_shoppingcart.scss b/lms/static/sass/views/_shoppingcart.scss index 12e9ef5365..4e86d9b9d0 100644 --- a/lms/static/sass/views/_shoppingcart.scss +++ b/lms/static/sass/views/_shoppingcart.scss @@ -225,7 +225,7 @@ $light-border: 1px solid $gray-l5; color: $dark-gray1; } - ul.steps { + ol.steps { @extend %ui-no-list; border-top: $steps-border; border-bottom: $steps-border; @@ -262,9 +262,15 @@ $light-border: 1px solid $gray-l5; } &:after { - @include right(-$baseline*2); - @include ltr {content: "\f178";} - @include rtl {content: "\f177";} + @include ltr { + right: -($baseline*2); + content: "\f178"; + } + + @include rtl { + left: -($baseline*2); + content: "\f177"; + } position: absolute; top: ($baseline*1.3); color: $light-gray; @@ -303,6 +309,34 @@ $light-border: 1px solid $gray-l5; color: $light-gray2; } + .course-registration-title, + .course-dates-title { + @extend %t-title6; + display: block; + padding: 0; + text-transform: uppercase; + color: $light-gray2; + } + + .course-display-name, + .course-display-dates { + @extend %t-title4; + display: block; + color: $dark-gray2; + } + + .course-title-info { + display: inline-block; + width: 60%; + } + + .course-meta-info { + @include float(right); + @include text-align(right); + display: inline-block; + width: 35%; + } + h1 { @include float(left); @extend %t-title4; @@ -1036,7 +1070,7 @@ $light-border: 1px solid $gray-l5; content: none !important; } - ul.steps, a.blue.pull-right, .bordered-bar span.pull-right, .left.nav-global.authenticated { + ol.steps, a.blue.pull-right, .bordered-bar span.pull-right, .left.nav-global.authenticated { display: none; } diff --git a/lms/templates/shoppingcart/cybersource_form.html b/lms/templates/shoppingcart/cybersource_form.html index fec4231628..7a176b5a2a 100644 --- a/lms/templates/shoppingcart/cybersource_form.html +++ b/lms/templates/shoppingcart/cybersource_form.html @@ -1,7 +1,7 @@ <%! from django.utils.translation import ugettext as _ %>
% for pk, pv in params.iteritems(): - + % endfor diff --git a/lms/templates/shoppingcart/shopping_cart.html b/lms/templates/shoppingcart/shopping_cart.html index 26d3570a93..478ea89cf0 100644 --- a/lms/templates/shoppingcart/shopping_cart.html +++ b/lms/templates/shoppingcart/shopping_cart.html @@ -73,10 +73,14 @@ from django.utils.translation import ungettext
## Translators: "Registration for:" is followed by a course name -

${_('Registration for:')} - ${_('Course Dates:')} +

+ ${_('Registration for:')} + ${ course.display_name }

-

${ course.display_name }

${course.start_datetime_text()} - ${course.end_datetime_text()} +

+ ${_('Course Dates:')} + ${ course.start_datetime_text() } - ${ course.end_datetime_text() } +

@@ -100,19 +104,29 @@ from django.utils.translation import ungettext % endif
-
- +
+
- +
- + + - +
- +
@@ -124,10 +138,11 @@ from django.utils.translation import ungettext
% if not discount_applied: -
+
+ - +
% else:
@@ -149,31 +164,37 @@ from django.utils.translation import ungettext
% if order_type == 'business':
- -

- ${_('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.')} +

From 8f8f1184a58eba49832cd9351147022592733586 Mon Sep 17 00:00:00 2001 From: Chris Rodriguez Date: Tue, 16 Jun 2015 07:34:07 -0400 Subject: [PATCH 2/4] PR feedback --- lms/static/sass/views/_shoppingcart.scss | 14 +++++++++----- lms/templates/shoppingcart/shopping_cart.html | 2 +- 2 files changed, 10 insertions(+), 6 deletions(-) diff --git a/lms/static/sass/views/_shoppingcart.scss b/lms/static/sass/views/_shoppingcart.scss index 4e86d9b9d0..bb98360139 100644 --- a/lms/static/sass/views/_shoppingcart.scss +++ b/lms/static/sass/views/_shoppingcart.scss @@ -225,7 +225,7 @@ $light-border: 1px solid $gray-l5; color: $dark-gray1; } - ol.steps { + .steps { @extend %ui-no-list; border-top: $steps-border; border-bottom: $steps-border; @@ -309,6 +309,13 @@ $light-border: 1px solid $gray-l5; color: $light-gray2; } + .course-display-name, + .course-display-dates { + @extend %t-title4; + display: block; + color: $dark-gray2; + } + .course-registration-title, .course-dates-title { @extend %t-title6; @@ -318,11 +325,8 @@ $light-border: 1px solid $gray-l5; color: $light-gray2; } - .course-display-name, .course-display-dates { - @extend %t-title4; - display: block; - color: $dark-gray2; + @include clearfix(); } .course-title-info { diff --git a/lms/templates/shoppingcart/shopping_cart.html b/lms/templates/shoppingcart/shopping_cart.html index 478ea89cf0..9410e85f39 100644 --- a/lms/templates/shoppingcart/shopping_cart.html +++ b/lms/templates/shoppingcart/shopping_cart.html @@ -79,7 +79,7 @@ from django.utils.translation import ungettext

${_('Course Dates:')} - ${ course.start_datetime_text() } - ${ course.end_datetime_text() } + ${ course.start_datetime_text() } - ${ course.end_datetime_text() }

From 3561b5c7a0a9d29705e621b2081d6742aa7f66cf Mon Sep 17 00:00:00 2001 From: Chris Rodriguez Date: Tue, 16 Jun 2015 10:46:11 -0400 Subject: [PATCH 3/4] PR feedback and receiept template updates --- lms/static/sass/views/_shoppingcart.scss | 39 ++++++++++++------------ lms/templates/shoppingcart/receipt.html | 35 +++++++++++---------- 2 files changed, 39 insertions(+), 35 deletions(-) diff --git a/lms/static/sass/views/_shoppingcart.scss b/lms/static/sass/views/_shoppingcart.scss index bb98360139..bf853766a5 100644 --- a/lms/static/sass/views/_shoppingcart.scss +++ b/lms/static/sass/views/_shoppingcart.scss @@ -309,11 +309,16 @@ $light-border: 1px solid $gray-l5; color: $light-gray2; } - .course-display-name, - .course-display-dates { - @extend %t-title4; - display: block; - color: $dark-gray2; + .course-title-info { + display: inline-block; + width: 60%; + } + + .course-meta-info { + @include float(right); + @include text-align(right); + display: inline-block; + width: 35%; } .course-registration-title, @@ -325,22 +330,17 @@ $light-border: 1px solid $gray-l5; color: $light-gray2; } + .course-display-name, + .course-display-dates { + @extend %t-title4; + display: block; + color: $dark-gray2; + } + .course-display-dates { @include clearfix(); } - .course-title-info { - display: inline-block; - width: 60%; - } - - .course-meta-info { - @include float(right); - @include text-align(right); - display: inline-block; - width: 35%; - } - h1 { @include float(left); @extend %t-title4; @@ -907,6 +907,7 @@ $light-border: 1px solid $gray-l5; span { @include padding-left($baseline*3); text-transform: capitalize; + letter-spacing: 0; .blue-link { @extend %t-copy-sub1; @@ -928,7 +929,7 @@ $light-border: 1px solid $gray-l5; color: $dark-gray1; h2 { - font-family: $sans-serif; + @extend %t-title5; } } @@ -1033,7 +1034,7 @@ $light-border: 1px solid $gray-l5; h2 { @include text-align(center); - @extend %t-title4; + @extend %t-title5; @extend %t-strong; margin-top: $baseline; margin-bottom: ($baseline/4); diff --git a/lms/templates/shoppingcart/receipt.html b/lms/templates/shoppingcart/receipt.html index fce4e140de..ee555e9b2c 100644 --- a/lms/templates/shoppingcart/receipt.html +++ b/lms/templates/shoppingcart/receipt.html @@ -280,7 +280,7 @@ from courseware.courses import course_image_url, get_course_about_section, get_c
% endif -
+ % for item, course in shoppingcart_items: % if loop.index > 0 :
@@ -292,8 +292,13 @@ from courseware.courses import course_image_url, get_course_about_section, get_c alt="${course.display_number_with_default | h} ${get_course_about_section(course, 'title')} Image"/>
-

${_("Registration for")}: - + +

+ ${_('Registration for:')} + ${ course.display_name } +

+

+ <% course_start_time = course.start_datetime_text() course_end_time = course.end_datetime_text() @@ -302,19 +307,17 @@ from courseware.courses import course_image_url, get_course_about_section, get_c ${_("Course Dates")}: %endif -

- -

${course.display_name}

- - % if course_start_time: - ${course_start_time} - %endif - - - % if course_end_time: - ${course_end_time} - %endif - -
+ + % if course_start_time: + ${course_start_time} + %endif + - + % if course_end_time: + ${course_end_time} + %endif + +

+
% if item.status == "purchased":
From 926f2c03553ce321a8fe6213e0c6db8c11a9d31f Mon Sep 17 00:00:00 2001 From: Chris Rodriguez Date: Tue, 16 Jun 2015 10:47:23 -0400 Subject: [PATCH 4/4] Removing element selectors --- lms/static/sass/views/_shoppingcart.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lms/static/sass/views/_shoppingcart.scss b/lms/static/sass/views/_shoppingcart.scss index bf853766a5..1666421ab2 100644 --- a/lms/static/sass/views/_shoppingcart.scss +++ b/lms/static/sass/views/_shoppingcart.scss @@ -1075,7 +1075,7 @@ $light-border: 1px solid $gray-l5; content: none !important; } - ol.steps, a.blue.pull-right, .bordered-bar span.pull-right, .left.nav-global.authenticated { + .steps, .blue.pull-right, .bordered-bar .pull-right, .left.nav-global.authenticated { display: none; }