]> git.openstreetmap.org Git - rails.git/commitdiff
projects / rails.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 25d8078)
Apply inline styling to all <p> tags
authorHerve Saint-Amand <git@saintamh.org>
Wed, 25 Jan 2017 22:50:52 +0000 (22:50 +0000)
committerHerve Saint-Amand <git@saintamh.org>
Wed, 25 Jan 2017 22:50:52 +0000 (22:50 +0000)
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.

app/helpers/notifier_helper.rb patch | blob | history
app/views/layouts/notifier.html.erb patch | blob | history
app/views/notifier/_message_body.html.erb patch | blob | history

diff --git a/app/helpers/notifier_helper.rb b/app/helpers/notifier_helper.rb
index 5889b6ff827223c46a213bc2c345ad4f9c330713..be01e5391a2a41e8672309474f0c32dbd017f994 100644 (file)
--- a/app/helpers/notifier_helper.rb
+++ b/app/helpers/notifier_helper.rb
@@ -18,4 +18,8 @@ module NotifierHelper
       :locals => { :body => capture(&block) }
     )
   end
+
+  def apply_inline_css(html)
+    html.gsub /<p>/, '<p style="color: black; margin: 0.75em 0">'
+  end
 end
diff --git a/app/views/layouts/notifier.html.erb b/app/views/layouts/notifier.html.erb
index 8122125cbf14c349dab66e65bbda75f00fc34f5a..8575424f2389d5662b6dcfcebba9fa8130fe2cad 100644 (file)
--- a/app/views/layouts/notifier.html.erb
+++ b/app/views/layouts/notifier.html.erb
@@ -1,6 +1,5 @@
 <html>
   <head>
-    <title></title>
     <meta charset="UTF-8"></meta>
   </head>
   <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">
                   <tr>
                     <td style="text-align: left; padding: 0px 15px 5px 15px">
-                      <%= yield %>
+                      <%= raw apply_inline_css(yield) %>
                     </td>
                   </tr>
                 </table>
diff --git a/app/views/notifier/_message_body.html.erb b/app/views/notifier/_message_body.html.erb
index a108643ceb9292fd433e743c3727f61912552a06..723bb84e5bb6ecb95348e9956e65db51863ce644 100644 (file)
--- a/app/views/notifier/_message_body.html.erb
+++ b/app/views/notifier/_message_body.html.erb
@@ -1,21 +1,17 @@
 <table style="font-size: 15px; font-style: italic; margin: 15px; background-color: #eee; width: 520px">
   <tr>
-    <td style="width: 50px; vertical-align: top; padding: 5px 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(
-            image_tag(
-              attachments["avatar.png"].url,
-              alt: @author,
-              title: @author
-            ),
-            user_url(@author, :host => SERVER_URL),
-            :target => "_blank"
-        ) %>
-      </p>
+    <td style="width: 50px; vertical-align: top; padding: 15px">
+      <%= link_to(
+          image_tag(
+            attachments["avatar.png"].url,
+            alt: @author,
+            title: @author,
+            width: 50,
+            height: 50
+          ),
+          user_url(@author, :host => SERVER_URL),
+          :target => "_blank"
+      ) %>
     </td>
     <td style="text-align: left; vertical-align: top; padding-right: 10px">
       <%= body %>
The OpenStreetMap web site