about summary refs log tree commit diff
path: root/app
diff options
context:
space:
mode:
authorEugen Rochko <eugen@zeonfederated.com>2017-12-13 18:28:13 +0100
committerGitHub <noreply@github.com>2017-12-13 18:28:13 +0100
commitcc75d4792610703e716fff0223cd566bff2005ad (patch)
treede2c5a07dd893354ed0287d36d480fceb98fdd46 /app
parent8bf4cc72b6d1bdd4fe3f2a366946533376053ccc (diff)
Fix layout for RTL (#6014)
Diffstat (limited to 'app')
-rw-r--r--app/javascript/mastodon/features/ui/components/columns_area.js5
-rw-r--r--app/javascript/styles/mastodon/rtl.scss26
2 files changed, 23 insertions, 8 deletions
diff --git a/app/javascript/mastodon/features/ui/components/columns_area.js b/app/javascript/mastodon/features/ui/components/columns_area.js
index 93ed9e605..c5b3c20d4 100644
--- a/app/javascript/mastodon/features/ui/components/columns_area.js
+++ b/app/javascript/mastodon/features/ui/components/columns_area.js
@@ -27,6 +27,8 @@ const componentMap = {
   'LIST': ListTimeline,
 };
 
+const isRtlLayout = document.getElementsByTagName('body')[0].classList.contains('rtl');
+
 @component => injectIntl(component, { withRef: true })
 export default class ColumnsArea extends ImmutablePureComponent {
 
@@ -79,7 +81,8 @@ export default class ColumnsArea extends ImmutablePureComponent {
 
   handleChildrenContentChange() {
     if (!this.props.singleColumn) {
-      this._interruptScrollAnimation = scrollRight(this.node, this.node.scrollWidth - window.innerWidth);
+      const modifier = isRtlLayout ? -1 : 1;
+      this._interruptScrollAnimation = scrollRight(this.node, (this.node.scrollWidth - window.innerWidth) * modifier);
     }
   }
 
diff --git a/app/javascript/styles/mastodon/rtl.scss b/app/javascript/styles/mastodon/rtl.scss
index 67bfa8a38..77420c84b 100644
--- a/app/javascript/styles/mastodon/rtl.scss
+++ b/app/javascript/styles/mastodon/rtl.scss
@@ -7,9 +7,9 @@ body.rtl {
     margin-left: 5px;
   }
 
-  .character-counter__wrapper {
-    margin-right: 8px;
-    margin-left: 16px;
+  .compose-form .compose-form__buttons-wrapper .character-counter__wrapper {
+    margin-right: 0;
+    margin-left: 4px;
   }
 
   .navigation-bar__profile {
@@ -30,6 +30,22 @@ body.rtl {
   .column-header__buttons {
     left: 0;
     right: auto;
+    margin-left: -15px;
+    margin-right: 0;
+  }
+
+  .column-inline-form .icon-button {
+    margin-left: 0;
+    margin-right: 5px;
+  }
+
+  .column-header__links .text-btn {
+    margin-left: 10px;
+    margin-right: 0;
+  }
+
+  .account__avatar-wrapper {
+    float: right;
   }
 
   .column-header__back-button {
@@ -41,10 +57,6 @@ body.rtl {
     float: left;
   }
 
-  .compose-form__modifiers {
-    border-radius: 0 0 0 4px;
-  }
-
   .setting-toggle {
     margin-left: 0;
     margin-right: 8px;