Merge pull request #8187 from edx/mjevtic/SOL-883

(SOL-883) (SOL-893) 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,73 +29,63 @@ 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">
-            ${_("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."
-            ).format(
-              link_start=u'<a href="{url}">'.format(url=reverse('dashboard')),
-              link_end='</a>'
-            )}
+            % 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."
+              ).format(
+                link_start=u'<a href="{url}">'.format(url=reverse('dashboard')),
+                link_end='</a>'
+              )}
+            % elif redemption_success:
+              ${_("You have successfully enrolled in {course_name}."
+              " This course has now been added to your dashboard.").format(course_name=course.display_name)}
+            % elif registered_for_course:
+              ${_("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>'
+              )}
+            % elif course_full:
+              ${_("The course you are enrolling for is full.")}
+            % elif enrollment_closed:
+              ${_("The course you are enrolling for is closed.")}
+            % elif redeem_code_error:
+              ${_("There was an error processing your redeem code.")}
+            % else:
+              ${_("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)}
+            % endif
           </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
         </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,65 +43,57 @@ from courseware.courses import course_image_url, get_course_about_section
         </div>
         <hr>
         <div>
-          % if reg_code_already_redeemed:
           <p class="enrollment-text">
-            ${_(
-              "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."
-            ).format(
-              link_start=u'<a href="{url}">'.format(url=reverse('dashboard')),
-              link_end='</a>',
-            )}
+            % 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."
+              ).format(
+                link_start=u'<a href="{url}">'.format(url=reverse('dashboard')),
+                link_end='</a>',
+              )}
+            % elif redemption_success:
+              ${_(
+                "You have successfully enrolled in {course_name}. "
+                "This course has now been added to your dashboard."
+              ).format(
+                course_name=course.display_name,
+              )}
+            % elif registered_for_course:
+              ${_(
+                "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>',
+              )}
+            % elif redeem_code_error:
+              ${_( "There was an error processing your redeem code.")}
+            % else:
+              ${_(
+                "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,
+              )}
+            % endif
           </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 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
         </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)}"
-            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.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