Merge pull request #2682 from edx/frances/experiments/rtl

RTL platform support

common/djangoapps/pipeline_mako/templates/static_content.html

@@ -1,6 +1,7 @@
 <%!
 from staticfiles.storage import staticfiles_storage
 from pipeline_mako import compressed_css, compressed_js
+from django.utils.translation import get_language_bidi
 %>
 
 <%def name='url(file, raw=False)'><%
@@ -11,6 +12,13 @@ except:
 %>${url}${"?raw" if raw else ""}</%def>
 
 <%def name='css(group, raw=False)'>
+  <%
+      rtl_group = '{}-rtl'.format(group)
+
+      if get_language_bidi() and rtl_group in settings.PIPELINE_CSS:
+        group = rtl_group
+  %>
+
   % if settings.FEATURES['USE_DJANGO_PIPELINE']:
     ${compressed_css(group, raw=raw)}
   % else:

common/djangoapps/util/cache.py

@@ -12,6 +12,8 @@ from django.core import cache
 
 # If we can't find a 'general' CACHE defined in settings.py, we simply fall back
 # to returning the default cache. This will happen with dev machines.
+from django.utils.translation import get_language
+
 try:
     cache = cache.get_cache('general')
 except Exception:
@@ -45,7 +47,7 @@ def cache_if_anonymous(view_func):
             # same view accessed through different domain names may
             # return different things, so include the domain name in the key.
             domain = str(request.META.get('HTTP_HOST')) + '.'
-            cache_key = domain + "cache_if_anonymous." + request.path
+            cache_key = domain + "cache_if_anonymous." + get_language() + '.' + request.path
             response = cache.get(cache_key)
             if not response:
                 response = view_func(request, *args, **kwargs)

common/lib/xmodule/xmodule/css/capa/display.scss

@@ -61,7 +61,7 @@ div.problem {
     width: 100px;
 
     label {
-      float: left;
+      @include float(left);
       clear: both;
       margin-bottom: 5px;
 
@@ -81,23 +81,23 @@ div.problem {
     }
 
     .indicator_container {
-      float: left;
+      @include float(left);
       width: 25px;
       height: 1px;
-      margin-right: 15px;
+      @include margin-right(15px);
     }
 
     fieldset {
       @include box-sizing(border-box);
       margin: 0px 0px $baseline;
-      padding-left: $baseline;
-      border-left: 1px solid #ddd;
+      @include padding-left($baseline);
+      @include border-left(1px solid #ddd);
     }
 
     input[type="radio"],
     input[type="checkbox"] {
-      float: left;
-      margin: 4px 8px 0 0;
+      @include float(left);
+      @include margin(4px, 8px, 0, 0);
     }
 
     text {
@@ -633,7 +633,8 @@ div.problem {
       // padding: 8px 12px;
       // margin-top: 10px;
       display: inline-block;
-      margin: 8px 0 0 $baseline/2;
+      margin-top: 8px;
+      @include margin-left($baseline/2);
       color: #666;
       font-style: italic;
       -webkit-font-smoothing: antialiased;

common/lib/xmodule/xmodule/css/sequence/display.scss

@@ -276,6 +276,7 @@ nav.sequence-nav {
           height: 100%;
           width: 40px;
           text-indent: -9999px;
+          overflow: hidden;
           @include transition(all .2s $ease-in-out-quad 0s);
 
 /*          &:focus {
@@ -294,23 +295,41 @@ nav.sequence-nav {
       }
 
       &.prev {
-        left: -10px;
-        border-radius: 35px 0 0 35px;
+        @include left(-10px);
+        @include border-radius(35px, 0, 0, 35px);
 
         a {
-          background-image: url('../images/sequence-nav/previous-icon.png');
           background-position: center 15px;
+
+          // CASE: left to right layout
+          @include ltr {
+            background-image: url('../images/sequence-nav/previous-icon.png');
+          }
+
+          // CASE: right to left layout
+          @include rtl {
+            background-image: url('../images/sequence-nav/next-icon.png');
+          }
         }
       }
 
       &.next {
-        right: -10px;
-        border-radius: 0 35px 35px 0;
+        @include right(-10px);
+        @include border-radius(0, 35px, 35px, 0);
 
         a {
-          margin-left: 30px;
-          background-image: url('../images/sequence-nav/next-icon.png');
+          @include margin-left(30px);
           background-position: center 15px;
+
+          // CASE: left to right layout
+          @include ltr {
+            background-image: url('../images/sequence-nav/next-icon.png');
+          }
+
+          // CASE: right to left layout
+          @include rtl {
+            background-image: url('../images/sequence-nav/previous-icon.png');
+          }
         }
       }
     }
@@ -334,7 +353,7 @@ nav.sequence-bottom {
     display: inline-block;
 
     li {
-      float: left;
+      @include float(left);
       width: 50px;
       height: 44px;
       border: 1px solid #ccc;
@@ -351,6 +370,7 @@ nav.sequence-bottom {
           display: block;
           padding: lh(.5) 4px;
           text-indent: -9999px;
+          overflow: hidden;
           @include transition(all .2s $ease-in-out-quad 0s);
 
           &:hover, &:focus {
@@ -369,21 +389,39 @@ nav.sequence-bottom {
       }
 
       &.prev {
-        border-radius: 35px 0 0 35px;
+        @include border-radius(35px, 0, 0, 35px);
 
         a {
-          background-image: url('../images/sequence-nav/previous-icon.png');
           background-position: center 15px;
+
+         // CASE: left to right layout
+         @include ltr {
+            background-image: url('../images/sequence-nav/previous-icon.png');
+          }
+
+          // CASE: right to left layout
+          @include rtl {
+            background-image: url('../images/sequence-nav/next-icon.png');
+          }
         }
       }
 
       &.next {
-        border-radius: 0 35px 35px 0;
-        border-left: none;
+        @include border-radius(0, 35px, 35px, 0);
+        @include border-left(none);
 
         a {
-          background-image: url('../images/sequence-nav/next-icon.png');
           background-position: center 15px;
+
+          // CASE: left to right layout
+          @include ltr {
+            background-image: url('../images/sequence-nav/next-icon.png');
+          }
+
+          // CASE: right to left layout
+          @include rtl {
+            background-image: url('../images/sequence-nav/previous-icon.png');
+          }
         }
       }
     }

common/lib/xmodule/xmodule/css/tabs/tabs.scss

@@ -23,7 +23,7 @@
 
   .edit-header {
     @include box-sizing(border-box);
-    padding: 18px 0 18px $baseline;
+    padding: 18px $baseline;
     top: 0 !important; // ugly override for second level tab override
     right: 0;
     background-color: $blue;

common/lib/xmodule/xmodule/css/video/display.scss

@@ -179,6 +179,7 @@ div.video {
         line-height: 46px;
         margin: 0;
         padding: 0 0 0 15px;
+        overflow: hidden;
         text-indent: -9999px;
         -webkit-font-smoothing: antialiased;
         box-shadow: 1px 0 0 #555, inset 1px 0 0 #555;

common/static/sass/_mixins.scss

@@ -87,6 +87,20 @@
   width: 100%;
 }
 
+// layout placeholders
+.ui-col-wide  {
+  width: flex-grid(9, 12);
+  @include margin-right(flex-gutter());
+  @include float(left);
+}
+
+.ui-col-narrow  {
+  width: flex-grid(3, 12);
+  @include float(left);
+}
+
+
+
 // extends - UI - window
 %ui-window {
   @include clearfix();