me/glitchier-soc
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki 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 cbf6bd4e0c
commit 772456072e
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, 'LIST': ListTimeline,
}; };
const isRtlLayout = document.getElementsByTagName('body')[0].classList.contains('rtl');
@component => injectIntl(component, { withRef: true }) @component => injectIntl(component, { withRef: true })
export default class ColumnsArea extends ImmutablePureComponent { export default class ColumnsArea extends ImmutablePureComponent {
@ -79,7 +81,8 @@ export default class ColumnsArea extends ImmutablePureComponent {
handleChildrenContentChange() { handleChildrenContentChange() {
if (!this.props.singleColumn) { 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; margin-left: 5px;
} }
.character-counter__wrapper { .compose-form .compose-form__buttons-wrapper .character-counter__wrapper {
margin-right: 8px; margin-right: 0;
margin-left: 16px; margin-left: 4px;
} }
.navigation-bar__profile { .navigation-bar__profile {
@ -30,6 +30,22 @@ body.rtl {
.column-header__buttons { .column-header__buttons {
left: 0; left: 0;
right: auto; 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 { .column-header__back-button {
@ -41,10 +57,6 @@ body.rtl {
float: left; float: left;
} }
.compose-form__modifiers {
border-radius: 0 0 0 4px;
}
.setting-toggle { .setting-toggle {
margin-left: 0; margin-left: 0;
margin-right: 8px; margin-right: 8px;