diff --git a/test/demo/app/mailers/user_mailer.rb b/test/demo/app/mailers/user_mailer.rb index 67657c382..3e4522fd2 100644 --- a/test/demo/app/mailers/user_mailer.rb +++ b/test/demo/app/mailers/user_mailer.rb @@ -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: "user@example.com", subject: "Welcome") end end diff --git a/test/demo/app/views/layouts/mailer.html.erb b/test/demo/app/views/layouts/mailer.html.erb index af8091213..a9fe453d1 100644 --- a/test/demo/app/views/layouts/mailer.html.erb +++ b/test/demo/app/views/layouts/mailer.html.erb @@ -2,11 +2,278 @@ - + + 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; + } + } + <%= yield %> diff --git a/test/demo/app/views/user_mailer/welcome.html.erb b/test/demo/app/views/user_mailer/welcome.html.erb index 35a79f4c5..6a707ebc5 100644 --- a/test/demo/app/views/user_mailer/welcome.html.erb +++ b/test/demo/app/views/user_mailer/welcome.html.erb @@ -1 +1,49 @@ -

hello <%= @user_name %>

\ No newline at end of file + + + + + + + \ No newline at end of file diff --git a/test/demo/lookbook/previews/emails/user_mailer_preview.rb b/test/demo/lookbook/previews/emails/user_mailer_preview.rb index 161629a7d..0c55455e2 100644 --- a/test/demo/lookbook/previews/emails/user_mailer_preview.rb +++ b/test/demo/lookbook/previews/emails/user_mailer_preview.rb @@ -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