IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

redesign email template

Browse Source
This commit is contained in:
Trent White
2016-08-26 14:25:39 -04:00
parent 35b90afdd0
commit ab4f06bc54
16 changed files with 770 additions and 364 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
emails/templates/alert_notification.html
View File

@@ -16,7 +16,7 @@
<table class="row" >
<tr>
<td class="wrapper last">
<td class="last">
<table class="twelve columns">
<tr>
<td class="center">
@@ -31,24 +31,24 @@
[[if ne .State "ok" ]]
<table class="row" >
<tr>
<td class="wrapper last">
<td class="last">
<center>
<table class="twelve columns" >
<tr>
<td class="wrapper last" style="font-weight: bold;">
Metric name
<td class="six last">
<h5 style="font-weight: bold;">Metric name</h5>
</td>
<td style="font-weight: bold;">
Value
<td class="six">
<h5 style="font-weight: bold;">Value</h5>
</td>
</tr>
[[range .EvalMatches]] dwds
[[range .EvalMatches]]
<tr>
<td class="wrapper last">
[[.Metric]]
<td class="six last">
<h5 class="data">[[.Metric]]</h5>
</td>
<td>
[[.Value]]
<td class="six">
<h5 class="data">[[.Value]]</h5>
</td>
</tr>
[[end]]
@@ -79,8 +79,23 @@
<td class="wrapper last">
<table class="twelve columns">
<tr>
<td class="center">
<a href="[[.RuleUrl]]" target="_blank">Alert rule</a> - <a href="[[.AlertPageUrl]]" target="_blank">Alerts page</a>
<td class="center six">
<table class="better-button" align="center" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" class="better-button" bgcolor="#ff8f2b">
<a href="[[.RuleUrl]]" target="_blank">View your Alert rule</a>
</td>
</tr>
</table>
</td>
<td class="center six">
<table class="better-button" align="center" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" class="better-button-alt" bgcolor="#efefef">
<a href="[[.AlertPageUrl]]" target="_blank"> Go to the Alerts page</a>
</td>
</tr>
</table>
</td>
</tr>
</table>

115
emails/templates/alert_notification_example.html Normal file
View File

@@ -0,0 +1,115 @@
<table class="row" style="border-collapse: collapse; border-spacing: 0; display: block; padding: 0px; position: relative; text-align: left; vertical-align: top; width: 100%">
<tr style="padding: 0; text-align: left; vertical-align: top" align="left">
<td class="wrapper last" style="-moz-hyphens: auto; -webkit-font-smoothing: antialiased; -webkit-hyphens: auto; -webkit-text-size-adjust: none; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; hyphens: auto; line-height: 19px; margin: 0; padding: 10px 0px 0px; position: relative; text-align: left; vertical-align: top; word-break: break-word" align="left" valign="top">
<table class="twelve columns" style="border-collapse: collapse; border-spacing: 0; margin: 0 auto; padding: 0; text-align: left; vertical-align: top; width: 580px">
<tr style="padding: 0; text-align: left; vertical-align: top" align="left">
<td class="center" style="-moz-hyphens: auto; -webkit-font-smoothing: antialiased; -webkit-hyphens: auto; -webkit-text-size-adjust: none; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; hyphens: auto; line-height: 19px; margin: 0; padding: 0px 0px 10px; text-align: center; vertical-align: top; word-break: break-word" align="center" valign="top">
<h3 style="-webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; /*text-align: center*/; color: #D63232; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 22px; font-weight: bold; font-style: italic; line-height: 1.3; margin: 20px 0 0; padding: 0; text-align: left; word-break: normal" align="left"><img src="http://play.grafana.org/img/critical.svg" style="width: 40px; margin-right: 10px;"/> [CRITICAL] Imaginary timeserie alert</h3>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table class="row" style="border-collapse: collapse; border-spacing: 0; display: block; padding: 0px; position: relative; text-align: left; vertical-align: top; width: 100%">
<tr style="padding: 0; text-align: left; vertical-align: top" align="left">
<td class="wrapper last" style="-moz-hyphens: auto; -webkit-font-smoothing: antialiased; -webkit-hyphens: auto; -webkit-text-size-adjust: none; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; hyphens: auto; line-height: 19px; margin: 0; padding: 10px 0px 0px; position: relative; text-align: left; vertical-align: top; word-break: break-word" align="left" valign="top">
<table class="twelve columns" style="border-collapse: collapse; border-spacing: 0; margin: 0 auto; padding: 0; text-align: left; vertical-align: top; width: 580px">
<tr style="padding: 0; text-align: left; vertical-align: top" align="left">
<td class="center" style="-moz-hyphens: auto; -webkit-font-smoothing: antialiased; -webkit-hyphens: auto; -webkit-text-size-adjust: none; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; hyphens: auto; line-height: 19px; margin: 0; padding: 0px 0px 10px; text-align: center; vertical-align: top; word-break: break-word" align="center" valign="top">
<p style="-webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; /*text-align: center*/; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; line-height: 19px; margin: 0 0 10px; padding: 0; text-align: left" align="left">Alert message that will support markdown in some distant future.</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table class="row" style="border-collapse: collapse; border-spacing: 0; display: block; padding: 0px; position: relative; text-align: left; vertical-align: top; width: 100%">
<tr style="padding: 0; text-align: left; vertical-align: top" align="left">
<td class="column last" style="-moz-hyphens: auto; -webkit-font-smoothing: antialiased; -webkit-hyphens: auto; -webkit-text-size-adjust: none; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; hyphens: auto; line-height: 19px; margin: 0; padding: 10px 0px 0px; position: relative; text-align: left; vertical-align: top; word-break: break-word" align="left" valign="top">
<center style="min-width: 580px; width: 100%">
<table class="twelve columns" style="border-collapse: collapse; border-spacing: 0; margin: 0 auto; padding: 0; text-align: left; vertical-align: top; width: 580px">
<tr style="padding: 0; text-align: left; vertical-align: top" align="left">
<td class="six last" style="-moz-hyphens: auto; -webkit-font-smoothing: antialiased; -webkit-hyphens: auto; -webkit-text-size-adjust: none; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: bold; line-height: 1.3; margin: 0; padding: 0; word-break: normal;" align="left" valign="top">
Metric name
</td>
<td class="six" style="-moz-hyphens: auto; -webkit-font-smoothing: antialiased; -webkit-hyphens: auto; -webkit-text-size-adjust: none; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: bold; line-height: 1.3; margin: 0; padding: 0; word-break: normal;" align="left" valign="top">
Value
</td>
</tr>
<tr style="padding: 0; text-align: left; vertical-align: top" align="left">
<td class="six last" style="-moz-hyphens: auto; -webkit-font-smoothing: antialiased; -webkit-hyphens: auto; -webkit-text-size-adjust: none; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 1.5; margin: 0; padding: 0; word-break: normal;" align="left" valign="top">
desktop
</td>
<td class="six" style="-moz-hyphens: auto; -webkit-font-smoothing: antialiased; -webkit-hyphens: auto; -webkit-text-size-adjust: none; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 1.5; margin: 0; padding: 0; word-break: normal;" align="left" valign="top">
40
</td>
</tr>
<tr style="padding: 0; text-align: left; vertical-align: top" align="left">
<td class="six last" style="-moz-hyphens: auto; -webkit-font-smoothing: antialiased; -webkit-hyphens: auto; -webkit-text-size-adjust: none; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 1.5; margin: 0; padding: 0; word-break: normal;" align="left" valign="top">
mobile
</td>
<td class="six" style="-moz-hyphens: auto; -webkit-font-smoothing: antialiased; -webkit-hyphens: auto; -webkit-text-size-adjust: none; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 1.5; margin: 0; padding: 0; word-break: normal;" align="left" valign="top">
20
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
<table class="row" style="border-collapse: collapse; border-spacing: 0; display: block; padding: 0px; position: relative; text-align: left; vertical-align: top; width: 100%">
<tr style="padding: 0; text-align: left; vertical-align: top" align="left">
<td class="wrapper last" style="-moz-hyphens: auto; -webkit-font-smoothing: antialiased; -webkit-hyphens: auto; -webkit-text-size-adjust: none; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; hyphens: auto; line-height: 19px; margin: 0; padding: 10px 0px 0px; position: relative; text-align: left; vertical-align: top; word-break: break-word" align="left" valign="top">
<table class="twelve columns" style="border-collapse: collapse; border-spacing: 0; margin: 0 auto; padding: 0; text-align: left; vertical-align: top; width: 580px">
<tr style="padding: 0; text-align: left; vertical-align: top" align="left">
<td class="center" style="-moz-hyphens: auto; -webkit-font-smoothing: antialiased; -webkit-hyphens: auto; -webkit-text-size-adjust: none; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; hyphens: auto; line-height: 19px; margin: 0; padding: 0px 0px 10px; text-align: center; vertical-align: top; word-break: break-word" align="center" valign="top">
<img src="http://play.grafana.org/render/dashboard-solo/db/graphite-carbon-metrics?panelId=2&amp;from=1472149131057&amp;to=1472159931058&amp;width=1000&amp;height=500" style="-ms-interpolation-mode: bicubic; clear: both; display: block; float: left; max-width: 100%; outline: none; text-decoration: none; width: auto" align="left" />
</td>
</tr>
</table>
</td>
</tr>
</table>
<table class="row">
<tr>
<td class="wrapper last">
<table class="twelve columns">
<tr>
<td class="center six">
<table class="better-button" align="center" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" class="better-button" bgcolor="#ff8f2b">
<a href="[[.RuleUrl]]" target="_blank">View your Alert rule</a>
</td>
</tr>
</table>
</td>
<td class="center six">
<table class="better-button" align="center" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" class="better-button-alt" bgcolor="#efefef">
<a href="[[.AlertPageUrl]]" target="_blank"> Go to the Alerts page</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>

4
emails/templates/invited_to_org.html
View File

@@ -9,7 +9,7 @@
<table class="twelve columns">
<tr>
<td>
<h3>You have been added to [[.OrgName]]</h3>
<h4 class="center">You have been added to [[.OrgName]]</h4>
</td>
<td class="expander"></td>
</tr>
@@ -25,7 +25,7 @@
<table class="twelve columns">
<tr>
<td class="center">
<p><span class="emphasis">[[.InvitedBy]]</span> has added you to the <span class="emphasis">[[.OrgName]]</span> organization in Grafana.
<p><b>[[.InvitedBy]]</b> has added you to the <b>[[.OrgName]]</b> organization in Grafana.
<p>Once logged in, [[.OrgName]] will be available in the left side menu, in the dropdown below your username.</p>
</td>
<td class="expander"></td>

65
emails/templates/layouts/default.html
View File

@@ -10,25 +10,25 @@
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" class="main" style="background: #2e2e2e; height: 100% !important; margin: 0 auto; padding: 0; width: 100% !important" bgcolor="#2e2e2e"><style type="text/css">
body {
height: 100% !important; width: 100% !important;
height: 100% !important; width: 100% !important;
}
body .copy {
-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
}
.ExternalClass {
width: 100%;
width: 100%;
}
.ExternalClass {
line-height: 100%;
line-height: 100%;
}
img {
-ms-interpolation-mode: bicubic;
-ms-interpolation-mode: bicubic;
}
img {
border: 0 !important; outline: none !important; text-decoration: none !important;
border: 0 !important; outline: none !important; text-decoration: none !important;
}
a:hover {
text-decoration: underline;
text-decoration: underline;
}
td[class="stack-column-center"] {
text-align: center !important;
@@ -46,12 +46,6 @@ td[class="stack-column-center"] {
img[class="fluid-centered"] {
margin: auto !important;
}
table[class="articles"] {
width: 90% !important;
}
table[class="article-links"] {
width: 100% !important;
}
td[class="comms-content"] {
padding: 20px !important;
}
@@ -91,41 +85,8 @@ td[class="stack-column-center"] {
td[class="spacer mb-shorten"] {
height: 25px !important;
}
a[class="footer-legal-links"] {
display: block !important; margin-bottom: 6px !important; font-size: 12px !important; line-height: 18px !important;
}
td[class="footer-links-list"] {
margin: 12px 0;
}
a[class="post-title"] {
font-size: 22px !important; line-height: 32px !important;
}
a[class="post-title spotlight"] {
font-size: 22px !important; line-height: 32px !important;
}
td[class="legal-text"] {
font-size: 12px !important; line-height: 18px !important;
}
td[class="avatar"] {
width: 30% !important;
}
td[class="links"] {
width: 30% !important;
}
td[class="links"] {
width: 70% !important;
}
a[class="main-cta"] {
width: 90% !important; font-size: 18px !important;
}
table[class="button"] {
width: 90% !important; font-size: 18px !important;
}
a[class="cta-big-link"] {
font-size: 18px !important; line-height: 26px !important;
}
a[class="btn-white"] {
font-size: 13px !important; width: 90px !important;
.two-up td {
width:270px;
}
}
</style>
@@ -174,14 +135,14 @@ td[class="stack-column-center"] {
</tr>
</table>
<!-- footer -->
<table class="row footer">
<table class="footer center">
<tr>
<td class="wrapper last">
<table class="twelve columns">
<table class="twelve columns center">
<tr>
<td align="center">
<td class="twelve" align="center">
<center>
<p style="text-align:center; font-size: 12px; color: #999999;">
<p style="text-align: center; font-size: 12px; color: #999999;">
Sent by <a href="[[.AppUrl]]">Grafana v[[.BuildVersion]]</a>
<br />&copy; 2016 Grafana and raintank
</p>

4
emails/templates/new_user_invite.html
View File

@@ -9,7 +9,7 @@
<table class="twelve columns">
<tr>
<td>
<h3>You're invited to join [[.OrgName]]</h3>
<h4 class="center">You're invited to join [[.OrgName]]</h4>
</td>
<td class="expander"></td>
</tr>
@@ -25,7 +25,7 @@
<table class="twelve columns">
<tr>
<td class="center">
<p>You've been invited to join the <span class="emphasis">[[.OrgName]]</span> organization by <span class="emphasis">[[.InvitedBy]]</span>. To accept your invitation and join the team, please click the link below:</p>
<p>You've been invited to join the <b>[[.OrgName]]</b> organization by <b>[[.InvitedBy]]</b>. To accept your invitation and join the team, please click the link below:</p>
</td>
</tr>
<tr>

4
emails/templates/reset_password.html
View File

@@ -7,7 +7,7 @@
<table class="twelve columns">
<tr>
<td>
<h3>Hi [[.Name]]</h3>
<h4>Hi [[.Name]],</h4>
</td>
<td class="expander"></td>
</tr>
@@ -24,7 +24,7 @@
<tr>
<td class="center">
<p>
Please click the following link to reset your password within <strong>[[.EmailCodeValidHours]] hours</strong>.
Please click the following link to reset your password within <b>[[.EmailCodeValidHours]] hours</b>.
</p>
<p>
<a href="[[.AppUrl]]user/password/reset?code=[[.Code]]">[[.AppUrl]]user/password/reset?code=[[.Code]]</a>

2
emails/templates/signup_started.html
View File

@@ -7,7 +7,7 @@
<table class="twelve columns">
<tr>
<td>
<h3 class="center">Complete the signup</h3>
<h4 class="center">Complete the signup</h4>
</td>
<td class="expander"></td>
</tr>

14
emails/templates/welcome_on_signup.html
View File

@@ -7,10 +7,15 @@
<table class="twelve columns">
<tr>
<td>
<h3>Hi [[.Name]]</h3>
<h4>Hi [[.Name]],</h4>
</td>
<td class="expander"></td>
</tr>
<tr>
<td>
Welcome! Ready to start building some beautiful metric and analytic dashboards?
</td>
</tr>
</table>
</td>
@@ -29,6 +34,13 @@
</td>
<td class="expander"></td>
</tr>
<tr>
<td>
Thank you for joining our community.
<br />
<p>The Grafana Team</p>
</td>
</tr>
</table>
</td>
</tr>