Fix layout for RTL (#6014)
parent
8bf4cc72b6
commit
cc75d47926
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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;
|
||||
|
|
Reference in New Issue