cybrespace/mastodon
4
3
Fork 3
Code Issues 7 Pull requests Releases Activity

Fix layout for RTL (#6014)

Browse source
This commit is contained in:
Eugen Rochko 2017-12-13 18:28:13 +01:00 • committed by GitHub
parent 8bf4cc72b6
commit cc75d47926
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 23 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
app/javascript/mastodon/features/ui/components/columns_area.js
View file

@ -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);
}
}

26
app/javascript/styles/mastodon/rtl.scss
View file

@ -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;