Merge pull request #9440 from OmarIthawi/omarithawi/nav-seq-module-rtl

Flipped the direction of the seq_module arrows

lms/static/sass/course/base/_extends.scss

@@ -199,3 +199,24 @@ h1.top-header {
   @include transition( all .2s $ease-in-out-quad 0s);
 }
 
+// FontAwesome rtl chevron next
+.fa-chevron-next {
+  &:before {
+    @if $bi-app-direction == ltr {
+        content: "\f054"; // .fa-chevron-right
+    } @else if $bi-app-direction == rtl {
+        content: "\f053"; // .fa-chevron-left
+    }
+  }
+}
+
+// FontAwesome rtl chevron prev
+.fa-chevron-prev {
+  &:before {
+    @if $bi-app-direction == ltr {
+        content: "\f053"; // .fa-chevron-left
+    } @else if $bi-app-direction == rtl {
+        content: "\f054"; // .fa-chevron-right
+    }
+  }
+}

lms/templates/seq_module.html

@@ -2,7 +2,9 @@
 
 <div id="sequence_${element_id}" class="sequence" data-id="${item_id}" data-position="${position}" data-ajax-url="${ajax_url}" >
   <div class="sequence-nav">
-    <button class="sequence-nav-button button-previous"><span class="icon fa fa-chevron-left" aria-hidden="true"></span><span class="sr">${_('Previous')}</span></button>
+    <button class="sequence-nav-button button-previous">
+        <span class="icon fa fa-chevron-prev" aria-hidden="true"></span><span class="sr">${_('Previous')}</span>
+    </button>
     <nav class="sequence-list-wrapper" aria-label="${_('Unit')}">
       <ol id="sequence-list">
         % for idx, item in enumerate(items):
@@ -27,7 +29,9 @@
         % endfor
       </ol>
     </nav>
-    <button class="sequence-nav-button button-next"><span class="icon fa fa-chevron-right" aria-hidden="true"></span><span class="sr">${_('Next')}</span></button>
+    <button class="sequence-nav-button button-next">
+        <span class="icon fa fa-chevron-next" aria-hidden="true"></span><span class="sr">${_('Next')}</span>
+    </button>
   </div>
 
   <div class="sr-is-focusable" tabindex="-1"></div>
@@ -43,8 +47,12 @@
   <div id="seq_content"></div>
 
   <nav class="sequence-bottom" aria-label="${_('Section')}">
-    <button class="sequence-nav-button button-previous"><span class="icon fa fa-chevron-left" aria-hidden="true"></span><span class="sr">${_('Previous')}</span></button>
-    <button class="sequence-nav-button button-next"><span class="icon fa fa-chevron-right" aria-hidden="true"></span><span class="sr">${_('Next')}</span></button>
+    <button class="sequence-nav-button button-previous">
+        <span class="icon fa fa-chevron-prev" aria-hidden="true"></span><span class="sr">${_('Previous')}</span>
+    </button>
+    <button class="sequence-nav-button button-next">
+        <span class="icon fa fa-chevron-next" aria-hidden="true"></span><span class="sr">${_('Next')}</span>
+    </button>
   </nav>
 </div>