cst1/openstreetmap-website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix styling of email notifications in RTL languages

Browse source 
Fixes #2297
This commit is contained in:
Tom Hughes 2019-07-03 09:49:46 +01:00
parent ee8ed3c682
commit f9109b7a75
3 changed files with 14 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

8
app/helpers/notifier_helper.rb
View file

@ -32,4 +32,12 @@ module NotifierHelper
# we apply it once here, after the message has been composed. # we apply it once here, after the message has been composed.
html.gsub(/<p>/, '<p style="color: black; margin: 0.75em 0; font-family: \'Helvetica Neue\', Arial, Sans-Serif">') html.gsub(/<p>/, '<p style="color: black; margin: 0.75em 0; font-family: \'Helvetica Neue\', Arial, Sans-Serif">')
end end
def style_left
I18n.t("html.dir") == "ltr" ? "left" : "right"
end
def style_right
I18n.t("html.dir") == "ltr" ? "right" : "left"
end
end end

10
app/views/layouts/notifier.html.erb
View file

@ -1,4 +1,4 @@
<html> <html lang="<%= I18n.locale %>" dir="<%= I18n.t("html.dir") %>">
<head> <head>
<meta charset="UTF-8"></meta> <meta charset="UTF-8"></meta>
</head> </head>
@ -8,7 +8,7 @@
<%# having width=100% on the table and then only a fixed width on the middle cell gives us a max-width that works in Outlook %> <%# having width=100% on the table and then only a fixed width on the middle cell gives us a max-width that works in Outlook %>
<td rowspan="2"></td> <td rowspan="2"></td>
<td width="600" style="text-align: center; padding: 0px 7px"> <td width="600" style="text-align: center; padding: 0px 7px">
<table style="width: 100%; color: #222; margin-left: auto; margin-right: auto"> <table style="width: 100%; color: #222; margin-<%= style_left %>: auto; margin-<%= style_right %>: auto">
<tr> <tr>
<td style="width: 30px; padding: 10px 10px 10px 0px"> <td style="width: 30px; padding: 10px 10px 10px 0px">
<a href="<%= @root_url %>" target="_blank"> <a href="<%= @root_url %>" target="_blank">
@ -16,10 +16,10 @@
</a> </a>
</td> </td>
<%# the "width: 100%" here looks wrong, but I couldn't find a better way of making Outlook give this cell full width %> <%# the "width: 100%" here looks wrong, but I couldn't find a better way of making Outlook give this cell full width %>
<td style="width: 100%; padding: 0px; text-align: left"> <td style="width: 100%; padding: 0px; text-align: <%= style_left %>">
<%# NB we need "text-decoration: none" twice: GMail only honours it on the <a> but Outlook only on the <strong> %> <%# NB we need "text-decoration: none" twice: GMail only honours it on the <a> but Outlook only on the <strong> %>
<a href="<%= @root_url %>" target="_blank" style="text-decoration: none; color: #000"> <a href="<%= @root_url %>" target="_blank" style="text-decoration: none; color: #000">
<strong style="text-decoration: none; font-size: 18px; font-weight: 600; margin: 0; text-align: left; font-family: 'Helvetica Neue', Arial, sans-serif">OpenStreetMap</strong> <strong style="text-decoration: none; font-size: 18px; font-weight: 600; margin: 0; text-align: <%= style_left %>; font-family: 'Helvetica Neue', Arial, sans-serif">OpenStreetMap</strong>
</a> </a>
</td> </td>
</tr> </tr>
@ -27,7 +27,7 @@
<td colspan="2"> <td colspan="2">
<table style="background-color: #fff; color: #222; border: solid 1px #ccc; border-collapse: separate"> <table style="background-color: #fff; color: #222; border: solid 1px #ccc; border-collapse: separate">
<tr> <tr>
<td style="text-align: left; padding: 0px 15px 5px 15px"> <td style="text-align: <%= style_left %>; padding: 0px 15px 5px 15px">
<%= raw style_message(yield) %> <%= raw style_message(yield) %>
</td> </td>
</tr> </tr>

2
app/views/notifier/_message_body.html.erb
View file

@ -14,7 +14,7 @@
:target => "_blank", :rel => "noopener" :target => "_blank", :rel => "noopener"
) %> ) %>
</td> </td>
<td style="text-align: left; vertical-align: top; padding-right: 10px; width: 100%"> <td style="text-align: <%= style_left %>; vertical-align: top; padding-<%= style_right %>: 10px; width: 100%">
<%= body %> <%= body %>
</td> </td>
</tr> </tr>