(SOL-883) RTL support for Registration Code redemption page

lms/static/sass/views/_shoppingcart.scss

@@ -284,11 +284,6 @@ $light-border: 1px solid $gray-l5;
     .image {
       @include float(left);
       width: ($baseline*11);
-
-      img {
-        width: 100%;
-        height: 100%;
-      }
     }
 
     .data-input {
@@ -988,6 +983,13 @@ $light-border: 1px solid $gray-l5;
   }
 }
 
+.course-image, .image {
+  .item-image {
+    width: 100%;
+    height: 100%;
+  }
+}
+
 .empty-cart {
   @include border-radius(3px);
   @include text-align(center);

lms/templates/shoppingcart/receipt.html

@@ -288,7 +288,7 @@ from courseware.courses import course_image_url, get_course_about_section, get_c
       <div class="user-data">
         <div class="clearfix">
           <div class="image">
-            <img style="width: 100%; height: 100%;" src="${course_image_url(course)}"
+            <img class="item-image" src="${course_image_url(course)}"
                  alt="${course.display_number_with_default | h} ${get_course_about_section(course, 'title')} Image"/>
           </div>
           <div class="data-input">

lms/templates/shoppingcart/registration_code_receipt.html

@@ -17,8 +17,11 @@ from courseware.courses import course_image_url, get_course_about_section
     </header>
     <section>
       <div class="course-image">
-        <img style="width: 100%; height: auto;" src="${course_image_url(course)}"
-             alt="${course.display_number_with_default | h} ${get_course_about_section(course, 'title')} Cover Image"/>
+        <img class="item-image" src="${course_image_url(course)}"
+            alt="${_("{course_number} {course_title} Cover Image").format(
+              course_number=course.display_number_with_default,
+              course_title=get_course_about_section(course, 'title'),
+            )}"/>
       </div>
       <div class="enrollment-details">
         <div class="sub-title">
@@ -26,21 +29,23 @@ from courseware.courses import course_image_url, get_course_about_section
               span_start='<span class="course-date-label">',
               span_end='</span>'
             )}
-
           <div class="clearfix"></div>
         </div>
-
         <div class="course-title">
           <h1>
             ${_("{course_name}").format(course_name=course.display_name)}
-              <span class="course-dates">${_("{start_date}").format(start_date=course.start_datetime_text())} -  ${_("{end_date}").format(end_date=course.end_datetime_text())}
+              <span class="course-dates">
+                ${_("{start_date} - {end_date}").format(
+                  start_date=course.start_datetime_text(),
+                  end_date=course.end_datetime_text()
+                )}
               </span>
           </h1>
         </div>
         <hr>
         <div>
-          % if reg_code_already_redeemed:
           <p class="enrollment-text">
+            % if reg_code_already_redeemed:
               ${_("You've clicked a link for an enrollment code that has already been used."
               " Check your {link_start}course dashboard{link_end} to see if you're enrolled in the course,"
               " or contact your company's administrator."
@@ -48,51 +53,39 @@ from courseware.courses import course_image_url, get_course_about_section
                 link_start=u'<a href="{url}">'.format(url=reverse('dashboard')),
                 link_end='</a>'
               )}
-          </p>
             % elif redemption_success:
-          <p class="enrollment-text">
               ${_("You have successfully enrolled in {course_name}."
               " This course has now been added to your dashboard.").format(course_name=course.display_name)}
-          </p>
             % elif registered_for_course:
-          <p class="enrollment-text">
               ${_("You're already enrolled for this course."
               " Visit your {link_start}dashboard{link_end} to see the course."
               ).format(
                 link_start=u'<a href="{url}">'.format(url=reverse('dashboard')),
                 link_end='</a>'
               )}
-          </p>
             % elif course_full:
-          <p class="enrollment-text">
               ${_("The course you are enrolling for is full.")}
-          </p>
             % elif enrollment_closed:
-          <p class="enrollment-text">
               ${_("The course you are enrolling for is closed.")}
-          </p>
             % elif redeem_code_error:
-          <p class="enrollment-text">
               ${_("There was an error processing your redeem code.")}
-          </p>
             % else:
-          <p class="enrollment-text">
               ${_("You're about to activate an enrollment code for {course_name} by {site_name}. "
               "This code can only be used one time, so you should only activate this code if you're its intended"
               " recipient.").format(course_name=course.display_name, site_name=site_name)}
-          </p>
             % endif
+          </p>
         </div>
       </div>
       % if not reg_code_already_redeemed:
         %if redemption_success:
           <% course_url = reverse('info', args=[course.id.to_deprecated_string()]) %>
-          <a href="${course_url}" class="link-button course-link-bg-color">${_("View Course")} <i class="icon fa fa-caret-right"></i></a>
+          <a href="${course_url}" class="link-button course-link-bg-color">${_("View Course")} <i class="icon fa fa-caret-right" aria-hidden="true"></i></a>
         %elif not registered_for_course:
           <form method="post">
             <input type="hidden" name="csrfmiddlewaretoken" value="${ csrf_token }">
             <button type="submit" id="id_active_course_enrollment"
-               name="active_course_enrollment">${_("Activate Course Enrollment")} <i class="icon fa fa-caret-right"></i></button>
+               name="active_course_enrollment">${_("Activate Course Enrollment")} <i class="icon fa fa-caret-right" aria-hidden="true"></i></button>
           </form>
         %endif
       %endif

lms/templates/shoppingcart/registration_code_redemption.html

@@ -17,7 +17,7 @@ from courseware.courses import course_image_url, get_course_about_section
     </header>
     <section>
       <div class="course-image">
-        <img style="width: 100%; height: auto;" src="${course_image_url(course)}"
+        <img class="item-image" src="${course_image_url(course)}"
             alt="${_("{course_number} {course_title} Cover Image").format(
               course_number=course.display_number_with_default,
               course_title=get_course_about_section(course, 'title'),
@@ -29,10 +29,8 @@ from courseware.courses import course_image_url, get_course_about_section
               span_start='<span class="course-date-label">',
               span_end='</span>'
             )}
-
           <div class="clearfix"></div>
         </div>
-
         <div class="course-title">
           <h1>
             ${course.display_name}
@@ -45,8 +43,8 @@ from courseware.courses import course_image_url, get_course_about_section
         </div>
         <hr>
         <div>
-          % if reg_code_already_redeemed:
           <p class="enrollment-text">
+            % if reg_code_already_redeemed:
               ${_(
                 "You've clicked a link for an enrollment code that has already "
                 "been used. Check your {link_start}course dashboard{link_end} "
@@ -56,18 +54,14 @@ from courseware.courses import course_image_url, get_course_about_section
                 link_start=u'<a href="{url}">'.format(url=reverse('dashboard')),
                 link_end='</a>',
               )}
-          </p>
             % elif redemption_success:
-          <p class="enrollment-text">
               ${_(
                 "You have successfully enrolled in {course_name}. "
                 "This course has now been added to your dashboard."
               ).format(
                 course_name=course.display_name,
               )}
-          </p>
             % elif registered_for_course:
-          <p class="enrollment-text">
               ${_(
                 "You're already enrolled for this course. "
                 "Visit your {link_start}dashboard{link_end} to see the course."
@@ -75,13 +69,9 @@ from courseware.courses import course_image_url, get_course_about_section
                 link_start=u'<a href="{url}">'.format(url=reverse('dashboard')),
                 link_end='</a>',
               )}
-          </p>
             % elif redeem_code_error:
-          <p class="enrollment-text">
               ${_( "There was an error processing your redeem code.")}
-          </p>
             % else:
-          <p class="enrollment-text">
               ${_(
                 "You're about to activate an enrollment code for {course_name} "
                 "by {site_name}. This code can only be used one time, so you "
@@ -91,19 +81,19 @@ from courseware.courses import course_image_url, get_course_about_section
                 course_name=course.display_name,
                 site_name=site_name,
               )}
-          </p>
             % endif
+          </p>
         </div>
       </div>
       % if not reg_code_already_redeemed:
         %if redemption_success:
-          <a href="${reverse('dashboard')}" class="link-button course-link-bg-color">${_("View Dashboard")} <i class="icon fa fa-caret-right"></i></a>
+          <a href="${reverse('dashboard')}" class="link-button course-link-bg-color">${_("View Dashboard")} <i class="icon fa fa-caret-right" aria-hidden="true"></i></a>
         %elif not registered_for_course:
           <form method="post">
-            <input type="hidden" name="csrfmiddlewaretoken" value="${ csrf_token }">
+            <input type="hidden" name="csrfmiddlewaretoken" value="${ csrf_token }" aria-hidden="true">
             <button type="submit"
                id="id_active_course_enrollment"
-               name="active_course_enrollment">${_("Activate Course Enrollment")} <i class="icon fa fa-caret-right"></i></button>
+               name="active_course_enrollment">${_("Activate Course Enrollment")} <i class="icon fa fa-caret-right" aria-hidden="true"></i></button>
           </form>
         %endif
       %endif

lms/templates/shoppingcart/shopping_cart.html

@@ -66,10 +66,8 @@ from django.utils.translation import ungettext
         <div class="user-data">
         <div class="clearfix">
         <div class="image">
-
-        <img src="${course_image_url(course)}"
+          <img class="item-image" 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">
           ## Translators: "Registration for:" is followed by a course name