From 59fcbfefe09183911d6942d9e2ad59727a17cb89 Mon Sep 17 00:00:00 2001
From: Steffen Schaefer <steffen.schaefer@sap.com>
Date: Thu, 21 Jul 2016 10:25:34 +0200
Subject: [PATCH] Several adjustments to improve the notification mail styles
 for better mail client compatibility

---
 .../impl/notification-mail-template.html      | 18 ++++++----
 .../notification-mail-template.original.html  | 34 ++++++++++++-------
 .../impl/NotificationSetNotification.java     |  4 ++-
 3 files changed, 36 insertions(+), 20 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 c9dba3e0a9d..f214630c897 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
@@ -4,20 +4,24 @@
     <title>${title}</title>
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <style>
-      .linkButton:active{padding:15px;margin:10px 10px 0px 0px;display:inline-block;background-color:#337ab7;border-radius:4px;color:#ffffff;border:1px solid #2e6da4;text-decoration:none}
-      .linkButton:visited{padding:15px;margin:10px 10px 0px 0px;display:inline-block;background-color:#337ab7;border-radius:4px;color:#ffffff;border:1px solid #2e6da4;text-decoration:none}
+      .linkButton:active{margin:10px 10px 0px 0px;display:inline-block;background-color:#337ab7;border-radius:4px;color:#ffffff;border:1px solid #2e6da4;text-decoration:none}
+      .linkButton:visited{margin:10px 10px 0px 0px;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;background-color:white">
-        <div class="header" style="background-color:black;padding:10px;font-size:16px;border-bottom:.2em solid #efaa00;color:white">
-          <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 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="padding:10px">
+            <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="content" style="margin:10px;padding:20px 30px;min-height:200px">
-          ${content}
+        <div class="contentWrapper" style="background-color:white">
+          <div class="content" style="padding:20px 30px;min-height:200px">
+            ${content}
+            </div>
         </div>
       </div>
       <div class="footer" style="margin:30px 10% 200px 10%;text-align:center;font-size:13px">
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 3747718bfac..e70a308ed80 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,16 +9,11 @@
     <title>${title}</title>
     <meta name="viewport" content="width=device-width,initial-scale=1.0" />
     <style type="text/css">
-        .content {
-            margin: 10px;
-        }
-
         .buttonContainer {
             display: inline-block;
         }
 
         .linkButton, .linkButton:active, .linkButton:visited {
-            padding: 15px;
             margin: 10px 10px 0px 0px;
             display: inline-block;
             background-color: #337ab7;
@@ -28,6 +23,11 @@
             text-decoration: none;
         }
 
+        .linkButtonContent {
+            padding: 15px;
+            display: inline-block;
+        }
+
         .linkButton:hover {
             background-color: #2b618e;
             border: 1px solid #204d74;
@@ -45,17 +45,23 @@
 
         .main {
             border: 1px solid black;
-            background-color: white;
         }
 
-        .header {
+        .headerWrapper {
             background-color: black;
-            padding: 10px;
             font-size: 16px;
             border-bottom: .2em solid #efaa00;
             color: white;
         }
 
+        .header {
+            padding: 10px;
+        }
+
+        .contentWrapper {
+            background-color: white;
+        }
+
         .content {
             padding: 20px 30px;
             min-height: 200px;
@@ -83,11 +89,15 @@
 <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="header">
-            <img src="cid:saplogo" class="sapLogo" alt="SAP "/><span class="sailingAnalytics">Sailing Analytics</span>
+        <div class="headerWrapper">
+	        <div class="header">
+	            <img src="cid:saplogo" class="sapLogo" alt="SAP "/><span class="sailingAnalytics">Sailing Analytics</span>
+	        </div>
         </div>
-        <div class="content">
-            ${content}
+        <div class="contentWrapper">
+	        <div class="content">
+	            ${content}
+	        </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 0938e6e679e..c213e02b3a1 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
@@ -122,8 +122,10 @@ public abstract class NotificationSetNotification<T> implements MailNotification
             bodyContent.append("<div class=\"buttonContainer\">")
                 .append("<a class=\"linkButton\" href=\"")
                 .append(link.getB())
-                .append("\" style=\"padding:15px;margin:10px 10px 0px 0px;display:inline-block;background-color:#337ab7;border-radius:4px;color:#ffffff;border:1px solid #2e6da4;text-decoration:none;\">")
+                .append("\" style=\"margin:10px 10px 0px 0px;display:inline-block;background-color:#337ab7;border-radius:4px;color:#ffffff;border:1px solid #2e6da4;text-decoration:none;\">")
+                .append("<span class=\"linkButtonContent\" style=\"padding: 15px;display: inline-block;\">")
                 .append(htmlify(link.getA()))
+                .append("</span>")
                 .append("</a>")
                 .append("</div>");
         }