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

Merge pull request #8218 from edx/clrux/UX-2252-accessibility-fixes-payment-page

Browse Source 
Accessibility tweaks and patching RTL
This commit is contained in:
Chris
2015-06-16 12:14:20 -04:00
parent ceb75c659b 926f2c0355
commit b621870f27
5 changed files with 112 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
lms/static/sass/views/_shoppingcart.scss
View File

@@ -225,7 +225,7 @@ $light-border: 1px solid $gray-l5;
color: $dark-gray1;
}
ul.steps {
.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;
@@ -298,6 +304,38 @@ $light-border: 1px solid $gray-l5;
color: $light-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,
.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-display-dates {
@include clearfix();
}
h1 {
@include float(left);
@extend %t-title4;
@@ -866,6 +904,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;
@@ -887,7 +926,7 @@ $light-border: 1px solid $gray-l5;
color: $dark-gray1;
h2 {
font-family: $sans-serif;
@extend %t-title5;
}
}
@@ -999,7 +1038,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);
@@ -1040,7 +1079,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 {
.steps, .blue.pull-right, .bordered-bar .pull-right, .left.nav-global.authenticated {
display: none;
}

2
lms/templates/shoppingcart/cybersource_form.html
View File

@@ -1,7 +1,7 @@
<%! 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" />
<input type="hidden" name="${pk}" value="${pv}" />
% endfor
<button type="submit">${_('Payment')}<i class="icon fa fa-caret-right" aria-hidden="true"></i></button>

35
lms/templates/shoppingcart/receipt.html
View File

@@ -282,7 +282,7 @@ from microsite_configuration import microsite
</div>
</div>
% endif
<hr class="border"/>
% for item, course in shoppingcart_items:
% if loop.index > 0 :
<hr>
@@ -294,8 +294,13 @@ from microsite_configuration import microsite
alt="${course.display_number_with_default | h} ${get_course_about_section(course, 'title')} Image"/>
</div>
<div class="data-input">
<h3>${_("Registration for")}:
<span class="pull-right">
<h3 class="course-title-info" id="course-title">
<span class="course-registration-title">${_('Registration for:')}</span>
<span class="course-display-name">${ course.display_name }</span>
</h3>
<p class="course-meta-info" aria-describedby="course-title">
<span class="course-dates-title">
<%
course_start_time = course.start_datetime_text()
course_end_time = course.end_datetime_text()
@@ -304,19 +309,17 @@ from microsite_configuration import microsite
${_("Course Dates")}:
%endif
</span>
</h3>
<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/>
<span class="course-display-dates">
% if course_start_time:
${course_start_time}
%endif
-
% if course_end_time:
${course_end_time}
%endif
</span>
</p>
<hr>
<div class="three-col">
% if item.status == "purchased":
<div class="col-1">

67
lms/templates/shoppingcart/shopping_cart.html
View File

@@ -71,10 +71,14 @@ from django.utils.translation import ungettext
</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 class="course-title-info" id="course-title">
<span class="course-registration-title">${_('Registration for:')}</span>
<span class="course-display-name">${ course.display_name }</span>
</h3>
<h1>${ course.display_name }</h1><span class="pull-right">${course.start_datetime_text()} - ${course.end_datetime_text()}</span>
<p class="course-meta-info" aria-describedby="course-title">
<span class="course-dates-title">${_('Course Dates:')}</span>
<span class="course-display-dates">${ course.start_datetime_text() } - ${ course.end_datetime_text() }</span>
</p>
<hr>
<div class="three-col">
<div class="col-1">
@@ -98,19 +102,29 @@ from django.utils.translation import ungettext
% endif
</div>
<div class="col-2">
<div class="numbers-row">
<label for="students">${_('Students:')}</label>
<div class="numbers-row" aria-live="polite">
<label for="field_${item.id}">${_('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}">
<input maxlength="3" title="${_('Input quantity and press enter.')}" max="999" type="text" name="students" value="${item.qty}" id="field_${item.id}" data-unit-cost="${item.unit_cost}" data-qty="${item.qty}" aria-describedby="students-${item.id}">
</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>
<button class="inc button">
<i class="icon fa fa-caret-up" aria-hidden="true"><span>+</span></i>
<span class="sr">Increase</span>
</button>
<button class="dec button">
<i class="icon fa fa-caret-down"></i>
<span class="sr">Decrease</span>
</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>
<span class="error-text hidden" id="students-${item.id}"></span>
</div>
</div>
<div class="col-3">
<button href="#" class="btn-remove" data-item-id="${item.id}"><i class="icon fa fa-times-circle" aria-hidden="true"></i></button>
<button href="#" class="btn-remove" data-item-id="${item.id}">
<i class="icon fa fa-times-circle" aria-hidden="true"></i>
<span class="sr">Remove</span>
</button>
</div>
</div>
</div>
@@ -122,10 +136,11 @@ from django.utils.translation import ungettext
<div class="code-text">
% if not discount_applied:
<div class="code-input">
<div class="code-input" aria-live="polite">
<label for="input_code" class="sr">Discount or activation code</label>
<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>
<span class="error-text hidden" id="code"></span>
</div>
% else:
<div class="code-applied">
@@ -147,31 +162,37 @@ from django.utils.translation import ungettext
<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>
<button type="submit" name="billing-details" aria-describedby="billing_business_helper_text">
${_('Billing Details')}
<i class="icon fa fa-caret-right" aria-hidden="true"></i>
</button>
<p id="billing_business_helper_text">
${_('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">
<div id="processor_form" aria-describedby="payment_business_helper_text">
${form_html}
</div>
<p>
<p id="payment_business_helper_text">
${_('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">
<div name="payment" aria-describedby="payment_helper_text">
${form_html}
<p>
<p id="payment_helper_text">
${_('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>
<button type="submit" name="billing-details" aria-describedby="billing_helper_text">
${_('Billing Details')}
<i class="icon fa fa-caret-right" aria-hidden="true"></i>
</button>
<p id="billing_helper_text">
${_('After this purchase is complete, a receipt is generated with relative billing details and registration codes for students.')}
</p>
</div>
%endif
</div>

4
lms/templates/shoppingcart/shopping_cart_flow.html
View File

@@ -15,12 +15,12 @@ from microsite_configuration import microsite
<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" aria-label="${_('Steps')}">
<ol class="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>
</ol>
%endif
</header>
</div>