me/glitchier-soc
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Fix layout for RTL (tootsuite pr #6014, #6018)

Browse source
This commit is contained in:
cwm 2017-12-26 13:49:53 -06:00
parent 44d1b30dfb
commit ccc14ad59b
2 changed files with 25 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
app/javascript/flavours/glitch/features/ui/components/columns_area.js
View file

@ -54,7 +54,10 @@ export default class ColumnsArea extends ImmutablePureComponent {
if (!this.props.singleColumn) { if (!this.props.singleColumn) {
this.node.addEventListener('wheel', this.handleWheel, detectPassiveEvents.hasSupport ? { passive: true } : false); this.node.addEventListener('wheel', this.handleWheel, detectPassiveEvents.hasSupport ? { passive: true } : false);
} }
this.lastIndex = getIndex(this.context.router.history.location.pathname); this.lastIndex = getIndex(this.context.router.history.location.pathname);
this.isRtlLayout = document.getElementsByTagName('body')[0].classList.contains('rtl');
this.setState({ shouldAnimate: true }); this.setState({ shouldAnimate: true });
} }
@ -80,7 +83,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 = this.isRtlLayout ? -1 : 1;
this._interruptScrollAnimation = scrollRight(this.node, (this.node.scrollWidth - window.innerWidth) * modifier);
} }
} }

26
app/javascript/flavours/glitch/styles/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: 0px;
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;