Some tweaks to better support rtl

- fixes mozilla#1906 - footer fixes were not addressed because footer is in process of being updated, will need a rtl review once mozilla#3550 is merged. - experiment page has changed recently, from my reviews it appears that all of the referened issues have been addressed already.
meandavejustice · May 14, 2018 · 73900a1 · 73900a1
1 parent 5d853d7
commit 73900a1
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 3 deletions.
diff --git a/frontend/src/app/components/ExperimentRowCard/index.scss b/frontend/src/app/components/ExperimentRowCard/index.scss
@@ -2,7 +2,6 @@
 @import '../../../styles/_utils';
 
 .experiment-summary {
-
   @include flex-container(column, flex-start, stretch);
 
   @include respond-to('big') {
@@ -137,3 +136,11 @@
   height: 40px;
   opacity: .9;
 }
+
+html[dir="rtl"] .experiment-summary {
+    @include respond-to('big') {
+        &:nth-child(3n+1) {
+            margin-left: 40px;
+        }
+    }
+}
diff --git a/frontend/src/app/components/NewsletterFooter/index.scss b/frontend/src/app/components/NewsletterFooter/index.scss
@@ -7,7 +7,6 @@ $email-icon--responsive-unit: .66;
 $error-border: #c4c4c4;
 $error-background: #f2f2f2;
 
-
 .newsletter-footer {
   background: $transparent-white-05;
   padding: ($grid-unit * 1.75) 0;
@@ -119,3 +118,8 @@ $error-background: #f2f2f2;
     }
   }
 }
+
+html[dir="rtl"] .newsletter-footer header {
+    background: url('./img/envelope.svg') no-repeat right;
+    padding-right: $email-icon--width + ($grid-unit * 1.5);
+}
diff --git a/frontend/src/app/containers/App/index.js b/frontend/src/app/containers/App/index.js
@@ -113,8 +113,14 @@ class App extends Component {
     this.props.chooseTests();
     this.measurePageview();
 
+    const lang = window.navigator.language;
+
     // set lang attr on <html> for a11y
-    document.documentElement.setAttribute("lang", window.navigator.language);
+    document.documentElement.setAttribute("lang", lang);
+
+    // we should expand upon this in the future, but this should get us
+    // working for arabic
+    document.documentElement.setAttribute("dir", (lang === "ar" ? "rtl" : "ltr"));
 
     const langs = {};