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 }}
|
||||
|
||||
{{ 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 }}
|
||||
<div style="
|
||||
padding: 18px;
|
||||
margin-top: 7px;
|
||||
border: 1px solid #bbb;
|
||||
">
|
||||
<strong>{{ .Status }}</strong><br>
|
||||
<div style="width: 42%; float: left; min-width: 220px;">
|
||||
<em>Labels</em><br>
|
||||
<ul>
|
||||
{{ range $label, $value := .Labels }}
|
||||
<li style="whitespace: pre-wrap;">{{ $label }}: {{ $value }}</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
<tr>
|
||||
<td class="alert">
|
||||
|
||||
<div class="labels column">
|
||||
<table width="100%">
|
||||
<tr>
|
||||
<td class="inner">
|
||||
<ul>
|
||||
{{ range $label, $value := .Labels }}
|
||||
<li>
|
||||
<span class="labelname">{{ $label }}</span>
|
||||
<span class="labelvalue">{{ $value }}</span>
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div style="width: 55%; float: right; min-width: 220px">
|
||||
<em>Annotations</em><br>
|
||||
<ul>
|
||||
{{ range $label, $value := .Annotations }}
|
||||
<li style="whitespace: pre-wrap;">{{ $label }}: {{ $value }}</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
|
||||
<div class="annotations column">
|
||||
<table width="100%">
|
||||
<tr>
|
||||
<td class="inner">
|
||||
<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 }}
|
||||
|
||||
</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 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 }}
|
||||
Loading…
Reference in New Issue