Use rtlcss instead of r2 for RTL support
This ensures that the RTL directives in bootstrap are processed correctly as it is designed around RTLCSS for RTL support. Fixes #4347
This commit is contained in:
Tom Hughes
parent
b9cb8f0921
commit
a328ec84a2
7 changed files with 56 additions and 80 deletions
4
Gemfile
4
Gemfile
|
|
@ -26,8 +26,8 @@ gem "jbuilder", "~> 2.7"
|
|||
# Reduces boot times through caching; required in config/boot.rb
|
||||
gem "bootsnap", ">= 1.4.2", :require => false
|
||||
|
||||
# Use R2 for RTL conversion
|
||||
gem "r2", "~> 0.2.7"
|
||||
# Use rtlcss for RTL conversion
|
||||
gem "rtlcss"
|
||||
|
||||
# Use autoprefixer to generate CSS prefixes
|
||||
gem "autoprefixer-rails"
|
||||
|
|
|
|||
|
|
@ -305,6 +305,7 @@ GEM
|
|||
kramdown (2.4.0)
|
||||
rexml
|
||||
language_server-protocol (3.17.0.3)
|
||||
libv8-node (18.16.0.0)
|
||||
libxml-ruby (4.1.2)
|
||||
listen (3.8.0)
|
||||
rb-fsevent (~> 0.10, >= 0.10.3)
|
||||
|
|
@ -326,6 +327,8 @@ GEM
|
|||
mini_magick (4.12.0)
|
||||
mini_mime (1.1.5)
|
||||
mini_portile2 (2.8.5)
|
||||
mini_racer (0.8.0)
|
||||
libv8-node (~> 18.16.0.0)
|
||||
minitest (5.20.0)
|
||||
msgpack (1.7.2)
|
||||
multi_json (1.15.0)
|
||||
|
|
@ -403,7 +406,6 @@ GEM
|
|||
puma (5.6.7)
|
||||
nio4r (~> 2.0)
|
||||
quad_tile (1.0.1)
|
||||
r2 (0.2.8)
|
||||
racc (1.7.3)
|
||||
rack (2.2.8)
|
||||
rack-cors (2.0.1)
|
||||
|
|
@ -473,6 +475,8 @@ GEM
|
|||
rinku (2.0.6)
|
||||
rotp (6.3.0)
|
||||
rouge (4.2.0)
|
||||
rtlcss (0.2.1)
|
||||
mini_racer (>= 0.6.3)
|
||||
rubocop (1.57.2)
|
||||
json (~> 2.3)
|
||||
language_server-protocol (>= 3.17.0)
|
||||
|
|
@ -638,7 +642,6 @@ DEPENDENCIES
|
|||
pg
|
||||
puma (~> 5.6)
|
||||
quad_tile (~> 1.0.1)
|
||||
r2 (~> 0.2.7)
|
||||
rack-cors
|
||||
rack-uri_sanitizer
|
||||
rails (~> 7.1.0)
|
||||
|
|
@ -646,6 +649,7 @@ DEPENDENCIES
|
|||
rails-i18n (~> 7.0.0)
|
||||
rinku (>= 2.0.6)
|
||||
rotp
|
||||
rtlcss
|
||||
rubocop
|
||||
rubocop-capybara
|
||||
rubocop-factory_bot
|
||||
|
|
|
|||
|
|
@ -2,34 +2,6 @@
|
|||
@import "bootstrap";
|
||||
@import "rails_bootstrap_forms";
|
||||
|
||||
/* Bootstrap + r2 fixes */
|
||||
|
||||
:root[dir=rtl] {
|
||||
.bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow {
|
||||
/* no-r2 */
|
||||
right: unset !important;
|
||||
left: calc(-1 * var(--bs-tooltip-arrow-height)) !important;
|
||||
|
||||
&::before {
|
||||
/* no-r2 */
|
||||
left: unset !important;
|
||||
right: -1px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow {
|
||||
/* no-r2 */
|
||||
left: unset !important;
|
||||
right: calc(-1 * var(--bs-tooltip-arrow-height)) !important;
|
||||
|
||||
&::before {
|
||||
/* no-r2 */
|
||||
right: unset !important;
|
||||
left: -1px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Styles common to large and small screens */
|
||||
|
||||
/* Default rules for the body of every page */
|
||||
|
|
@ -71,23 +43,23 @@ time[title] {
|
|||
overflow: hidden;
|
||||
}
|
||||
|
||||
.icon.search { /* no-r2 */ background-position: 0 0; }
|
||||
.icon.donate { /* no-r2 */ background-position: -20px 0; }
|
||||
.icon.zoomin { /* no-r2 */ background-position: -40px 0; }
|
||||
.icon.zoomout { /* no-r2 */ background-position: -60px 0; }
|
||||
.icon.geolocate { /* no-r2 */ background-position: -80px 0; }
|
||||
.active .icon.geolocate { /* no-r2 */ background-position: -80px -20px; }
|
||||
.icon.layers { /* no-r2 */ background-position: -100px 0; }
|
||||
.icon.key { /* no-r2 */ background-position: -120px 0; }
|
||||
.icon.share { /* no-r2 */ background-position: -140px 0; }
|
||||
.icon.clipboard { /* no-r2 */ background-position: -160px 0; }
|
||||
.icon.link { /* no-r2 */ background-position: -180px 0; }
|
||||
.icon.close { /* no-r2 */ background-position: -200px 0; }
|
||||
.icon.close:hover { /* no-r2 */ background-position: -200px -20px; }
|
||||
.icon.check { /* no-r2 */ background-position: -220px 0; }
|
||||
.icon.note { /* no-r2 */ background-position: -240px 0; }
|
||||
.icon.note.grey { /* no-r2 */ background-position: -240px -20px; }
|
||||
.icon.query { /* no-r2 */ background-position: -260px 0; }
|
||||
.icon.search { /*rtl:ignore*/ background-position: 0 0; }
|
||||
.icon.donate { /*rtl:ignore*/ background-position: -20px 0; }
|
||||
.icon.zoomin { /*rtl:ignore*/ background-position: -40px 0; }
|
||||
.icon.zoomout { /*rtl:ignore*/ background-position: -60px 0; }
|
||||
.icon.geolocate { /*rtl:ignore*/ background-position: -80px 0; }
|
||||
.active .icon.geolocate { /*rtl:ignore*/ background-position: -80px -20px; }
|
||||
.icon.layers { /*rtl:ignore*/ background-position: -100px 0; }
|
||||
.icon.key { /*rtl:ignore*/ background-position: -120px 0; }
|
||||
.icon.share { /*rtl:ignore*/ background-position: -140px 0; }
|
||||
.icon.clipboard { /*rtl:ignore*/ background-position: -160px 0; }
|
||||
.icon.link { /*rtl:ignore*/ background-position: -180px 0; }
|
||||
.icon.close { /*rtl:ignore*/ background-position: -200px 0; }
|
||||
.icon.close:hover { /*rtl:ignore*/ background-position: -200px -20px; }
|
||||
.icon.check { /*rtl:ignore*/ background-position: -220px 0; }
|
||||
.icon.note { /*rtl:ignore*/ background-position: -240px 0; }
|
||||
.icon.note.grey { /*rtl:ignore*/ background-position: -240px -20px; }
|
||||
.icon.query { /*rtl:ignore*/ background-position: -260px 0; }
|
||||
|
||||
/* Utility for de-emphasizing content */
|
||||
|
||||
|
|
@ -779,11 +751,11 @@ tr.turn:hover {
|
|||
#maxlat { margin-top: -1px; }
|
||||
#minlon {
|
||||
float: left;
|
||||
/* no-r2 */ margin-left: -1px;
|
||||
/*rtl:ignore*/ margin-left: -1px;
|
||||
}
|
||||
#maxlon {
|
||||
float: right;
|
||||
/* no-r2 */ margin-right: -1px;
|
||||
/*rtl:ignore*/ margin-right: -1px;
|
||||
}
|
||||
#minlat { margin-bottom: -1px; }
|
||||
}
|
||||
|
|
@ -1048,7 +1020,7 @@ div.secondary-actions {
|
|||
}
|
||||
|
||||
.sprite.x {
|
||||
/* no-r2 */ background-position: -50px 0;
|
||||
/*rtl:ignore*/ background-position: -50px 0;
|
||||
}
|
||||
|
||||
.sprite.term {
|
||||
|
|
@ -1057,27 +1029,27 @@ div.secondary-actions {
|
|||
}
|
||||
|
||||
.sprite.node {
|
||||
/* no-r2 */ background-position: -100px 0;
|
||||
/*rtl:ignore*/ background-position: -100px 0;
|
||||
}
|
||||
|
||||
.sprite.way {
|
||||
/* no-r2 */ background-position: -150px 0;
|
||||
/*rtl:ignore*/ background-position: -150px 0;
|
||||
}
|
||||
|
||||
.sprite.tag {
|
||||
/* no-r2 */ background-position: -200px 0;
|
||||
/*rtl:ignore*/ background-position: -200px 0;
|
||||
}
|
||||
|
||||
.sprite.editor {
|
||||
/* no-r2 */ background-position: -250px 0;
|
||||
/*rtl:ignore*/ background-position: -250px 0;
|
||||
}
|
||||
|
||||
.sprite.question {
|
||||
/* no-r2 */ background-position: -300px 0;
|
||||
/*rtl:ignore*/ background-position: -300px 0;
|
||||
}
|
||||
|
||||
.sprite.rules {
|
||||
/* no-r2 */ background-position: -350px 0;
|
||||
/*rtl:ignore*/ background-position: -350px 0;
|
||||
}
|
||||
|
||||
.icon.note {
|
||||
|
|
@ -1128,27 +1100,27 @@ div.secondary-actions {
|
|||
background: 40px 40px image-url('about/sprite.png') no-repeat;
|
||||
|
||||
&.local {
|
||||
/* no-r2 */
|
||||
/*rtl:ignore*/
|
||||
background-position: 0px 0px;
|
||||
}
|
||||
&.community {
|
||||
/* no-r2 */
|
||||
/*rtl:ignore*/
|
||||
background-position: 0px -40px;
|
||||
}
|
||||
&.open {
|
||||
/* no-r2 */
|
||||
/*rtl:ignore*/
|
||||
background-position: 0px -80px;
|
||||
}
|
||||
&.partners {
|
||||
/* no-r2 */
|
||||
/*rtl:ignore*/
|
||||
background-position: 0px -120px;
|
||||
}
|
||||
&.infringement {
|
||||
/* no-r2 */
|
||||
/*rtl:ignore*/
|
||||
background-position: 0px -160px;
|
||||
}
|
||||
&.legal {
|
||||
/* no-r2 */
|
||||
/*rtl:ignore*/
|
||||
background-position: -45px -160px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,16 +0,0 @@
|
|||
require "r2"
|
||||
|
||||
class R2ScssProcessor < SassC::Rails::ScssTemplate
|
||||
def self.call(input)
|
||||
output = super(input)
|
||||
data = R2.r2(output[:data])
|
||||
output.delete(:map)
|
||||
output.merge(:data => data)
|
||||
end
|
||||
end
|
||||
|
||||
Rails.application.config.assets.configure do |env|
|
||||
env.register_mime_type "text/r2+scss", :extensions => [".r2.scss"]
|
||||
env.register_transformer "text/r2+scss", "text/css", R2ScssProcessor
|
||||
env.register_preprocessor "text/r2+scss", Sprockets::DirectiveProcessor.new(:comments => ["//", ["/*", "*/"]])
|
||||
end
|
||||
16
config/initializers/rtlcss.rb
Normal file
16
config/initializers/rtlcss.rb
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
require "rtlcss"
|
||||
|
||||
class RtlcssSCSSProcessor < SassC::Rails::ScssTemplate
|
||||
def self.call(input)
|
||||
output = super(input)
|
||||
data = Rtlcss.flip_css(output[:data])
|
||||
output.delete(:map)
|
||||
output.merge(:data => data)
|
||||
end
|
||||
end
|
||||
|
||||
Rails.application.config.assets.configure do |env|
|
||||
env.register_mime_type "text/rtlcss+scss", :extensions => [".rtlcss.scss"]
|
||||
env.register_transformer "text/rtlcss+scss", "text/css", RtlcssSCSSProcessor
|
||||
env.register_preprocessor "text/rtlcss+scss", Sprockets::DirectiveProcessor.new(:comments => ["//", ["/*", "*/"]])
|
||||
end
|
||||
Loading…
Add table
Reference in a new issue