From 4641fdcff12b1a45d95eb680f606e9079e7a2659 Mon Sep 17 00:00:00 2001
From: Steffen Schaefer <steffen.schaefer@sap.com>
Date: Thu, 21 Jul 2016 17:06:15 +0200
Subject: [PATCH] Notification mail layout adjustments for improved Outlook
 compatibility

---
 .../impl/notification-mail-template.html      | 45 +++++----
 .../notification-mail-template.original.html  | 92 +++++++++----------
 .../impl/NotificationSetNotification.java     |  2 +-
 3 files changed, 76 insertions(+), 63 deletions(-)

diff --git a/java/com.sap.sailing.server/resources/com/sap/sailing/server/notification/impl/notification-mail-template.html b/java/com.sap.sailing.server/resources/com/sap/sailing/server/notification/impl/notification-mail-template.html
index c42f9f5cbab..95dd25bf605 100644
--- a/java/com.sap.sailing.server/resources/com/sap/sailing/server/notification/impl/notification-mail-template.html
+++ b/java/com.sap.sailing.server/resources/com/sap/sailing/server/notification/impl/notification-mail-template.html
@@ -13,22 +13,35 @@
   <body marginheight="0" topmargin="0" marginwidth="0" bgcolor="#e3e3e3" offset="0" leftmargin="0" style="background-color: #e3e3e3;">
     <div class="body" style="background-color:#e3e3e3;color:black;padding:40px;max-width:800px;margin:0 auto;margin-bottom:100px;font-family:'Open Sans', sans-serif">
       <div class="main" style="border:1px solid black">
-        <div class="headerWrapper" style="background-color:black;font-size:16px;border-bottom:.2em solid #efaa00;color:white">
-          <div class="header" style="border:10px solid black">
-            <img src="cid:saplogo" class="sapLogo" alt="SAP" style="height:30px;width:auto;float:left"><span class="sailingAnalytics" style="display:inline-block;line-height:16px;border-top:7px solid black;border-bottom:7px solid black;border-left:5px solid black">Sailing Analytics</span>
-            <div class="clear" style="clear:both"></div>
-          </div>
-        </div>
-        <div class="contentWrapper" style="background-color:white">
-          <div class="content" style="border:20px solid white;border-right:30px solid white;border-left:30px solid white;min-height:200px;font-size:16px">
-            ${content}
-                
-            <div class="buttons" style="border-top:15px solid white;border-bottom:15px solid white">
-              ${buttons}
-                </div>
-          </div>
-          <div class="clear" style="clear:both"></div>
-        </div>
+        <table class="header" width="100%" border="0" cellspacing="0" cellpadding="0" style="padding:0;margin:0;background-color:black;border-color:black;width:100%;border-bottom:3px solid #efaa00">
+          <tr>
+            <td height="10" colspan="4"></td>
+          </tr>
+          <tr>
+            <td width="10"></td>
+            <td width="65" valign="top"><img src="cid:saplogo" class="sapLogo" alt="SAP" style="height:30px;width:60px"></td>
+            <td width="auto" valign="middle" class="sailingAnalytics" style="color:white;font-family:'Open Sans', sans-serif;font-size:16px">Sailing&nbsp;Analytics</td>
+            <td width="10"></td>
+          </tr>
+          <tr>
+            <td height="10" colspan="4"></td>
+          </tr>
+        </table>
+        <table class="content" width="100%" border="0" cellspacing="0" cellpadding="0" style="padding:0;margin:0;background-color:white;border-color:white;min-height:200px;font-size:16px;width:100%;border-top:20px solid white;border-bottom:20px solid white">
+          <tr>
+            <td width="30"></td>
+            <td width="auto">${content}</td>
+            <td width="30"></td>
+          </tr>
+          <tr>
+            <td height="20" colspan="3"></td>
+          </tr>
+          <tr>
+            <td width="30"></td>
+            <td width="auto">${buttons}</td>
+            <td width="30"></td>
+          </tr>
+        </table>
       </div>
       <div class="footer" style="margin:30px 10% 200px 10%;text-align:center;font-size:13px">
         <p>${subscription_information}</p>
diff --git a/java/com.sap.sailing.server/resources/com/sap/sailing/server/notification/impl/notification-mail-template.original.html b/java/com.sap.sailing.server/resources/com/sap/sailing/server/notification/impl/notification-mail-template.original.html
index b1adba7f095..59702997e3f 100644
--- a/java/com.sap.sailing.server/resources/com/sap/sailing/server/notification/impl/notification-mail-template.original.html
+++ b/java/com.sap.sailing.server/resources/com/sap/sailing/server/notification/impl/notification-mail-template.original.html
@@ -9,12 +9,7 @@
     <title>${title}</title>
     <meta name="viewport" content="width=device-width,initial-scale=1.0" />
     <style type="text/css">
-        .buttons {
-            border-top: 15px solid white;
-            border-bottom: 15px solid white;
-        }
         .buttonContainer {
-            float: left;
             border-top: 10px solid white;
             border-right: 10px solid white;
         }
@@ -53,27 +48,25 @@
             border: 1px solid black;
         }
 
-        .headerWrapper {
-            background-color: black;
-            font-size: 16px;
-            border-bottom: .2em solid #efaa00;
-            color: white;
-        }
-
         .header {
-            border: 10px solid black;
-        }
-
-        .contentWrapper {
-            background-color: white;
+            padding: 0;
+            margin: 0;
+            background-color: black;
+            border-color: black;
+            width: 100%;
+            border-bottom: 3px solid #efaa00;
         }
 
         .content {
-            border: 20px solid white;
-            border-right: 30px solid white;
-            border-left: 30px solid white;
+            padding: 0;
+            margin: 0;
+            background-color: white;
+            border-color: white;
             min-height: 200px;
             font-size: 16px;
+            width: 100%;
+            border-top: 20px solid white;
+            border-bottom: 20px solid white;
         }
 
         .footer {
@@ -84,20 +77,13 @@
 
         .sapLogo {
             height: 30px;
-            width: auto;
-            float: left;
+            width: 60px;
         }
 
         .sailingAnalytics {
-            display: inline-block;
-            line-height: 16px;
-            border-top: 7px solid black;
-            border-bottom: 7px solid black;
-            border-left: 5px solid black;
-        }
-        
-        .clear {
-            clear: both;
+            color: white;
+            font-family: 'Open Sans', sans-serif;
+            font-size: 16px;
         }
         
         .paragraph {
@@ -109,21 +95,35 @@
 <body marginheight="0" topmargin="0" marginwidth="0" bgcolor="#e3e3e3" offset="0" leftmargin="0" style="background-color: #e3e3e3;">
 <div class="body">
     <div class="main">
-        <div class="headerWrapper">
-            <div class="header">
-                <img src="cid:saplogo" class="sapLogo" alt="SAP"/><span class="sailingAnalytics">Sailing Analytics</span>
-                <div class="clear"></div>
-            </div>
-        </div>
-        <div class="contentWrapper">
-            <div class="content">
-                ${content}
-                <div class="buttons">
-                    ${buttons}
-                </div>
-            </div>
-            <div class="clear"></div>
-        </div>
+        <table class="header" width="100%" border="0" cellspacing="0" cellpadding="0">
+            <tr>
+                <td height="10" colspan="4"></td>
+            </tr>
+            <tr>
+                <td width="10"></td>
+                <td width="65" valign="top"><img src="cid:saplogo" class="sapLogo" alt="SAP"/></td>
+                <td width="auto" valign="middle" class="sailingAnalytics">Sailing&nbsp;Analytics</td>
+                <td width="10"></td>
+            </tr>
+            <tr>
+                <td height="10" colspan="4"></td>
+            </tr>
+        </table>
+        <table class="content" width="100%" border="0" cellspacing="0" cellpadding="0">
+            <tr>
+                <td width="30"></td>
+                <td width="auto">${content}</td>
+                <td width="30"></td>
+            </tr>
+            <tr>
+                <td height="20" colspan="3"></td>
+            </tr>
+            <tr>
+                <td width="30"></td>
+                <td width="auto">${buttons}</td>
+                <td width="30"></td>
+            </tr>
+        </table>
     </div>
     <div class="footer">
         <p>${subscription_information}</p>
diff --git a/java/com.sap.sailing.server/src/com/sap/sailing/server/notification/impl/NotificationSetNotification.java b/java/com.sap.sailing.server/src/com/sap/sailing/server/notification/impl/NotificationSetNotification.java
index 071f6bb3503..9eb3443470c 100644
--- a/java/com.sap.sailing.server/src/com/sap/sailing/server/notification/impl/NotificationSetNotification.java
+++ b/java/com.sap.sailing.server/src/com/sap/sailing/server/notification/impl/NotificationSetNotification.java
@@ -120,7 +120,7 @@ public abstract class NotificationSetNotification<T> implements MailNotification
                 .append("</div>");
         StringBuilder buttons = new StringBuilder();
         for (Pair<String, String> link : notificationMailTemplate.getLabelsAndLinkUrls()) {
-            buttons.append("<span class=\"buttonContainer\" style=\"float: left; border-top: 10px solid white; border-right: 10px solid white;\">")
+            buttons.append("<span class=\"buttonContainer\" style=\"border-top: 10px solid white; border-right: 10px solid white;\">")
                 .append("<a class=\"linkButton\" href=\"")
                 .append(link.getB())
                 .append("\" style=\"display:inline-block;background-color:#337ab7;border-radius:4px;color:#ffffff;border:1px solid #2e6da4;text-decoration:none;\">")