From 79388a52aacbea864df2c6562bba2241470fa1ad Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Thu, 3 Oct 2019 03:17:41 +0200 Subject: [PATCH] [Glitch] Fix issues in RTL layout in web UI Port 9184522cb49d87a58184a0561d46575ea1b5667d to glitch-soc Signed-off-by: Thibaut Girka --- .../glitch/styles/components/media.scss | 2 ++ .../flavours/glitch/styles/rtl.scss | 35 ++++++++++++++++++- 2 files changed, 36 insertions(+), 1 deletion(-) diff --git a/app/javascript/flavours/glitch/styles/components/media.scss b/app/javascript/flavours/glitch/styles/components/media.scss index 85982d938..b21ed9dd6 100644 --- a/app/javascript/flavours/glitch/styles/components/media.scss +++ b/app/javascript/flavours/glitch/styles/components/media.scss @@ -339,6 +339,7 @@ background: darken($ui-base-color, 8%); border-radius: 4px; padding-bottom: 44px; + direction: ltr; &.editable { border-radius: 0; @@ -386,6 +387,7 @@ max-width: 100%; border-radius: 4px; box-sizing: border-box; + direction: ltr; &.editable { border-radius: 0; diff --git a/app/javascript/flavours/glitch/styles/rtl.scss b/app/javascript/flavours/glitch/styles/rtl.scss index 8a275d82f..2375bac90 100644 --- a/app/javascript/flavours/glitch/styles/rtl.scss +++ b/app/javascript/flavours/glitch/styles/rtl.scss @@ -7,6 +7,34 @@ body.rtl { padding-right: 15px; } + .radio-button__input { + margin-right: 0; + margin-left: 10px; + } + + .directory__card__bar .display-name { + margin-left: 0; + margin-right: 15px; + } + + .display-name { + text-align: right; + } + + .notification__message { + margin-left: 0; + margin-right: 68px; + } + + .drawer__inner__mastodon > img { + transform: scaleX(-1); + } + + .notification__favourite-icon-wrapper { + left: auto; + right: -26px; + } + .landing-page__logo { margin-right: 0; margin-left: 20px; @@ -152,7 +180,6 @@ body.rtl { } .status__action-bar { - &__counter { margin-right: 0; margin-left: 11px; @@ -345,6 +372,12 @@ body.rtl { } } + .columns-area--mobile .column, + .columns-area--mobile .drawer { + padding-left: 0; + padding-right: 0; + } + .public-layout { .header { .nav-button {