Fix styling of email notifications in RTL languages
[rails.git] / app / views / layouts / notifier.html.erb
1 <html lang="<%= I18n.locale %>" dir="<%= I18n.t("html.dir") %>">
2   <head>
3     <meta charset="UTF-8"></meta>
4   </head>
5   <body style="padding: 0; margin: 0; font-size: 14px; font-family: 'Helvetica Neue', Arial, sans-serif; color: #222">
6     <table style="background-color: #eee; width: 100%">
7       <tr>
8         <%# 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 %>
9         <td rowspan="2"></td>
10         <td width="600" style="text-align: center; padding: 0px 7px">
11           <table style="width: 100%; color: #222; margin-<%= style_left %>: auto; margin-<%= style_right %>: auto">
12             <tr>
13               <td style="width: 30px; padding: 10px 10px 10px 0px">
14                 <a href="<%= @root_url %>" target="_blank">
15                   <%= image_tag attachments["logo.png"].url, :alt => "OpenStreetMap", :title => "OpenStreetMap", :height => "30", :width => "30", :border => "0" %>
16                 </a>
17               </td>
18               <%# the "width: 100%" here looks wrong, but I couldn't find a better way of making Outlook give this cell full width %>
19               <td style="width: 100%; padding: 0px; text-align: <%= style_left %>">
20                 <%# NB we need "text-decoration: none" twice: GMail only honours it on the <a> but Outlook only on the <strong> %>
21                 <a href="<%= @root_url %>" target="_blank" style="text-decoration: none; color: #000">
22                   <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>
23                 </a>
24               </td>
25             </tr>
26             <tr>
27               <td colspan="2">
28                 <table style="background-color: #fff; color: #222; border: solid 1px #ccc; border-collapse: separate">
29                   <tr>
30                     <td style="text-align: <%= style_left %>; padding: 0px 15px 5px 15px">
31                       <%= raw style_message(yield) %>
32                     </td>
33                   </tr>
34                 </table>
35               </td>
36             </tr>
37           </table>
38         </td>
39         <td rowspan="2"></td>
40       </tr>
41       <tr>
42         <td style="text-align: center; font-size: 11px; font-family: 'Helvetica Neue', Arial, sans-serif">
43           <%= yield :footer %>
44           <p style="margin-bottom: 10px">
45             <a href="<%= @root_url %>" target="_blank" style="color: #222">OpenStreetMap</a>
46           </p>
47         </td>
48       </tr>
49     </table>
50   </body>
51 </html>