Elegant rtl/ltr css switch, LMS RTL fixes, language aware @cache_if_anonymous

.gitignore

@@ -71,13 +71,19 @@ lms/static/css/
 lms/static/sass/*.css
 lms/static/sass/*.css.map
 lms/static/sass/application.scss
+lms/static/sass/application-rtl.scss
 lms/static/sass/application-extend1.scss
+lms/static/sass/application-extend1-rtl.scss
 lms/static/sass/application-extend2.scss
+lms/static/sass/application-extend2-rtl.scss
 lms/static/sass/course.scss
+lms/static/sass/course-rtl.scss
 cms/static/css/
 cms/static/sass/*.css
 cms/static/sass/*.css.map
 
+
+
 ### Logging artifacts
 log/
 logs

cms/static/sass/style-xmodule.scss

 // studio - xmodule architecture
 // ====================
 
+@import 'vendor/bi-app/bi-app-ltr'; // set the layout for right to left languages
+
 // libs and resets *do not edit*
 @import 'bourbon/bourbon'; // lib - bourbon
 

common/djangoapps/pipeline_mako/templates/static_content.html

 <%!
 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)

lms/static/sass/course/layout/_courseware_header.scss

@@ -16,7 +16,7 @@ nav.course-material {
     @include border-top-radius(4px);
     @include clearfix;
     padding: 28px 0 10px 0;
-    margin-left: 10px;
+    @include margin-left(10px);
 
     li {
       float: $left;

lms/static/sass/discussion/_discussion.scss

@@ -30,7 +30,7 @@ body.discussion, .discussion-course, div.discussion-body {
 
     .new-post-btn {
       @include blue-button;
-      margin-right: 4px;
+      @include margin-right(4px);
     }
 
     .new-post-icon {

lms/static/sass/multicourse/_dashboard.scss

@@ -889,7 +889,7 @@
     }
 
     a.unenroll {
-      float: right;
+      @include float(right);
       display: block;
       font-style: italic;
       color: $lighter-base-font-color;
@@ -904,7 +904,7 @@
 
     a.email-settings {
       @extend a.unenroll;
-      margin-right: 10px;
+      @include margin-right(10px);
     }
   }
 

lms/static/sass/shared/_header.scss

@@ -109,7 +109,7 @@ header.global {
 
     > .primary {
       display: block;
-      float: left;
+      @include float(left);
       margin: 0px;
       position: relative;
 
@@ -120,14 +120,14 @@ header.global {
 
       &:last-child {
         > a {
-          border-radius: 0 4px 4px 0;
-          border-left: none;
+          @include border-radius(0, 4px, 4px, 0);
+          @include border-left(none);
           padding: 5px 8px 7px 8px;
 
           &.shopping-cart {
             border-radius: 4px;
             border: 1px solid $border-color-2;
-            margin-right: 10px;
+            @include margin-right(10px);
             padding-bottom: 6px;
           }
         }
@@ -135,7 +135,7 @@ header.global {
     }
 
     a.user-link {
-      padding: 6px 12px 8px 35px;
+      @include padding(6px, 12px, 8px, 35px);
       position: relative;
       text-transform: none;
       font-size: 14px;
@@ -145,9 +145,14 @@ header.global {
       .avatar {
         @include background-image(url('../images/small-header-home-icon.png'));
         background-repeat: no-repeat;
+
+        @include rtl {
+          background-position: top right;
+        }
+
         height: 26px;
         display: inline-block;
-        left: 8px;
+        @include left(8px);
         opacity: 0.5;
         overflow: hidden;
         position: absolute;
@@ -171,7 +176,7 @@ header.global {
       display: none;
       padding: 5px 10px;
       position: absolute;
-      right: 0px;
+      @include right(0px);
       top: 34px;
       width: 170px;
       z-index: 3;
@@ -394,7 +399,7 @@ header.global-new {
   }
 
   .primary {
-    margin-right: 5px;
+    @include margin-right(5px);
 
     > a {
       @include background-image($button-bg-image);
@@ -415,7 +420,7 @@ header.global-new {
       vertical-align: middle;
 
       &:last-child {
-        margin-right: 0px;
+        @include margin-right(0px);
       }
 
       &:hover, &:focus, &:active {
@@ -430,7 +435,7 @@ header.global-new {
 
     > .primary {
       display: block;
-      float: left;
+      @include float(left);
       margin: 0px;
       position: relative;
 
@@ -456,7 +461,7 @@ header.global-new {
     }
 
     a.user-link {
-      padding: 6px 12px 8px 35px;
+      @include padding(6px, 12px, 8px, 35px);
       position: relative;
       text-transform: none;
       font-size: 14px;
@@ -468,7 +473,7 @@ header.global-new {
         background-repeat: no-repeat;
         height: 26px;
         display: inline-block;
-        left: 8px;
+        @include left(8px);
         opacity: 0.5;
         overflow: hidden;
         position: absolute;
@@ -492,7 +497,7 @@ header.global-new {
       display: none;
       padding: 5px 10px;
       position: absolute;
-      right: 0px;
+      @include right(0px);
       top: 34px;
       width: 170px;
       z-index: 3;
@@ -515,7 +520,7 @@ header.global-new {
         height: 0px;
         position: absolute;
         @include transform(rotate(-45deg));
-        right: 12px;
+        @include right(12px);
         top: -6px;
         width: 0px;
       }