Several adjustments to improve the notification mail styles for better

mail client compatibility
This commit is contained in:
Steffen Schaefer committed 2016-07-21 10:25:34 +02:00
1 parent 9d9b66ae00
commit 59fcbfefe0
3 files changed
+36 -20

No files matched your search

@@ -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">
@@ -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">