From b54fc14bbfb1f4709ee032dcb69bf5e0e9294358 Mon Sep 17 00:00:00 2001
From: Steffen Schaefer <steffen.schaefer@sap.com>
Date: Thu, 21 Jul 2016 11:16:20 +0200
Subject: [PATCH] Further changes to the notification mails to improve mail
 client compatibility

---
 .../impl/notification-mail-template.html      | 71 ++++++++++---------
 .../notification-mail-template.original.html  | 33 ++++++---
 .../impl/NotificationSetNotification.java     | 10 +--
 3 files changed, 66 insertions(+), 48 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 e10cf471188..de98d057ad8 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
@@ -1,34 +1,39 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
-<html>
-  <head>
-    <title>${title}</title>
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <style>
-      .linkButton:active{display:inline-block;background-color:#337ab7;border-radius:4px;color:#ffffff;border:1px solid #2e6da4;text-decoration:none}
-      .linkButton:visited{display:inline-block;background-color:#337ab7;border-radius:4px;color:#ffffff;border:1px solid #2e6da4;text-decoration:none}
-      .linkButton:hover{background-color:#2b618e;border:1px solid #204d74}
-    </style>
-    
-  </head>
-  <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;vertical-align:middle"><span class="sailingAnalytics" style="display:inline-block;line-height:30px;vertical-align:middle">Sailing Analytics</span>
-          </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">
-            ${content}
-            </div>
-        </div>
-      </div>
-      <div class="footer" style="margin:30px 10% 200px 10%;text-align:center;font-size:13px">
-        <p>${subscription_information}</p>
-        <p>${site}</p>
-        <p>${footer_links}</p>
-      </div>
-    </div>
-  </body>
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
+<!-- 
+    use a css inliner tool like https://putsmail.com/inliner to inline css
+ -->
+<html>
+  <head>
+    <title>${title}</title>
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <style>
+      .linkButton:active{display:inline-block;background-color:#337ab7;border-radius:4px;color:#ffffff;border:1px solid #2e6da4;text-decoration:none}
+      .linkButton:visited{display:inline-block;background-color:#337ab7;border-radius:4px;color:#ffffff;border:1px solid #2e6da4;text-decoration:none}
+      .linkButton:hover{background-color:#2b618e;border:1px solid #204d74}
+    </style>
+    
+  </head>
+  <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">
+            ${content}
+          </div>
+          <div class="clear" style="clear:both"></div>
+        </div>
+      </div>
+      <div class="footer" style="margin:30px 10% 200px 10%;text-align:center;font-size:13px">
+        <p>${subscription_information}</p>
+        <p>${site}</p>
+        <p>${footer_links}</p>
+      </div>
+    </div>
+  </body>
 </html>
\ No newline at end of file
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 51db1d0cb34..e6bdce54d28 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
@@ -10,7 +10,7 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0" />
     <style type="text/css">
         .buttonContainer {
-            display: inline-block;
+            float: left;
             border-top: 10px solid white;
             border-right: 10px solid white;
         }
@@ -80,13 +80,24 @@
         .sapLogo {
             height: 30px;
             width: auto;
-            vertical-align: middle;
+            float: left;
         }
 
         .sailingAnalytics {
             display: inline-block;
-            line-height: 30px;
-            vertical-align: middle;
+            line-height: 16px;
+            border-top: 7px solid black;
+            border-bottom: 7px solid black;
+            border-left: 5px solid black;
+        }
+        
+        .clear {
+            clear: both;
+        }
+        
+        .paragraph {
+            border-top: 5px solid white;
+            border-bottom: 5px solid white;
         }
     </style>
 </head>
@@ -94,14 +105,16 @@
 <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>
+            <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>
+            <div class="content">
+                ${content}
+            </div>
+            <div class="clear"></div>
         </div>
     </div>
     <div class="footer">
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 f237e5f7596..42c7e54cff0 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
@@ -112,14 +112,14 @@ public abstract class NotificationSetNotification<T> implements MailNotification
                 .append("</h1>");
         }
         String name = user.getFullName() == null || user.getFullName().isEmpty() ? user.getName() : user.getFullName();
-        bodyContent.append("<p>")
+        bodyContent.append("<div class=\"paragraph\" style=\" border-top: 5px solid white; border-bottom: 5px solid white;\">")
                 .append(htmlify(messages.get(locale, "salutation", name)))
-                .append("</p>");
-        bodyContent.append("<p>")
+                .append("</div>");
+        bodyContent.append("<div class=\"paragraph\" style=\" border-top: 5px solid white; border-bottom: 5px solid white;\">")
                 .append(htmlify(notificationMailTemplate.getText()))
-                .append("</p>");
+                .append("</div>");
         for (Pair<String, String> link : notificationMailTemplate.getLabelsAndLinkUrls()) {
-            bodyContent.append("<div class=\"buttonContainer\" style=\"display: inline-block;border-top: 10px solid white;border-right: 10px solid white;\">")
+            bodyContent.append("<div class=\"buttonContainer\" style=\"float: left; 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;\">")