forked from capability-boosters-dev/canvas-lms
-
Notifications
You must be signed in to change notification settings - Fork 0
/
_layout.email.html.erb
115 lines (102 loc) · 4.27 KB
/
_layout.email.html.erb
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
/*
Changes to font size (14->16) for smaller screens
table[class=body] is the only selector that works for all vendors
*/
@media only screen and (max-width: 620px) {
table[class=body] p,
table[class=body] ul,
table[class=body] ol,
table[class=body] td,
table[class=body] span,
table[class=body] a {
font-size: 16px !important;
}
/* remove padding for mobile so no gray shows */
table[class=body] .bodycell {
padding: 0 !important;
width: 100% !important;
}
/* reduce padding from 20->10 for mobile */
table[class=body] .maincell {
padding: 10px !important;
}
}
/*
ExternalClass fixes Outlook.com / Hotmail emails
*/
@media all {
.ExternalClass {
width: 100%;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
}
</style>
</head>
<!--
background: white (could be gray)
default sans serif fonts, 14px, 1.3, #444444
vendor prefixes for Outlook (-ms) and iOS (-webkit)
Margin is capitalized to fix Outlook.com
-->
<body class="" style="background-color:#ffffff; font-family:'Open Sans', 'Lucida Grande', 'Segoe UI', Arial, Verdana, 'Lucida Sans Unicode', Tahoma, 'Sans Serif'; font-size:14px; color: #444444; line-height:1.3; Margin:0; padding:0; -ms-text-size-adjust:100%; -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:100%;">
<!-- body: background table (if body has a color, this should match) -->
<table border="0" cellpadding="0" cellspacing="0" class="body" style="border-collapse:separate; background-color:#ffffff; width:100%; box-sizing:border-box; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tr>
<!-- width and max-width so it can scale for mobile -->
<td class="bodycell" style="max-width:600px; width:100%; font-family:'Open Sans', 'Lucida Grande', 'Segoe UI', Arial, Verdana, 'Lucida Sans Unicode', Tahoma, 'Sans Serif'; font-size:14px; vertical-align:top; display:block; box-sizing:border-box; padding:10px; Margin:0 auto !important;">
<!-- for older versions of Outlook that don't support max-width -->
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td>
<![endif]-->
<!-- main: white box for content -->
<table class="main" style="background:#fff; width:100%; border-collapse:separate; mso-table-lspace:0pt; mso-table-rspace:0pt; ">
<tr>
<td class="maincell" style="font-family:sans-serif; font-size:14px; vertical-align:top; box-sizing:border-box; padding:20px;">
<%= inner_html %>
</td>
</tr>
</table>
<!-- /.main -->
<!-- logo: branding -->
<table class="logo" style="width:100%; box-sizing:border-box; border-collapse:separate; mso-table-lspace:0pt; mso-table-rspace:0pt; ">
<tr>
<td class="logocell" style="text-align:center; vertical-align:top; box-sizing:border-box; padding:10px;">
<img src="<%= custom_logo || "https://lh3.googleusercontent.com/D1pgZeJZrBFc_n_EnEWpj9BQpVUaQ6xj2FYl1ZaxhDN4c-x8X69DqfJ258Eb0u7sXyuvYI533FkaCouBv6131tpxMbd1CpjZDEMr2kN4t8_Epitm77c" %>" alt="">
</td>
</tr>
</table>
<!-- /.logo -->
<!-- footer: gray text below main -->
<table class="footer" style="width:100%; box-sizing:border-box; border-collapse:separate; mso-table-lspace:0pt; mso-table-rspace:0pt; ">
<tr>
<td class="footercell" style="font-family:sans-serif; font-size:14px; vertical-align:top; color:#a8b9c6; font-size:12px; text-align:center; padding:10px; box-sizing:border-box; ">
<% if !content(:footer_link).blank? %>
<%= content(:footer_link).html_safe %> |
<% end %>
<a href="<%= communication_profile_url %>" style="white-space: nowrap;"><%= t 'click_to_preferences', "Update your notification settings" %></a>
</td>
</tr>
</table>
<!-- /.footer -->
<!--[if (gte mso 9)|(IE)]>
</td></tr></table>
<![endif]-->
</td>
</tr>
</table>
<!-- /.body -->
</body>
</html>