From a868a5ff35d3c1509043b7f1cac5a3e80592895a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Mon, 21 Jun 2021 23:49:39 +0200 Subject: [PATCH 1/2] Change Foundation text direction in RTL languages This way, when the language is written form right-to-left, elements using Foundation mixins/classes will float to the opposite direction as they do in left-to-right languages. The same will apply to text alignment. To offer full support for RTL languages, we need to change every single reference to `float: left`, `float: right`, `text-align: left`, `text-align: right`, and possible adjust other properties like `left`, `margin-left`, `padding-left` or `border-left`. In the meantime, we at least partially support these languages. Replacing `float` with `flex` when possible would also improve RTL support. --- app/assets/stylesheets/application-rtl.scss | 3 +++ app/helpers/application_helper.rb | 4 ++++ app/views/layouts/_common_head.html.erb | 6 +++++- config/initializers/assets.rb | 1 + 4 files changed, 13 insertions(+), 1 deletion(-) create mode 100644 app/assets/stylesheets/application-rtl.scss diff --git a/app/assets/stylesheets/application-rtl.scss b/app/assets/stylesheets/application-rtl.scss new file mode 100644 index 000000000..99d12603a --- /dev/null +++ b/app/assets/stylesheets/application-rtl.scss @@ -0,0 +1,3 @@ +$global-text-direction: rtl; + +@import "application"; diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb index b14baa148..e57d06576 100644 --- a/app/helpers/application_helper.rb +++ b/app/helpers/application_helper.rb @@ -6,6 +6,10 @@ module ApplicationHelper url_for(request.query_parameters.merge(query_parameters).merge(only_path: true)) end + def rtl? + %i[ar fa he].include?(I18n.locale) + end + def markdown(text) return text if text.blank? diff --git a/app/views/layouts/_common_head.html.erb b/app/views/layouts/_common_head.html.erb index d4c0d4daf..abed78d19 100644 --- a/app/views/layouts/_common_head.html.erb +++ b/app/views/layouts/_common_head.html.erb @@ -2,7 +2,11 @@ <%= content_for?(:title) ? yield(:title) : default_title %> -<%= stylesheet_link_tag "application" %> +<% if rtl? %> + <%= stylesheet_link_tag "application-rtl" %> +<% else %> + <%= stylesheet_link_tag "application" %> +<% end %> <%= javascript_include_tag "application", "data-turbolinks-track" => "reload" %> <%= csrf_meta_tags %> <%= favicon_link_tag "favicon.ico" %> diff --git a/config/initializers/assets.rb b/config/initializers/assets.rb index 1afb578ff..6630e63f6 100644 --- a/config/initializers/assets.rb +++ b/config/initializers/assets.rb @@ -12,6 +12,7 @@ Rails.application.config.assets.version = "1.0" Rails.application.config.assets.precompile += %w[ckeditor/config.js] Rails.application.config.assets.precompile += %w[stat_graphs.js] Rails.application.config.assets.precompile += %w[dashboard_graphs.js] +Rails.application.config.assets.precompile += %w[application-rtl.css] Rails.application.config.assets.precompile += %w[print.css] Rails.application.config.assets.precompile += %w[pdf_fonts.css] Rails.application.config.assets.precompile += %w[sdg/*.png] From d827768c072f99fb3f4003a43d15caa71be14405 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Mon, 21 Jun 2021 23:59:31 +0200 Subject: [PATCH 2/2] Set HTML dir attribute in RTL languages This way properties flex layouts text direction will work properly. --- app/views/layouts/admin.html.erb | 2 +- app/views/layouts/application.html.erb | 2 +- app/views/layouts/devise.html.erb | 2 +- app/views/layouts/management.html.erb | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/app/views/layouts/admin.html.erb b/app/views/layouts/admin.html.erb index 8c3176b12..1a78ad60a 100644 --- a/app/views/layouts/admin.html.erb +++ b/app/views/layouts/admin.html.erb @@ -1,5 +1,5 @@ - + lang="<%= I18n.locale %>"> <%= render "layouts/common_head", default_title: "Admin" %> diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index 68a067c6d..18bc7f78c 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -1,5 +1,5 @@ - + lang="<%= I18n.locale %>" data-current-user-id="<%= current_user&.id %>"> <%= render "layouts/common_head", default_title: setting["org_name"] %> <%= render "layouts/tracking_data" %> diff --git a/app/views/layouts/devise.html.erb b/app/views/layouts/devise.html.erb index cf6753750..c781d4403 100644 --- a/app/views/layouts/devise.html.erb +++ b/app/views/layouts/devise.html.erb @@ -1,5 +1,5 @@ - + lang="<%= I18n.locale %>"> <%= render "layouts/common_head", default_title: setting["org_name"] %> <%= render "layouts/meta_tags" %> diff --git a/app/views/layouts/management.html.erb b/app/views/layouts/management.html.erb index 1d427044c..efd92bbdb 100644 --- a/app/views/layouts/management.html.erb +++ b/app/views/layouts/management.html.erb @@ -1,5 +1,5 @@ - + lang="<%= I18n.locale %>"> <%= render "layouts/common_head", default_title: "Management" %>