diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index 35bdd3b6a3..fb17679546 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -18,3 +18,4 @@ @import 'about'; @import 'tables'; @import 'admin'; +@import 'rtl'; diff --git a/app/assets/stylesheets/rtl.scss b/app/assets/stylesheets/rtl.scss new file mode 100644 index 0000000000..af7be5f9c8 --- /dev/null +++ b/app/assets/stylesheets/rtl.scss @@ -0,0 +1,129 @@ +body.rtl { + direction: rtl; + + .column-link__icon, .column-header__icon { + margin-right: 0; + margin-left: 5px; + } + + .character-counter__wrapper { + margin-right: 0; + margin-left: 16px; + } + + .navigation-bar__profile { + margin-left: 0; + margin-right: 8px; + } + + .search__input { + padding-right: 10px; + padding-left: 30px; + } + + .search__icon .fa { + right: auto; + left: 10px; + } + + .column-icon-clear { + right: auto; + left: 48px; + } + + .column-icon { + right: auto; + left: 0; + } + + .setting-toggle { + margin-left: 0; + margin-right: 8px; + } + + .status__avatar { + left: auto; + right: 10px; + } + + .status { + padding-left: 10px; + padding-right: 68px; + } + + .status__info .status__display-name { + padding-left: 25px; + padding-right: 0; + } + + .column-back-button--slim-button { + right: auto; + left: 0; + } + + .status__info-time { + float: left; + } + + .status__action-bar-button-wrapper { + float: right; + margin-right: 0; + margin-left: 18px; + } + + .status__action-bar-dropdown { + float: right; + } + + .privacy-dropdown__dropdown { + left: auto; + right: 0; + } + + .dropdown--active .dropdown__content { + text-align: right; + } + + .dropdown--active .dropdown__content::before { + left: auto; + right: 8px; + } + + .dropdown--active .dropdown__content > ul { + left: auto; + right: -10px; + } + + .privacy-dropdown__option__icon { + margin-left: 10px; + margin-right: 0; + } + + .detailed-status__display-avatar { + margin-right: 0; + margin-left: 10px; + float: right; + } + + .detailed-status__favorites, .detailed-status__reblogs { + margin-left: 0; + margin-right: 6px; + } + + @media screen and (min-width: 1025px) { + .column, .drawer { + padding-left: 5px; + padding-right: 5px; + + &:first-child { + padding-left: 5px; + padding-right: 10px; + } + + &:last-child { + padding-right: 0px; + padding-left: 10px; + } + } + } +} diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb index fad4ab0684..e2ea948564 100644 --- a/app/helpers/application_helper.rb +++ b/app/helpers/application_helper.rb @@ -8,4 +8,9 @@ module ApplicationHelper def show_landing_strip? !user_signed_in? && !single_user_mode? end + + def add_rtl_body_class(other_classes) + other_classes = "#{other_classes} rtl" if [:ar].include?(I18n.locale) + other_classes + end end diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml index f6e06f8846..8e94393100 100755 --- a/app/views/layouts/application.html.haml +++ b/app/views/layouts/application.html.haml @@ -25,5 +25,5 @@ - body_classes ||= @body_classes - %body{ class: body_classes } + %body{ class: add_rtl_body_class(body_classes) } = content_for?(:content) ? yield(:content) : yield