]> 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: 6964c44)
A better way to contrain the width of the message box whilst also allowing it to...
authorHerve Saint-Amand <git@saintamh.org>
Sun, 12 Feb 2017 12:04:43 +0000 (12:04 +0000)
committerHerve Saint-Amand <git@saintamh.org>
Sun, 12 Feb 2017 12:04:43 +0000 (12:04 +0000)
Setting a hard "width" it very compatible, but won't squeeze on narrow screens. Setting max-width works well, except in Outlook and Hotmail. We resort to old skool table tricks: a table with width=100%, with 3 columns, only oneof which, the middle one, had content, and a fixed with. This works.

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

diff --git a/app/views/layouts/notifier.html.erb b/app/views/layouts/notifier.html.erb
index c0dbac84280e841931190a4c5476e74eb29fa04b..883f1b385acaeaa73fab4a3bebcd8723ebe16532 100644 (file)
--- a/app/views/layouts/notifier.html.erb
+++ b/app/views/layouts/notifier.html.erb
@@ -5,8 +5,10 @@
   <body style="padding: 0; margin: 0; font-size: 14px; font-family: 'Helvetica Neue', Arial, sans-serif; color: #222">
     <table style="background-color: #eee; width: 100%">
       <tr>
-        <td style="text-align: center; padding: 0px 7px">
-          <table style="max-width: 600px; color: #222; margin-left: auto; margin-right: auto">
+        <%# 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 width="600" style="text-align: center; padding: 0px 7px">
+          <table style="width: 100%; color: #222; margin-left: auto; margin-right: auto">
             <tr>
               <td style="width: 30px; padding: 10px 10px 10px 0px">
                 <a href="<%= @root_url %>" target="_blank">
@@ -34,6 +36,7 @@
             </tr>
           </table>
         </td>
+        <td rowspan="2"></td>
       </tr>
       <tr>
         <td style="text-align: center; font-size: 11px; font-family: 'Helvetica Neue', Arial, sans-serif">
diff --git a/app/views/notifier/_message_body.html.erb b/app/views/notifier/_message_body.html.erb
index 485cd3c445d7f41dfe5248df9888dbf56cc0f0ed..b71c5f99443b75fb5be8acf36c00a34040aedcf4 100644 (file)
--- a/app/views/notifier/_message_body.html.erb
+++ b/app/views/notifier/_message_body.html.erb
@@ -1,6 +1,6 @@
-<table style="font-size: 15px; margin: 15px 0px; background-color: #eee; max-width: 565px">
+<table style="font-size: 15px; margin: 15px 0px; background-color: #eee; width: 100%">
   <tr>
-    <td style="width: 50px; vertical-align: top; padding: 15px">
+    <td style="width: 50px; min-width: 50px; vertical-align: top; padding: 15px">
       <%= link_to(
           image_tag(
             attachments["avatar.png"].url,
@@ -14,7 +14,7 @@
           :target => "_blank"
       ) %>
     </td>
-    <td style="text-align: left; vertical-align: top; padding-right: 10px; max-width: 550px">
+    <td style="text-align: left; vertical-align: top; padding-right: 10px; width: 100%">
       <%= body %>
     </td>
   </tr>
The OpenStreetMap web site