Switched to 'premailer' gem for inlining css on html emails, since it supports n…

…okogiri which is already in use (as opposed to hpricot). Required InlineCss module on all mailers. Moved email styles into public/stylesheets/email.css

Switched to 'premailer' gem for inlining css on html emails, since it supports n…
…okogiri which is already in use (as opposed to hpricot). Required InlineCss module on all mailers. Moved email styles into public/stylesheets/email.css
Nathan Broadbent
1 parent d4a738df
Showing 6 changed files with 69 additions and 65 deletions Show diff stats
Gemfile
Gemfile.lock
app/mailers/mailer.rb
app/views/layouts/mailer.html.haml
lib/inline_css.rb
public/stylesheets/email.css
@@ -16,7 +16,7 @@ gem &#39;octokit&#39;
 gem 'inherited_resources'
 gem 'SystemTimer', :platform => :ruby_18
 gem 'hoptoad_notifier', "~> 2.4"
-gem 'tamtam'
+gem 'premailer'
  
 platform :ruby do
   gem 'bson_ext', '~> 1.3.1'
@@ -45,6 +45,7 @@ GEM
     builder (2.1.2)
     columnize (0.3.4)
     crack (0.1.8)
+    css_parser (1.1.9)
     daemons (1.1.4)
     database_cleaner (0.6.7)
     devise (1.4.2)
@@ -75,7 +76,7 @@ GEM
     hoptoad_notifier (2.4.11)
       activesupport
       builder
-    hpricot (0.8.4)
+    htmlentities (4.3.0)
     i18n (0.5.0)
     inherited_resources (1.2.2)
       has_scope (~> 0.5.0)
@@ -122,6 +123,9 @@ GEM
       nokogiri (~> 1.4.1)
       rest-client (~> 1.5.1)
     polyglot (0.3.1)
+    premailer (1.7.1)
+      css_parser (>= 1.1.9)
+      htmlentities (>= 4.0.0)
     rack (1.2.2)
     rack-mount (0.6.14)
       rack (>= 1.0.0)
@@ -178,8 +182,6 @@ GEM
       typhoeus
     ruby_core_source (0.1.5)
       archive-tar-minitar (>= 0.5.2)
-    tamtam (0.0.3)
-      hpricot
     thin (1.2.11)
       daemons (>= 1.0.9)
       eventmachine (>= 0.12.6)
@@ -218,6 +220,7 @@ DEPENDENCIES
   nokogiri
   octokit
   pivotal-tracker
+  premailer
   rails (= 3.0.5)
   redmine_client!
   rspec (~> 2.5)
@@ -225,7 +228,6 @@ DEPENDENCIES
   ruby-debug
   ruby-debug19
   ruby-fogbugz
-  tamtam
   thin
   useragent (~> 0.3.1)
   webmock
@@ -3,8 +3,6 @@
 require Rails.root.join('config/routes.rb')
  
 class Mailer < ActionMailer::Base
-  include InlineCss
-
   default :from => Errbit::Config.email_from
  
   def err_notification(notice)
 %html
   %head
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-    :css
-      td.header {
-        padding: 10px 20px 10px 20px;
-        height: 75px;
-        background-color: #11112f;
-        text-align: left;
-        border-bottom: 1px solid #ccccee;
-      }
-        td.header a {
-          display: block;
-          height: 31px;
-          width: 88px;
-          margin-top: 10px;
-        }
-          /* Style 'Errbit' logo alt text if image cannot be loaded. */
-          td.header a img {
-            border: none;
-            color: #E3E3E3;
-            font-family: helvetica;
-            font-size: 30px;
-            font-weight: bold;
-            min-height: 31px;
-            text-shadow: 0 1px 0 #EEEEFF;
-          }
-
-      td.section, td.content, td.footer {
-        font-family: Helvetica,Arial,sans-serif;
-        font-size: 14px;
-        background-color: #ffffff;
-        text-align: left;
-      }
-      td.section {
-        padding: 0;
-        border-bottom: 1px solid #dddddd;
-      }
-      td.content {
-        padding: 20px 20px 10px 20px;
-        line-height: 1.3em;
-      }
-      td.footer {
-        padding: 10px 20px 20px 20px;
-        font-size: 11px;
-        font-weight: bold;
-        color: #666666;
-      }
-
-      a.bold, span.bold { font-weight: bold; }
-      span.revision { color: #3a8d3a; }
-
-      p { margin: 0 0 15px 0; }
-      p.heading {
-        color: #6a6a6a;
-        margin-bottom: 4px;
-      }
-      p.monospace, p.backtrace { font-family: monospace; }
-      p.backtrace { margin-bottom: 2px; }
  
   %body(leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0")
     %center
@@ -4,11 +4,15 @@
 module InlineCss
   def render(*args)
     if (template = args.first[:template]) && template.mime_type.html?
-      # TamTam expects a <style> tag in the head of your layout.
-      TamTam.inline(:document => super)
+      premailer = Premailer.new(super,
+                                  :with_html_string => true,
+                                  :css => [Rails.root.join("public/stylesheets/email.css").to_s])
+      premailer.to_inline_css
     else
       super
     end
   end
 end
  
+ActionMailer::Base.send :include, InlineCss
+
@@ -0,0 +1,56 @@
+td.header {
+  padding: 10px 20px 10px 20px;
+  height: 75px;
+  background-color: #11112f;
+  text-align: left;
+  border-bottom: 1px solid #ccccee;
+}
+  td.header a {
+    display: block;
+    height: 31px;
+    width: 88px;
+    margin-top: 10px;
+  }
+    /* Style 'Errbit' logo alt text if image cannot be loaded. */
+    td.header a img {
+      border: none;
+      color: #E3E3E3;
+      font-family: helvetica;
+      font-size: 30px;
+      font-weight: bold;
+      min-height: 31px;
+      text-shadow: 0 1px 0 #EEEEFF;
+    }
+
+td.section, td.content, td.footer {
+  font-family: Helvetica,Arial,sans-serif;
+  font-size: 14px;
+  background-color: #ffffff;
+  text-align: left;
+}
+td.section {
+  padding: 0;
+  border-bottom: 1px solid #dddddd;
+}
+td.content {
+  padding: 20px 20px 10px 20px;
+  line-height: 1.3em;
+}
+td.footer {
+  padding: 10px 20px 20px 20px;
+  font-size: 11px;
+  font-weight: bold;
+  color: #666666;
+}
+
+a.bold, span.bold { font-weight: bold; }
+span.revision { color: #3a8d3a; }
+
+p { margin: 0 0 15px 0; }
+p.heading {
+  color: #6a6a6a;
+  margin-bottom: 4px;
+}
+p.monospace, p.backtrace { font-family: monospace; }
+p.backtrace { margin-bottom: 2px; }
+
...	...	@@ -16,7 +16,7 @@ gem 'octokit'
16	16	gem 'inherited_resources'
17	17	gem 'SystemTimer', :platform => :ruby_18
18	18	gem 'hoptoad_notifier', "~> 2.4"
19		-gem 'tamtam'
	19	+gem 'premailer'
20	20
21	21	platform :ruby do
22	22	gem 'bson_ext', '~> 1.3.1'
...	...
...	...	@@ -45,6 +45,7 @@ GEM
45	45	builder (2.1.2)
46	46	columnize (0.3.4)
47	47	crack (0.1.8)
	48	+ css_parser (1.1.9)
48	49	daemons (1.1.4)
49	50	database_cleaner (0.6.7)
50	51	devise (1.4.2)
...	...	@@ -75,7 +76,7 @@ GEM
75	76	hoptoad_notifier (2.4.11)
76	77	activesupport
77	78	builder
78		- hpricot (0.8.4)
	79	+ htmlentities (4.3.0)
79	80	i18n (0.5.0)
80	81	inherited_resources (1.2.2)
81	82	has_scope (~> 0.5.0)
...	...	@@ -122,6 +123,9 @@ GEM
122	123	nokogiri (~> 1.4.1)
123	124	rest-client (~> 1.5.1)
124	125	polyglot (0.3.1)
	126	+ premailer (1.7.1)
	127	+ css_parser (>= 1.1.9)
	128	+ htmlentities (>= 4.0.0)
125	129	rack (1.2.2)
126	130	rack-mount (0.6.14)
127	131	rack (>= 1.0.0)
...	...	@@ -178,8 +182,6 @@ GEM
178	182	typhoeus
179	183	ruby_core_source (0.1.5)
180	184	archive-tar-minitar (>= 0.5.2)
181		- tamtam (0.0.3)
182		- hpricot
183	185	thin (1.2.11)
184	186	daemons (>= 1.0.9)
185	187	eventmachine (>= 0.12.6)
...	...	@@ -218,6 +220,7 @@ DEPENDENCIES
218	220	nokogiri
219	221	octokit
220	222	pivotal-tracker
	223	+ premailer
221	224	rails (= 3.0.5)
222	225	redmine_client!
223	226	rspec (~> 2.5)
...	...	@@ -225,7 +228,6 @@ DEPENDENCIES
225	228	ruby-debug
226	229	ruby-debug19
227	230	ruby-fogbugz
228		- tamtam
229	231	thin
230	232	useragent (~> 0.3.1)
231	233	webmock
...	...
...	...	@@ -3,8 +3,6 @@
3	3	require Rails.root.join('config/routes.rb')
4	4
5	5	class Mailer < ActionMailer::Base
6		- include InlineCss
7		-
8	6	default :from => Errbit::Config.email_from
9	7
10	8	def err_notification(notice)
...	...
1	1	%html
2	2	%head
3	3	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
4		- :css
5		- td.header {
6		- padding: 10px 20px 10px 20px;
7		- height: 75px;
8		- background-color: #11112f;
9		- text-align: left;
10		- border-bottom: 1px solid #ccccee;
11		- }
12		- td.header a {
13		- display: block;
14		- height: 31px;
15		- width: 88px;
16		- margin-top: 10px;
17		- }
18		- /* Style 'Errbit' logo alt text if image cannot be loaded. */
19		- td.header a img {
20		- border: none;
21		- color: #E3E3E3;
22		- font-family: helvetica;
23		- font-size: 30px;
24		- font-weight: bold;
25		- min-height: 31px;
26		- text-shadow: 0 1px 0 #EEEEFF;
27		- }
28		-
29		- td.section, td.content, td.footer {
30		- font-family: Helvetica,Arial,sans-serif;
31		- font-size: 14px;
32		- background-color: #ffffff;
33		- text-align: left;
34		- }
35		- td.section {
36		- padding: 0;
37		- border-bottom: 1px solid #dddddd;
38		- }
39		- td.content {
40		- padding: 20px 20px 10px 20px;
41		- line-height: 1.3em;
42		- }
43		- td.footer {
44		- padding: 10px 20px 20px 20px;
45		- font-size: 11px;
46		- font-weight: bold;
47		- color: #666666;
48		- }
49		-
50		- a.bold, span.bold { font-weight: bold; }
51		- span.revision { color: #3a8d3a; }
52		-
53		- p { margin: 0 0 15px 0; }
54		- p.heading {
55		- color: #6a6a6a;
56		- margin-bottom: 4px;
57		- }
58		- p.monospace, p.backtrace { font-family: monospace; }
59		- p.backtrace { margin-bottom: 2px; }
60	4
61	5	%body(leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0")
62	6	%center
...	...
...	...	@@ -4,11 +4,15 @@
4	4	module InlineCss
5	5	def render(*args)
6	6	if (template = args.first[:template]) && template.mime_type.html?
7		- # TamTam expects a <style> tag in the head of your layout.
8		- TamTam.inline(:document => super)
	7	+ premailer = Premailer.new(super,
	8	+ :with_html_string => true,
	9	+ :css => [Rails.root.join("public/stylesheets/email.css").to_s])
	10	+ premailer.to_inline_css
9	11	else
10	12	super
11	13	end
12	14	end
13	15	end
14	16
	17	+ActionMailer::Base.send :include, InlineCss
	18	+
...	...
...	...	@@ -0,0 +1,56 @@
	1	+td.header {
	2	+ padding: 10px 20px 10px 20px;
	3	+ height: 75px;
	4	+ background-color: #11112f;
	5	+ text-align: left;
	6	+ border-bottom: 1px solid #ccccee;
	7	+}
	8	+ td.header a {
	9	+ display: block;
	10	+ height: 31px;
	11	+ width: 88px;
	12	+ margin-top: 10px;
	13	+ }
	14	+ /* Style 'Errbit' logo alt text if image cannot be loaded. */
	15	+ td.header a img {
	16	+ border: none;
	17	+ color: #E3E3E3;
	18	+ font-family: helvetica;
	19	+ font-size: 30px;
	20	+ font-weight: bold;
	21	+ min-height: 31px;
	22	+ text-shadow: 0 1px 0 #EEEEFF;
	23	+ }
	24	+
	25	+td.section, td.content, td.footer {
	26	+ font-family: Helvetica,Arial,sans-serif;
	27	+ font-size: 14px;
	28	+ background-color: #ffffff;
	29	+ text-align: left;
	30	+}
	31	+td.section {
	32	+ padding: 0;
	33	+ border-bottom: 1px solid #dddddd;
	34	+}
	35	+td.content {
	36	+ padding: 20px 20px 10px 20px;
	37	+ line-height: 1.3em;
	38	+}
	39	+td.footer {
	40	+ padding: 10px 20px 20px 20px;
	41	+ font-size: 11px;
	42	+ font-weight: bold;
	43	+ color: #666666;
	44	+}
	45	+
	46	+a.bold, span.bold { font-weight: bold; }
	47	+span.revision { color: #3a8d3a; }
	48	+
	49	+p { margin: 0 0 15px 0; }
	50	+p.heading {
	51	+ color: #6a6a6a;
	52	+ margin-bottom: 4px;
	53	+}
	54	+p.monospace, p.backtrace { font-family: monospace; }
	55	+p.backtrace { margin-bottom: 2px; }
	56	+
...	...