Skip to content

Commit

Permalink
Improve user mailer preview example
Browse files Browse the repository at this point in the history
  • Loading branch information
@allmarkedup
allmarkedup committed May 23, 2024
1 parent 7c5466e commit 6d6445d
Show file tree
Hide file tree
Showing 4 changed files with 339 additions and 7 deletions.
2 changes: 2 additions & 0 deletions test/demo/app/mailers/user_mailer.rb
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
class UserMailer < ApplicationMailer
def welcome
@user_name = params[:user_name]
@body_text = params[:body_text]
@button_label = params[:button_label]
mail(to: "[email protected]", subject: "Welcome")
end
end
275 changes: 271 additions & 4 deletions test/demo/app/views/layouts/mailer.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,278 @@
<html>
<head>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type' />
<style>
html {
background: #fff;
<style media="all" type="text/css">
/* Source: https://github.com/leemunroe/responsive-html-email-template */

body {
font-family: Helvetica, sans-serif;
-webkit-font-smoothing: antialiased;
font-size: 16px;
line-height: 1.3;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
</style>

table {
border-collapse: separate;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
width: 100%;
}

table td {
font-family: Helvetica, sans-serif;
font-size: 16px;
vertical-align: top;
}

body {
background-color: #f4f5f6;
margin: 0;
padding: 0;
}

.body {
background-color: #f4f5f6;
width: 100%;
}

.container {
margin: 0 auto !important;
max-width: 600px;
padding: 0;
padding-top: 24px;
width: 600px;
}

.content {
box-sizing: border-box;
display: block;
margin: 0 auto;
max-width: 600px;
padding: 0;
}

.main {
background: #ffffff;
border: 1px solid #eaebed;
border-radius: 16px;
width: 100%;
}

.wrapper {
box-sizing: border-box;
padding: 24px;
}

.footer {
clear: both;
padding-top: 24px;
text-align: center;
width: 100%;
}

.footer td,
.footer p,
.footer span,
.footer a {
color: #9a9ea6;
font-size: 16px;
text-align: center;
}

p {
font-family: Helvetica, sans-serif;
font-size: 16px;
font-weight: normal;
margin: 0;
margin-bottom: 16px;
}

a {
color: #0867ec;
text-decoration: underline;
}

.btn {
box-sizing: border-box;
min-width: 100% !important;
width: 100%;
}

.btn > tbody > tr > td {
padding-bottom: 16px;
}

.btn table {
width: auto;
}

.btn table td {
background-color: #ffffff;
border-radius: 4px;
text-align: center;
}

.btn a {
background-color: #ffffff;
border: solid 2px #0867ec;
border-radius: 4px;
box-sizing: border-box;
color: #0867ec;
cursor: pointer;
display: inline-block;
font-size: 16px;
font-weight: bold;
margin: 0;
padding: 12px 24px;
text-decoration: none;
text-transform: capitalize;
}

.btn-primary table td {
background-color: #0867ec;
}

.btn-primary a {
background-color: #0867ec;
border-color: #0867ec;
color: #ffffff;
}

@media all {
.btn-primary table td:hover {
background-color: #ec0867 !important;
}
.btn-primary a:hover {
background-color: #ec0867 !important;
border-color: #ec0867 !important;
}
}

.last {
margin-bottom: 0;
}

.first {
margin-top: 0;
}

.align-center {
text-align: center;
}

.align-right {
text-align: right;
}

.align-left {
text-align: left;
}

.text-link {
color: #0867ec !important;
text-decoration: underline !important;
}

.clear {
clear: both;
}

.mt0 {
margin-top: 0;
}

.mb0 {
margin-bottom: 0;
}

.preheader {
color: transparent;
display: none;
height: 0;
max-height: 0;
max-width: 0;
opacity: 0;
overflow: hidden;
mso-hide: all;
visibility: hidden;
width: 0;
}

.powered-by {
padding-top: 5px;
opacity: 0.7;
}

.powered-by a {
text-decoration: none;
}


@media only screen and (max-width: 640px) {
.main p,
.main td,
.main span {
font-size: 16px !important;
}
.wrapper {
padding: 8px !important;
}
.content {
padding: 0 !important;
}
.container {
padding: 0 !important;
padding-top: 8px !important;
width: 100% !important;
}
.main {
border-left-width: 0 !important;
border-radius: 0 !important;
border-right-width: 0 !important;
}
.btn table {
max-width: 100% !important;
width: 100% !important;
}
.btn a {
font-size: 16px !important;
max-width: 100% !important;
width: 100% !important;
}
}

@media all {
.ExternalClass {
width: 100%;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
.apple-link a {
color: inherit !important;
font-family: inherit !important;
font-size: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
text-decoration: none !important;
}
#MessageViewBody a {
color: inherit;
text-decoration: none;
font-size: inherit;
font-family: inherit;
font-weight: inherit;
line-height: inherit;
}
}
</style>
</head>
<body>
<%= yield %>
Expand Down
50 changes: 49 additions & 1 deletion test/demo/app/views/user_mailer/welcome.html.erb
View file
Original file line number Diff line number Diff line change
@@ -1 +1,49 @@
<h1>hello <%= @user_name %></h1>
<table role="presentation" border="0" cellpadding="0" cellspacing="0" class="body">
<tr>
<td>&nbsp;</td>
<td class="container">
<div class="content">
<span class="preheader">This is preheader text. Some clients will show this text as a preview.</span>
<table role="presentation" border="0" cellpadding="0" cellspacing="0" class="main">
<tr>
<td class="wrapper">
<p>Hi <%= @user_name %>,</p>
<p><%== sanitize(@body_text.gsub("\n", "<br>")) %></p>
<table role="presentation" border="0" cellpadding="0" cellspacing="0" class="btn btn-primary">
<tbody>
<tr>
<td align="left">
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td> <a href="" target="_blank"><%= @button_label %></a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>

<div class="footer">
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="content-block">
Don't like these emails? <a href="#">Unsubscribe</a>.
</td>
</tr>
<tr>
<td class="content-block powered-by">
<small>Template sourced from <a href="https://github.com/leemunroe/responsive-html-email-template">@leemunroe</a></small>
</td>
</tr>
</table>
</div>
</div>
</td>
<td>&nbsp;</td>
</tr>
</table>
19 changes: 17 additions & 2 deletions test/demo/lookbook/previews/emails/user_mailer_preview.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,23 @@ module Emails
class UserMailerPreview < ActionMailer::Preview
# @label Welcome email
# @param user_name
def welcome(user_name: "Alice")
UserMailer.with(user_name: user_name).welcome
# @param body_text textarea
# @param button_label
def welcome(user_name: "Alice", body_text: default_body_text, button_label: "Click me")
UserMailer.with(user_name: user_name, body_text: body_text, button_label: button_label).welcome
end

private

def default_body_text
<<-TEXT.strip
Donec ut est finibus, sodales dui et, pulvinar ipsum. Vivamus euismod mi et egestas sollicitudin.
Quisque dictum ornare augue, id interdum libero ullamcorper sed. Suspendisse molestie pulvinar interdum. Donec nec finibus dolor.
Mauris nec nisl at tellus eleifend faucibus. In hendrerit non sapien eget lacinia.
TEXT
end
end
end

0 comments on commit 6d6445d

Please sign in to comment.