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

Apply inline styling to all <p> tags

Browse source 
Solved the problem of <p> tags being given different padding or color by different clients, without having to copy-paste a string of CSS into every <p> tag in the templates.
This commit is contained in:
Herve Saint-Amand 2017-01-25 22:50:52 +00:00
parent 25d80789dd
commit cf11913d58
3 changed files with 17 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

4
app/helpers/notifier_helper.rb
View file

@ -18,4 +18,8 @@ module NotifierHelper
:locals => { :body => capture(&block) } :locals => { :body => capture(&block) }
) )
end end
def apply_inline_css(html)
html.gsub /<p>/, '<p style="color: black; margin: 0.75em 0">'
end
end end

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

@ -1,6 +1,5 @@
<html> <html>
<head> <head>
<title></title>
<meta charset="UTF-8"></meta> <meta charset="UTF-8"></meta>
</head> </head>
<body style="padding: 0; margin: 0; font-size: 14px; font-family: 'Helvetica Neue', Arial, sans-serif; color: #222"> <body style="padding: 0; margin: 0; font-size: 14px; font-family: 'Helvetica Neue', Arial, sans-serif; color: #222">
@ -25,7 +24,7 @@
<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: left; padding: 0px 15px 5px 15px">
<%= yield %> <%= raw apply_inline_css(yield) %>
</td> </td>
</tr> </tr>
</table> </table>

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

@ -1,21 +1,17 @@
<table style="font-size: 15px; font-style: italic; margin: 15px; background-color: #eee; width: 520px"> <table style="font-size: 15px; font-style: italic; margin: 15px; background-color: #eee; width: 520px">
<tr> <tr>
<td style="width: 50px; vertical-align: top; padding: 5px 15px"> <td style="width: 50px; vertical-align: top; padding: 15px">
<%# Some email clients (e.g. Yahoo as of 2017-01) remove the margin
on <p> tags. Since the body itself always starts with a <p>, by
wrapping the image here in a <p> as well, we ensure that they will at
least always be aligned with each other. %>
<p>
<%= link_to( <%= link_to(
image_tag( image_tag(
attachments["avatar.png"].url, attachments["avatar.png"].url,
alt: @author, alt: @author,
title: @author title: @author,
width: 50,
height: 50
), ),
user_url(@author, :host => SERVER_URL), user_url(@author, :host => SERVER_URL),
:target => "_blank" :target => "_blank"
) %> ) %>
</p>
</td> </td>
<td style="text-align: left; vertical-align: top; padding-right: 10px"> <td style="text-align: left; vertical-align: top; padding-right: 10px">
<%= body %> <%= body %>