incorporates inky templating for mailers

completes #56
Merge branch 'feature/inky' into develop
This commit is contained in:
Mark Moser 2016-08-21 14:14:53 -05:00
commit 9e27ba379e
26 changed files with 219 additions and 186 deletions

2
.gitignore vendored
View File

@ -37,7 +37,7 @@ tmux*log
/.bundle/ /.bundle/
/vendor/bundle /vendor/bundle
/lib/bundler/man/ /lib/bundler/man/
/vendor/assets /vendor/assets/*
bower_components/ bower_components/
node_modules/ node_modules/
.DS_Store .DS_Store

View File

@ -19,6 +19,10 @@ gem 'uglifier', '>= 1.3.0'
gem 'bourbon' gem 'bourbon'
gem 'neat' gem 'neat'
# Foundation for Emails
gem 'inky-rb', require: 'inky'
gem 'premailer-rails'
group :development do group :development do
gem 'better_errors' gem 'better_errors'
gem 'rack-livereload' gem 'rack-livereload'

View File

@ -38,6 +38,7 @@ GEM
i18n (~> 0.7) i18n (~> 0.7)
minitest (~> 5.1) minitest (~> 5.1)
tzinfo (~> 1.1) tzinfo (~> 1.1)
addressable (2.4.0)
ansi (1.5.0) ansi (1.5.0)
arel (7.1.0) arel (7.1.0)
ast (2.3.0) ast (2.3.0)
@ -57,6 +58,8 @@ GEM
choice (0.2.0) choice (0.2.0)
coderay (1.1.1) coderay (1.1.1)
concurrent-ruby (1.0.2) concurrent-ruby (1.0.2)
css_parser (1.4.5)
addressable
debug_inspector (0.0.2) debug_inspector (0.0.2)
docile (1.1.5) docile (1.1.5)
domain_name (0.5.20160615) domain_name (0.5.20160615)
@ -71,6 +74,7 @@ GEM
figaro (1.1.1) figaro (1.1.1)
thor (~> 0.14) thor (~> 0.14)
formatador (0.2.5) formatador (0.2.5)
foundation_emails (2.2.0.0)
globalid (0.3.6) globalid (0.3.6)
activesupport (>= 4.1.0) activesupport (>= 4.1.0)
guard (2.14.0) guard (2.14.0)
@ -97,10 +101,13 @@ GEM
guard-shell (0.7.1) guard-shell (0.7.1)
guard (>= 2.0.0) guard (>= 2.0.0)
guard-compat (~> 1.0) guard-compat (~> 1.0)
htmlentities (4.3.4)
http-cookie (1.0.2) http-cookie (1.0.2)
domain_name (~> 0.5) domain_name (~> 0.5)
http_parser.rb (0.6.0) http_parser.rb (0.6.0)
i18n (0.7.0) i18n (0.7.0)
inky-rb (1.3.6.1)
foundation_emails (~> 2)
jbuilder (2.6.0) jbuilder (2.6.0)
activesupport (>= 3.0.0, < 5.1) activesupport (>= 3.0.0, < 5.1)
multi_json (~> 1.2) multi_json (~> 1.2)
@ -151,6 +158,12 @@ GEM
ast (~> 2.2) ast (~> 2.2)
pkg-config (1.1.7) pkg-config (1.1.7)
powerpack (0.1.1) powerpack (0.1.1)
premailer (1.8.7)
css_parser (>= 1.4.5)
htmlentities (>= 4.0.0)
premailer-rails (1.9.4)
actionmailer (>= 3, < 6)
premailer (~> 1.7, >= 1.7.9)
pry (0.10.4) pry (0.10.4)
coderay (~> 1.1.0) coderay (~> 1.1.0)
method_source (~> 0.8.1) method_source (~> 0.8.1)
@ -281,6 +294,7 @@ DEPENDENCIES
guard-minitest guard-minitest
guard-rubocop guard-rubocop
guard-shell guard-shell
inky-rb
jbuilder (~> 2.6) jbuilder (~> 2.6)
jquery-rails jquery-rails
json (~> 2.0.2) json (~> 2.0.2)
@ -289,6 +303,7 @@ DEPENDENCIES
minitest-reporters minitest-reporters
mysql2 (>= 0.3.18, < 0.5) mysql2 (>= 0.3.18, < 0.5)
neat neat
premailer-rails
pry-byebug pry-byebug
pry-rails pry-rails
puma (~> 3.0) puma (~> 3.0)

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

View File

@ -0,0 +1,47 @@
a {
text-decoration: underline;
color: $success-color;
}
.email-container {
.email-heading th {
font-family: 'Lato', Helvetica Neue, Helvetica, Ariel, sans-serif;
.prft-slash {
font-size: 100px;
font-weight: 200;
color: $success-color;
vertical-align: middle;
}
.email-title {
text-transform: uppercase;
font-weight: 700;
font-size:18px;
vertical-align: sub;
}
}
.email-body * {
font-family: 'Lato', Helvetica Neue, Helvetica, Ariel, sans-serif;
font-size: 16px;
line-height: 1.5em;
padding-bottom: 20px;
font-weight:300;
word-break: break-word;
strong {
font-weight:bold;
}
}
.email-copyright {
font-family: 'Lato', Helvetica Neue, Helvetica, Ariel, sans-serif;
font-size: 10px;
color: #909090;
vertical-align: bottom;
}
.email-logo {
text-align: right;
vertical-align: bottom;
}
.email-bg {
background:#fef035 !important;
background-color:#fef035 !important;
}
}

View File

@ -0,0 +1,6 @@
// foundation overrides
$success-color: #EF0734;
$global-width: 600px;
$body-font-family: inherit;
$body-background: #ffffff;

View File

@ -0,0 +1,18 @@
@import 'foundation-emails/scss/util/util',
'foundation-emails/scss/global',
'foundation_global_overrides',
'foundation-emails/scss/components/normalize',
'foundation-emails/scss/grid/grid',
'foundation-emails/scss/grid/block-grid',
'foundation-emails/scss/components/alignment',
'foundation-emails/scss/components/visibility',
'foundation-emails/scss/components/typography',
'foundation-emails/scss/components/button',
'foundation-emails/scss/components/callout',
'foundation-emails/scss/components/thumbnail',
'foundation-emails/scss/components/menu',
'foundation-emails/scss/components/outlook-first',
'foundation-emails/scss/components/media-query';
@import 'custom-mailer-styles';

View File

@ -1,36 +0,0 @@
<table cellspacing="0" cellpadding="0" border="0" style="width:100%; font-family:sans-serif;">
<tr>
<td>
<div style="font-size: 28px;">PERFICIENT<span style="color: #EF0734;">/digital</span> Skills Assessment Test</div>
<br><br><br>
</td>
</tr>
<tr>
<td style="padding:50px;">
<p>Dear <strong><%= @candidate.name %></strong>,</p>
<p>
Thank you for taking the Skills Assessment Test. However, it looks like you have not submitted it
yet. If you are having trouble, please reach out to your recruiter:
<%= mail_to @candidate.recruiter.email %>
</p>
<p>
You can return to the test here:
<%= link_to nil, root_url %>.
<br>
Your Test ID is: <strong><%= @candidate.test_hash %></strong>
</p>
</td>
</tr>
<tr>
<td>
<br><br><br>
<br><br><br>
<div style="background-color: #FFF200; height: 20px; width: 100%;">&nbsp;</div>
</td>
</tr>
</table>

View File

@ -0,0 +1,16 @@
<row>
<columns class="email-body">
<p>Dear <strong><%= @candidate.name %></strong>,</p>
<p>
Thank you for taking the Skills Assessment Test. However, it looks like you have not submitted it
yet. If you are having trouble, please reach out to your recruiter:
<%= mail_to @candidate.recruiter.email %>
</p>
<p>
You can return to the test here:
<%= link_to nil, root_url %>.
<br />
Your Test ID is: <strong><%= @candidate.test_hash %></strong>
</p>
</columns>
</row>

View File

@ -1,26 +0,0 @@
<table cellspacing="0" cellpadding="0" border="0" style="width:100%; font-family:sans-serif;">
<tr>
<td>
<div style="font-size: 28px;">PERFICIENT<span style="color: #EF0734;">/digital</span> Skills Assessment Test</div>
<br><br><br>
</td>
</tr>
<tr>
<td style="padding:50px;">
<p>Dear <strong><%= @candidate.name %></strong>,</p>
<p>Thank you for taking the Skills Assessment Test. Your recruiter will be in touch.</p>
</td>
</tr>
<tr>
<td>
<br><br><br>
<br><br><br>
<div style="background-color: #FFF200; height: 20px; width: 100%;">&nbsp;</div>
</td>
</tr>
</table>

View File

@ -0,0 +1,6 @@
<row>
<columns class="email-body">
<p>Dear <strong><%= @candidate.name %></strong>,</p>
<p>Thank you for taking the Skills Assessment Test. Your recruiter will be in touch.</p>
</columns>
</row>

View File

@ -1,45 +0,0 @@
<table cellspacing="0" cellpadding="0" border="0" style="width: 100%; font-family: sans-serif;">
<tr>
<td>
<div style="font-size: 28px;">PERFICIENT<span style="color: #EF0734;">/digital</span></div>
<br><br><br>
</td>
</tr>
<tr>
<td>
<p>Hello there! You have been invited to take our Skills Assessment Test.</p>
<br><br>
</td>
</tr>
<tr>
<td>
<p style="font-size: 20px; text-align: center; padding: 50px; background-color: #f3f3f3">
Please visit <%= link_to nil, login_url(@candidate.test_hash) %> to begin your test.
</p>
</td>
</tr>
<tr>
<td>
<br><br>
<p>
Or, visit <%= link_to nil, root_url %> and enter your Test ID to begin your test.
Your Test ID is: <strong><%= @candidate.test_hash %></strong>.<br><br>
Once we have evaluated your answers, your recruiter will be in touch. Good luck!
</p>
</td>
</tr>
<tr>
<td>
<br><br><br>
<br><br><br>
<div style="background-color: #FFF200; height: 20px; width: 100%;">&nbsp;</div>
</td>
</tr>
</table>

View File

@ -0,0 +1,18 @@
<row>
<columns class="email-body">
<p>Hello there! You have been invited to take our Skills Assessment Test.</p>
<table>
<tr>
<td style="font-size: 20px; text-align: center; padding: 50px; background-color: #f3f3f3">
Please visit <%= link_to nil, login_url(@candidate.test_hash) %> to begin your test.
</td>
</tr>
</table>
<p>
&nbsp;<br />
Or, visit <%= link_to nil, root_url %> and enter your Test ID to begin your test.
Your Test ID is: <strong><%= @candidate.test_hash %></strong>.
Once we have evaluated your answers, your recruiter will be in touch. Good luck!
</p>
</columns>
</row>

View File

@ -1,5 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en" class="no-js"> <html lang="en" class="no-js">
<head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">

View File

@ -0,0 +1,58 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width" />
<%= stylesheet_link_tag "mailers/foundation_vendor_manifest" %>
</head>
<body>
<table class="body" data-made-with-foundation="">
<tr>
<td class="center" align="center" valign="top">
<center>
<container class="email-container">
<row>
<columns class="email-heading">
<span class="prft-slash">/</span> <span class="email-title">Skills Assessment Test</span>
</columns>
</row>
<%= yield %>
<row>
<columns>
<table>
<tr>
<td class="email-copyright">
&copy;2016 All Rights Reserved - Perficient Digital
</td>
<td class="email-logo">
<%= image_tag("perficientdigital-logo.jpg", alt:"Perficient Digital") %>
</td>
</tr>
</table>
</columns>
</row>
<row>
<columns>
<table>
<tr>
<td style="width:6px;">
<%= image_tag("yellowslant-left.jpg", alt:"Perficient Digital") %>
</td>
<td class="email-bg" style="font-size:1px;">
&nbsp;
</td>
<td style="width:6px;">
<%= image_tag("yellowslant-right.jpg", alt:"Perficient Digital") %>
</td>
</tr>
</table>
</columns>
</row>
</container>
</center>
</td>
</tr>
</table>
</body>
</html>

View File

@ -1,32 +0,0 @@
<table cellspacing="0" cellpadding="0" border="0" style="width:100%; font-family:sans-serif;">
<tr>
<td>
<div style="font-size: 28px;">PERFICIENT<span style="color: #EF0734;">/digital</span> Skills Assessment Test</div>
<br><br><br>
</td>
</tr>
<tr>
<td style="padding:50px;">
<p>The following candidate has been invited to take the Skills Assessment Test:</p>
<p>
<strong>Candidate name:</strong> <%= @candidate.name %><br />
<strong>Candidate email:</strong> <%= @candidate.email %><br />
<strong>Candidate ID:</strong> <%= @candidate.test_hash %><br />
<strong>Years of experience:</strong> <%= @candidate.experience %> Years<br />
</p>
<p>You will be notified when the candidate has finished taking the test.</p>
</td>
</tr>
<tr>
<td>
<br><br><br>
<br><br><br>
<div style="background-color: #FFF200; height: 20px; width: 100%;">&nbsp;</div>
</td>
</tr>
</table>

View File

@ -0,0 +1,14 @@
<row>
<columns class="email-body">
<p>The following candidate has been invited to take the Skills Assessment Test:</p>
<p>
<strong>Candidate name:</strong> <%= @candidate.name %><br />
<strong>Candidate email:</strong> <%= @candidate.email %><br />
<strong>Candidate ID:</strong> <%= @candidate.test_hash %><br />
<strong>Years of experience:</strong> <%= @candidate.experience %> Years<br />
</p>
<p>You will be notified when the candidate has finished taking the test.</p>
</columns>
</row>

View File

@ -1,26 +0,0 @@
<table cellspacing="0" cellpadding="0" border="0" style="width:100%; font-family:sans-serif;">
<tr>
<td>
<div style="font-size: 28px;">PERFICIENT<span style="color: #EF0734;">/digital</span> Skills Assessment Test</div>
<br><br><br>
</td>
</tr>
<tr>
<td style="padding:50px;">
<p><strong><%= @candidate.name %></strong> has completed the Skills Assessment Test.</p>
<p><strong>Martin Ridgway</strong> will let you know if we would like to interview this candidate.</p>
</td>
</tr>
<tr>
<td>
<br><br><br>
<br><br><br>
<div style="background-color: #FFF200; height: 20px; width: 100%;">&nbsp;</div>
</td>
</tr>
</table>

View File

@ -0,0 +1,6 @@
<row>
<columns class="email-body">
<p><strong><%= @candidate.name %></strong> has completed the Skills Assessment Test.</p>
<p><strong>Martin Ridgway</strong> will let you know if we would like to interview this candidate.</p>
</columns>
</row>

View File

@ -1,18 +0,0 @@
<table cellspacing="0" cellpadding="0" border="0" style="width:100%; font-family:sans-serif;">
<tr>
<td>
<div style="font-size: 28px;">PERFICIENT<span style="color: #EF0734;">/digital</span> Skills Assessment Test Results</div>
<br><br><br>
</td>
</tr>
<tr>
<td style="padding:50px;">
<p>Candidate <strong><%= @candidate.test_hash %></strong> has completed the Skills Assessment Test.</p>
<p>You can view the results here: <%= link_to nil, review_test_url(@candidate.test_hash) %>.</p>
</td>
</tr>
</table>

View File

@ -0,0 +1,6 @@
<row>
<columns class="email-body">
<p>Candidate <strong><%= @candidate.test_hash %></strong> has completed the Skills Assessment Test.</p>
<p>You can view the results here: <%= link_to nil, review_test_url(@candidate.test_hash) %>.</p>
</columns>
</row>

View File

@ -9,7 +9,8 @@
"jquery-validate": "", "jquery-validate": "",
"tota11y": "", "tota11y": "",
"modernizr-lite": "*", "modernizr-lite": "*",
"html5shiv": "^3.7.3" "html5shiv": "^3.7.3",
"foundation-emails": "^2.2.1"
}, },
"ignore": [ "ignore": [
"**/.*", "**/.*",

View File

@ -11,5 +11,5 @@ Rails.application.config.assets.version = '1.0'
# Rails.application.config.assets.precompile += %w( search.js ) # Rails.application.config.assets.precompile += %w( search.js )
Rails.application.config.assets.precompile += ['vendor/assets/**/*'] Rails.application.config.assets.precompile += ['vendor/assets/**/*']
Rails.application.config.assets.precompile += %w(ie9.js) Rails.application.config.assets.precompile += %w(ie9.js)
Rails.application.config.assets.precompile += %w(mailers/foundation_vendor_manifest.scss)