From 73900a1de20d5e2f0a4a81f5c8bcfa389cc84607 Mon Sep 17 00:00:00 2001 From: dave justice Date: Mon, 14 May 2018 17:06:26 -0400 Subject: [PATCH] Some tweaks to better support rtl - fixes #1906 - footer fixes were not addressed because footer is in process of being updated, will need a rtl review once #3550 is merged. - experiment page has changed recently, from my reviews it appears that all of the referened issues have been addressed already. --- frontend/src/app/components/ExperimentRowCard/index.scss | 9 ++++++++- frontend/src/app/components/NewsletterFooter/index.scss | 6 +++++- frontend/src/app/containers/App/index.js | 8 +++++++- 3 files changed, 20 insertions(+), 3 deletions(-) diff --git a/frontend/src/app/components/ExperimentRowCard/index.scss b/frontend/src/app/components/ExperimentRowCard/index.scss index cc23a2aaf6..8bedebc01b 100644 --- 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 index f844e0404a..c1876d02b1 100644 --- 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 index 03f2816b0b..f6c65de4d9 100644 --- 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 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 = {};