Add proper styling of mail template
This commit is contained in:
Fabian Reinartz
parent
329b36594b
commit
899257ee23
|
|
@ -28,32 +28,190 @@ Content-Type: text/html; charset=UTF-8
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
||||||
{{ define "email.default.html" }}
|
{{ define "email.default.html" }}
|
||||||
<h1 style="font-size: 115%">{{ len .Alerts }} alert(s) for {{ .GroupLabels }}</h1>
|
{{/*
|
||||||
|
|
||||||
|
The following is the readable HTML code for the mail template. It has to be inlined, e.g. by
|
||||||
|
http://templates.mailchimp.com/resources/inline-css/.
|
||||||
|
|
||||||
|
The inlined output is inserted after this comment.
|
||||||
|
|
||||||
|
----
|
||||||
|
<style>
|
||||||
|
table {
|
||||||
|
border-spacing: 0;
|
||||||
|
border-collapse: collapse;
|
||||||
|
}
|
||||||
|
table.outer {
|
||||||
|
margin: 0 auto;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 700px;
|
||||||
|
background: #fff;
|
||||||
|
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||||
|
color: #202020;
|
||||||
|
}
|
||||||
|
td {
|
||||||
|
padding: 0;
|
||||||
|
text-align: left;
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
.inner {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
font-size: 1.15em;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 18px;
|
||||||
|
}
|
||||||
|
li .labelname, li .labelvalue {
|
||||||
|
color: inherit;
|
||||||
|
white-space: pre-wrap;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
li .labelname {
|
||||||
|
padding-right: 15px;
|
||||||
|
font-weight: bold;
|
||||||
|
font-family: monospace;
|
||||||
|
}
|
||||||
|
li .labelvalue {
|
||||||
|
font-size: 0.9em;
|
||||||
|
}
|
||||||
|
ul {
|
||||||
|
list-style: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
.column {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
.alert {
|
||||||
|
border: 1px dotted #959595;
|
||||||
|
}
|
||||||
|
.labels.column {
|
||||||
|
max-width: 295px;
|
||||||
|
color: #fff;
|
||||||
|
background: #4f4f4f;
|
||||||
|
}
|
||||||
|
.annotations.column {
|
||||||
|
max-width: 395px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<table class="outer" align="center">
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<table width="100%">
|
||||||
|
<tr>
|
||||||
|
<td class="inner">
|
||||||
|
<h1>{{ len .Alerts }} alert{{ if gt (len .Alerts) 1 }}s{{ end }} for {{ .GroupLabels }}</h1>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</td>
|
||||||
|
|
||||||
{{ range .Alerts }}
|
{{ range .Alerts }}
|
||||||
<div style="
|
<tr>
|
||||||
padding: 18px;
|
<td class="alert">
|
||||||
margin-top: 7px;
|
|
||||||
border: 1px solid #bbb;
|
<div class="labels column">
|
||||||
">
|
<table width="100%">
|
||||||
<strong>{{ .Status }}</strong><br>
|
<tr>
|
||||||
<div style="width: 42%; float: left; min-width: 220px;">
|
<td class="inner">
|
||||||
<em>Labels</em><br>
|
<ul>
|
||||||
<ul>
|
{{ range $label, $value := .Labels }}
|
||||||
{{ range $label, $value := .Labels }}
|
<li>
|
||||||
<li style="whitespace: pre-wrap;">{{ $label }}: {{ $value }}</li>
|
<span class="labelname">{{ $label }}</span>
|
||||||
{{ end }}
|
<span class="labelvalue">{{ $value }}</span>
|
||||||
</ul>
|
</li>
|
||||||
|
{{ end }}
|
||||||
|
</ul>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
</div>
|
</div>
|
||||||
<div style="width: 55%; float: right; min-width: 220px">
|
|
||||||
<em>Annotations</em><br>
|
<div class="annotations column">
|
||||||
<ul>
|
<table width="100%">
|
||||||
{{ range $label, $value := .Annotations }}
|
<tr>
|
||||||
<li style="whitespace: pre-wrap;">{{ $label }}: {{ $value }}</li>
|
<td class="inner">
|
||||||
{{ end }}
|
<ul>
|
||||||
</ul>
|
{{ range $label, $value := .Annotations }}
|
||||||
|
<li>
|
||||||
|
<span class="labelname">{{ $label }}</span>
|
||||||
|
<span class="labelvalue">{{ $value }}</span>
|
||||||
|
</li>
|
||||||
|
{{ end }}
|
||||||
|
</ul>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
||||||
|
</table>
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
Template end, the following is the inlined version of the above.
|
||||||
|
|
||||||
|
*/}}
|
||||||
|
<table class="outer" align="center" style="border-spacing: 0;border-collapse: collapse;margin: 0 auto;width: 100%;max-width: 700px;background: #fff;font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;color: #202020;">
|
||||||
|
<tr>
|
||||||
|
<td style="padding: 0;text-align: left;vertical-align: top;">
|
||||||
|
<table width="100%" style="border-spacing: 0;border-collapse: collapse;">
|
||||||
|
<tr>
|
||||||
|
<td class="inner" style="padding: 10px;text-align: left;vertical-align: top;">
|
||||||
|
<h1 style="font-size: 1.15em;font-weight: bold;margin-bottom: 18px;">{{ len .Alerts }} alert{{ if gt (len .Alerts) 1 }}s{{ end }} for {{ .GroupLabels }}</h1>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</td>
|
||||||
|
|
||||||
|
{{ range .Alerts }}
|
||||||
|
</tr><tr>
|
||||||
|
<td class="alert" style="padding: 0;text-align: left;vertical-align: top;border: 1px dotted #959595;">
|
||||||
|
|
||||||
|
<div class="labels column" style="width: 100%;height: 100%;display: inline-block;vertical-align: top;max-width: 295px;color: #fff;background: #4f4f4f;">
|
||||||
|
<table width="100%" style="border-spacing: 0;border-collapse: collapse;">
|
||||||
|
<tr>
|
||||||
|
<td class="inner" style="padding: 10px;text-align: left;vertical-align: top;">
|
||||||
|
<ul style="list-style: none;margin: 0;padding: 0;">
|
||||||
|
{{ range $label, $value := .Labels }}
|
||||||
|
<li>
|
||||||
|
<span class="labelname" style="color: inherit;white-space: pre-wrap;display: inline-block;padding-right: 15px;font-weight: bold;font-family: monospace;">{{ $label }}</span>
|
||||||
|
<span class="labelvalue" style="color: inherit;white-space: pre-wrap;display: inline-block;font-size: 0.9em;">{{ $value }}</span>
|
||||||
|
</li>
|
||||||
|
{{ end }}
|
||||||
|
</ul>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
</div>
|
</div>
|
||||||
<div style="clear: both;"> </div>
|
|
||||||
</div>
|
<div class="annotations column" style="width: 100%;height: 100%;display: inline-block;vertical-align: top;max-width: 395px;">
|
||||||
|
<table width="100%" style="border-spacing: 0;border-collapse: collapse;">
|
||||||
|
<tr>
|
||||||
|
<td class="inner" style="padding: 10px;text-align: left;vertical-align: top;">
|
||||||
|
<ul style="list-style: none;margin: 0;padding: 0;">
|
||||||
|
{{ range $label, $value := .Annotations }}
|
||||||
|
<li>
|
||||||
|
<span class="labelname" style="color: inherit;white-space: pre-wrap;display: inline-block;padding-right: 15px;font-weight: bold;font-family: monospace;">{{ $label }}</span>
|
||||||
|
<span class="labelvalue" style="color: inherit;white-space: pre-wrap;display: inline-block;font-size: 0.9em;">{{ $value }}</span>
|
||||||
|
</li>
|
||||||
|
{{ end }}
|
||||||
|
</ul>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
</table>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
Loading…
Reference in New Issue