##// END OF EJS Templates
emails: improve fonts and rendering of email htmls....
dan -
r3170:47569100 default
parent child Browse files
Show More
@@ -1,131 +1,142 b''
1 ## -*- coding: utf-8 -*-
1 ## -*- coding: utf-8 -*-
2
2
3 ## helpers
3 ## helpers
4 <%def name="tag_button(text, tag_type=None)">
4 <%def name="tag_button(text, tag_type=None)">
5 <%
5 <%
6 color_scheme = {
6 color_scheme = {
7 'default': 'border:1px solid #979797;color:#666666;background-color:#f9f9f9',
7 'default': 'border:1px solid #979797;color:#666666;background-color:#f9f9f9',
8 'approved': 'border:1px solid #0ac878;color:#0ac878;background-color:#f9f9f9',
8 'approved': 'border:1px solid #0ac878;color:#0ac878;background-color:#f9f9f9',
9 'rejected': 'border:1px solid #e85e4d;color:#e85e4d;background-color:#f9f9f9',
9 'rejected': 'border:1px solid #e85e4d;color:#e85e4d;background-color:#f9f9f9',
10 'under_review': 'border:1px solid #ffc854;color:#ffc854;background-color:#f9f9f9',
10 'under_review': 'border:1px solid #ffc854;color:#ffc854;background-color:#f9f9f9',
11 }
11 }
12 %>
12 %>
13 <pre style="display:inline;border-radius:2px;font-size:12px;padding:.2em;${color_scheme.get(tag_type, color_scheme['default'])}">${text}</pre>
13 <pre style="display:inline;border-radius:2px;font-size:12px;padding:.2em;${color_scheme.get(tag_type, color_scheme['default'])}">${text}</pre>
14 </%def>
14 </%def>
15
15
16 <%def name="status_text(text, tag_type=None)">
16 <%def name="status_text(text, tag_type=None)">
17 <%
17 <%
18 color_scheme = {
18 color_scheme = {
19 'default': 'color:#666666',
19 'default': 'color:#666666',
20 'approved': 'color:#0ac878',
20 'approved': 'color:#0ac878',
21 'rejected': 'color:#e85e4d',
21 'rejected': 'color:#e85e4d',
22 'under_review': 'color:#ffc854',
22 'under_review': 'color:#ffc854',
23 }
23 }
24 %>
24 %>
25 <span style="font-weight:bold;font-size:12px;padding:.2em;${color_scheme.get(tag_type, color_scheme['default'])}">${text}</span>
25 <span style="font-weight:bold;font-size:12px;padding:.2em;${color_scheme.get(tag_type, color_scheme['default'])}">${text}</span>
26 </%def>
26 </%def>
27
27
28 ## Constants
29 <%
30 text_regular = "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;"
31 text_monospace = "'Menlo', 'Liberation Mono', 'Consolas', 'DejaVu Sans Mono', 'Ubuntu Mono', 'Courier New', 'andale mono', 'lucida console', monospace;"
32
33 %>
34
28 ## headers we additionally can set for email
35 ## headers we additionally can set for email
29 <%def name="headers()" filter="n,trim"></%def>
36 <%def name="headers()" filter="n,trim"></%def>
30
37
31 <%def name="plaintext_footer()">
38 <%def name="plaintext_footer()">
32 ${_('This is a notification from RhodeCode. %(instance_url)s') % {'instance_url': instance_url}}
39 ${_('This is a notification from RhodeCode. %(instance_url)s') % {'instance_url': instance_url}}
33 </%def>
40 </%def>
34
41
35 <%def name="body_plaintext()" filter="n,trim">
42 <%def name="body_plaintext()" filter="n,trim">
36 ## this example is not called itself but overridden in each template
43 ## this example is not called itself but overridden in each template
37 ## the plaintext_footer should be at the bottom of both html and text emails
44 ## the plaintext_footer should be at the bottom of both html and text emails
38 ${self.plaintext_footer()}
45 ${self.plaintext_footer()}
39 </%def>
46 </%def>
40
47
41 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
48 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
42 <html xmlns="http://www.w3.org/1999/xhtml">
49 <html xmlns="http://www.w3.org/1999/xhtml">
43 <head>
50 <head>
44 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
51 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
45 <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
52 <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
46 <title>${self.subject()}</title>
53 <title>${self.subject()}</title>
47 <style type="text/css">
54 <style type="text/css">
48 /* Based on The MailChimp Reset INLINE: Yes. */
55 /* Based on The MailChimp Reset INLINE: Yes. */
49 #outlook a {padding:0;} /* Force Outlook to provide a "view in browser" menu link. */
56 #outlook a {padding:0;} /* Force Outlook to provide a "view in browser" menu link. */
50 body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;}
57 body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0; font-family: ${text_regular|n}}
51 /* Prevent Webkit and Windows Mobile platforms from changing default font sizes.*/
58 /* Prevent Webkit and Windows Mobile platforms from changing default font sizes.*/
52 .ExternalClass {width:100%;} /* Force Hotmail to display emails at full width */
59 .ExternalClass {width:100%;} /* Force Hotmail to display emails at full width */
53 .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;}
60 .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;}
54 /* Forces Hotmail to display normal line spacing. More on that: http://www.emailonacid.com/forum/viewthread/43/ */
61 /* Forces Hotmail to display normal line spacing. More on that: http://www.emailonacid.com/forum/viewthread/43/ */
55 #backgroundTable {margin:0; padding:0; line-height: 100% !important;}
62 #backgroundTable {margin:0; padding:0; line-height: 100% !important;}
56 /* End reset */
63 /* End reset */
57
64
58 /* defaults for images*/
65 /* defaults for images*/
59 img {outline:none; text-decoration:none; -ms-interpolation-mode: bicubic;}
66 img {outline:none; text-decoration:none; -ms-interpolation-mode: bicubic;}
60 a img {border:none;}
67 a img {border:none;}
61 .image_fix {display:block;}
68 .image_fix {display:block;}
62
69
63 body {line-height:1.2em;}
70 body {line-height:1.2em;}
64 p {margin: 0 0 20px;}
71 p {margin: 0 0 20px;}
65 h1, h2, h3, h4, h5, h6 {color:#323232!important;}
72 h1, h2, h3, h4, h5, h6 {color:#323232!important;}
66 a {color:#427cc9;text-decoration:none;outline:none;cursor:pointer;}
73 a {color:#427cc9;text-decoration:none;outline:none;cursor:pointer;}
67 a:focus {outline:none;}
74 a:focus {outline:none;}
68 a:hover {color: #305b91;}
75 a:hover {color: #305b91;}
69 h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {color:#427cc9!important;text-decoration:none!important;}
76 h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {color:#427cc9!important;text-decoration:none!important;}
70 h1 a:active, h2 a:active, h3 a:active, h4 a:active, h5 a:active, h6 a:active {color: #305b91!important;}
77 h1 a:active, h2 a:active, h3 a:active, h4 a:active, h5 a:active, h6 a:active {color: #305b91!important;}
71 h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited {color: #305b91!important;}
78 h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited {color: #305b91!important;}
72 table {font-size:13px;border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;}
79 table {font-size:13px;border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;}
73 table td {padding:.65em 1em .65em 0;border-collapse:collapse;vertical-align:top;text-align:left;}
80 table td {padding:.65em 1em .65em 0;border-collapse:collapse;vertical-align:top;text-align:left;}
74 input {display:inline;border-radius:2px;border-style:solid;border: 1px solid #dbd9da;padding:.5em;}
81 input {display:inline;border-radius:2px;border-style:solid;border: 1px solid #dbd9da;padding:.5em;}
75 input:focus {outline: 1px solid #979797}
82 input:focus {outline: 1px solid #979797}
76 @media only screen and (-webkit-min-device-pixel-ratio: 2) {
83 @media only screen and (-webkit-min-device-pixel-ratio: 2) {
77 /* Put your iPhone 4g styles in here */
84 /* Put your iPhone 4g styles in here */
78 }
85 }
79
86
80 /* Android targeting */
87 /* Android targeting */
81 @media only screen and (-webkit-device-pixel-ratio:.75){
88 @media only screen and (-webkit-device-pixel-ratio:.75){
82 /* Put CSS for low density (ldpi) Android layouts in here */
89 /* Put CSS for low density (ldpi) Android layouts in here */
83 }
90 }
84 @media only screen and (-webkit-device-pixel-ratio:1){
91 @media only screen and (-webkit-device-pixel-ratio:1){
85 /* Put CSS for medium density (mdpi) Android layouts in here */
92 /* Put CSS for medium density (mdpi) Android layouts in here */
86 }
93 }
87 @media only screen and (-webkit-device-pixel-ratio:1.5){
94 @media only screen and (-webkit-device-pixel-ratio:1.5){
88 /* Put CSS for high density (hdpi) Android layouts in here */
95 /* Put CSS for high density (hdpi) Android layouts in here */
89 }
96 }
90 /* end Android targeting */
97 /* end Android targeting */
91
98
92 </style>
99 </style>
93
100
94 <!-- Targeting Windows Mobile -->
101 <!-- Targeting Windows Mobile -->
95 <!--[if IEMobile 7]>
102 <!--[if IEMobile 7]>
96 <style type="text/css">
103 <style type="text/css">
97
104
98 </style>
105 </style>
99 <![endif]-->
106 <![endif]-->
100
107
101 <!--[if gte mso 9]>
108 <!--[if gte mso 9]>
102 <style>
109 <style>
103 /* Target Outlook 2007 and 2010 */
110 /* Target Outlook 2007 and 2010 */
104 </style>
111 </style>
105 <![endif]-->
112 <![endif]-->
106 </head>
113 </head>
107 <body>
114 <body>
108 <!-- Wrapper/Container Table: Use a wrapper table to control the width and the background color consistently of your email. Use this approach instead of setting attributes on the body tag. -->
115 <!-- Wrapper/Container Table: Use a wrapper table to control the width and the background color consistently of your email. Use this approach instead of setting attributes on the body tag. -->
109 <table cellpadding="0" cellspacing="0" border="0" id="backgroundTable" align="left" style="margin:1%;width:97%;padding:0;font-family:sans-serif;font-weight:100;border:1px solid #dbd9da">
116 <table cellpadding="0" cellspacing="0" border="0" id="backgroundTable" align="left" style="margin:1%;width:97%;padding:0;font-family:sans-serif;font-weight:100;border:1px solid #dbd9da">
110 <tr>
117 <tr>
111 <td valign="top" style="padding:0;">
118 <td valign="top" style="padding:0;">
112 <table cellpadding="0" cellspacing="0" border="0" align="left" width="100%">
119 <table cellpadding="0" cellspacing="0" border="0" align="left" width="100%">
113 <tr><td style="width:100%;padding:7px;background-color:#202020" valign="top">
120 <tr><td style="width:100%;padding:7px;background-color:#202020" valign="top">
114 <a style="color:#eeeeee;text-decoration:none;" href="${instance_url}">
121 <a style="color:#eeeeee;text-decoration:none;" href="${instance_url}">
115 ${_('RhodeCode')}
122 ${_('RhodeCode')}
116 % if rhodecode_instance_name:
123 % if rhodecode_instance_name:
117 - ${rhodecode_instance_name}
124 - ${rhodecode_instance_name}
118 % endif
125 % endif
119 </a>
126 </a>
120 </td></tr>
127 </td></tr>
121 <tr><td style="padding:15px;" valign="top">${self.body()}</td></tr>
128 <tr><td style="padding:15px;" valign="top">${self.body()}</td></tr>
122 </table>
129 </table>
123 </td>
130 </td>
124 </tr>
131 </tr>
125 </table>
132 </table>
126 <!-- End of wrapper table -->
133 <!-- End of wrapper table -->
127 <p><a style="margin-top:15px;margin-left:1%;font-family:sans-serif;font-weight:100;font-size:11px;color:#666666;text-decoration:none;" href="${instance_url}">
134
135 <div style="clear: both"></div>
136 <p>
137 <a style="margin-top:15px;margin-left:1%;font-weight:100;font-size:11px;color:#666666;text-decoration:none;font-family:${text_monospace} " href="${instance_url}">
128 ${self.plaintext_footer()}
138 ${self.plaintext_footer()}
129 </a></p>
139 </a>
140 </p>
130 </body>
141 </body>
131 </html>
142 </html>
General Comments 0
You need to be logged in to leave comments. Login now