Skip to content

G
gitlab-ce
Commit af5b79cf authored by Mike Greiling's avatar Mike Greiling
Browse files
Options

Merge branch 'in-product-marketing-email-layout' into 'master' 

Create in product marketing email layout

See merge request gitlab-org/gitlab!75601
parents 7e1c92cd 6ca063e4
Hide whitespace changes
Inline Side-by-side
Showing with 262 additions and 259 deletions
app/mailers/emails/in_product_marketing.rb
View file @ af5b79cf
...@@ -29,7 +29,7 @@ module Emails ...@@ -29,7 +29,7 @@ module Emails
format.html do format.html do
@message.format = :html @message.format = :html
render layout: nil render layout: 'in_product_marketing_mailer'
end end
format.text do format.text do
......
app/views/layouts/in_product_marketing_mailer.html.haml 0 → 100644
View file @ af5b79cf
!!!
%html{ lang: "en" }
%head
%meta{ content: "text/html; charset=utf-8", "http-equiv" => "Content-Type" }
%meta{ content: "width=device-width, initial-scale=1", name: "viewport" }
%link{ href: "https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600", rel: "stylesheet", type: "text/css", data: { premailer: 'ignore' } }
%title= message.subject
:css
/* CLIENT-SPECIFIC STYLES */
body,
table,
td,
a {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
table,
td {
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
img {
-ms-interpolation-mode: bicubic;
}
/* RESET STYLES */
img {
border: 0;
height: auto;
line-height: 100%;
outline: none;
text-decoration: none;
}
table {
border-collapse: collapse !important;
}
body {
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
background-color: #ffffff;
color: #424242;
}
a {
color: #6b4fbb;
text-decoration: underline;
}
.cta_link a {
font-size: 24px;
font-family: 'Source Sans Pro', helvetica, arial, sans-serif;
color: #ffffff;
text-decoration: none;
border-radius: 5px;
-webkit-border-radius: 5px;
background-color: #6e49cb;
border-top: 15px solid #6e49cb;
border-bottom: 15px solid #6e49cb;
border-right: 40px solid #6e49cb;
border-left: 40px solid #6e49cb;
display: inline-block;
}
.footernav {
display: inline !important;
}
.footernav a {
color: #6e49cb;
}
.address {
margin: 0;
font-size: 16px;
line-height: 26px;
}
:css
/* iOS BLUE LINKS */
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
/[if gte mso 9]
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
/[if (mso)|(mso 16)]
<style type="text/css">
body, table, td, a, span { font-family: Arial, Helvetica, sans-serif !important; }
</style>
:css
@media only screen and (max-width: 595px) {
.wrapper {
width: 100% !important;
margin: 0 auto !important;
padding: 0 !important;
}
p,
li {
font-size: 18px !important;
line-height: 26px !important;
}
.stack {
width: 100% !important;
}
.stack-mobile-padding {
width: 100% !important;
margin-top: 20px !important;
}
.callout {
padding-bottom: 20px !important;
}
.redbutton {
text-align: center;
}
.stack33 {
display: block !important;
width: 100% !important;
max-width: 100% !important;
direction: ltr !important;
text-align: center !important;
}
}
@media only screen and (max-width: 480px) {
u~div {
width: 100vw !important;
}
div>u~div {
width: 100% !important;
}
}
%body#body{ width: "100%" }
%table{ border: "0", cellpadding: "0", cellspacing: "0", role: "presentation", width: "100%" }
%tr
%td{ align: "center", style: "padding: 0px;" }
%table.wrapper{ border: "0", cellpadding: "0", cellspacing: "0", role: "presentation", width: "600" }
%tr
%td{ style: "padding: 0px;" }
#main-story.mktEditable{ mktoname: "main-story" }
%table{ border: "0", cellpadding: "0", cellspacing: "0", role: "presentation", width: "100%" }
%tr
%td{ align: "left", style: "padding: 0 20px;" }
= about_link('mailers/in_product_marketing/gitlab-logo-gray-rgb.png', 200)
%tr
%td{ "aria-hidden" => "true", height: "30", style: "font-size: 0; line-height: 0;" }
= yield
%tr{ style: "background-color: #ffffff;" }
%td{ align: "center", style: "padding:75px 20px 25px;" }
= about_link('gitlab_logo.png', 80)
%tr{ style: "background-color: #ffffff;" }
%td{ align: "center", style: "padding:0px ;" }
%tr{ style: "background-color: #ffffff;" }
%td{ align: "center", style: "padding:0px 10px; font-family: 'Source Sans Pro', helvetica, arial, sans-serif; " }
%span.footernav{ style: "color: #6e49cb; font-size: 16px; line-height: 26px; font-family: 'Source Sans Pro', helvetica, arial, sans-serif;" }
= @message.footer_links.join('&nbsp;' * 3 + '|' + '&nbsp;' * 4).html_safe
%tr{ style: "background-color:#ffffff;" }
%td{ align: "center", style: "padding: 40px 30px 20px 30px; font-family: 'Source Sans Pro', helvetica, arial, sans-serif;" }
.address= @message.address
%tr{ style: "background-color: #ffffff;" }
%td{ align: "left", style: "padding:20px 30px 20px 30px;" }
%span.footernav{ style: "color: #6e49cb; font-size: 14px; line-height: 20px; font-family: 'Source Sans Pro', helvetica, arial, sans-serif; color:#424242;" }
= @message.unsubscribe.html_safe
app/views/notify/in_product_marketing_email.html.haml
View file @ af5b79cf
!!! - if @message.series?
%html{ lang: "en" } %tr{ style: "background-color: #ffffff;" }
%head %td{ style: "color: #424242; padding: 10px 30px; text-align: center; font-family: 'Source Sans Pro', helvetica, arial, sans-serif;font-size: 16px; line-height: 22px; border: 1px solid #dddddd" }
%meta{ content: "text/html; charset=utf-8", "http-equiv" => "Content-Type" } %p
%meta{ content: "width=device-width, initial-scale=1", name: "viewport" } = @message.progress.html_safe
%link{ href: "https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600", rel: "stylesheet", type: "text/css", data: { premailer: 'ignore' } } %tr
%title= message.subject %td{ bgcolor: "#ffffff", height: "auto", style: "max-width: 600px; width: 100%; text-align: center; height: 200px; padding: 25px 15px; mso-line-height-rule: exactly; min-height: 40px; font-family: 'Source Sans Pro', helvetica, arial, sans-serif;", valign: "middle", width: "100%" }
:css = inline_image_link(@message.logo_path, { width: '150', style: 'width: 150px;' })
/* CLIENT-SPECIFIC STYLES */ %h1{ style: "font-size: 40px; line-height: 46x; color: #000000; padding: 20px 0 0 0; font-weight: normal;" }
body, = @message.title
table, %h2{ style: "font-size: 28px; line-height: 34px; color: #000000; padding: 0; font-weight: 400;" }
td, = @message.subtitle
a { %tr
-webkit-text-size-adjust: 100%; %td{ style: "padding: 10px 20px 30px 20px; font-family: 'Source Sans Pro', helvetica, arial, sans-serif; color:#000000; font-size: 18px; line-height: 24px;" }
-ms-text-size-adjust: 100%; %p{ style: "margin: 0 0 20px 0;" }
} = @message.body_line1.html_safe
- @message.body_line2&.tap do |line|
table, %p{ style: "margin: 0 0 20px 0;" }
td { = line.html_safe
mso-table-lspace: 0pt; - if @message.cta_text
mso-table-rspace: 0pt; %tr
} %td{ align: "center", style: "padding: 10px 20px 80px 20px; font-family: 'Source Sans Pro', helvetica, arial, sans-serif;" }
.cta_link= @message.cta_link
img { - else
-ms-interpolation-mode: bicubic; %tr
} %td{ style: "padding: 10px 20px 10px 20px; font-family: 'Source Sans Pro', helvetica, arial, sans-serif; color:#000000; font-size: 16px; line-height: 20px;" }
%table{ border: "0", cellpadding: "0", cellspacing: "0", width: "100%", style: "width: 100%; min-width: 100%;" }
/* RESET STYLES */ %tr
img { %td{ width: "50%", style: "width: 50%; min-width: 50%; color: #000000; font-family: 'Source Sans Pro', helvetica, arial, sans-serif; font-size: 16px; line-height: 100%; padding-bottom: 16px; text-align: left;", align: "left" }
border: 0; = @message.feedback_ratings(1)
height: auto; %td{ width: "50%", style: "width: 50%; min-width: 50%; color: #000000; font-family: 'Source Sans Pro', helvetica, arial, sans-serif; font-size: 16px; line-height: 100%; padding-bottom: 16px; text-align: right;", align: "right" }
line-height: 100%; = @message.feedback_ratings(5)
outline: none; %tr
text-decoration: none; %td{ align: "center", style: "padding: 10px 1px 30px 1px;" }
} %table{ align: "center", cellpadding: "5", cellspacing: "0", width: "100%", style: "width: 100%; min-width: 100%; border: 1px solid #dae0ea; border-radius: 0; min-width: 100%; text-align: center; font-family: 'Source Sans Pro', helvetica, arial, sans-serif; font-size: 16px;" }
%tr
table { - (1..5).each do |rating|
border-collapse: collapse !important; %td{ height: "54", style: "border-left: 1px solid #dae0ea; padding-bottom: 0; width: 9% !important;", width: "9%" }
} %a{ href: @message.feedback_link(rating), style: "color: #424242; display: block; text-decoration: none;" }
%span{ height: "54", style: "display: block; font-size: 18px; height: 22px; line-height: 22px; padding: 16px 0; width: 100%; text-decoration: none;" }
body { = rating
height: 100% !important; %tr
margin: 0 !important; %td{ style: "padding: 10px 20px 30px 20px; font-family: 'Source Sans Pro', helvetica, arial, sans-serif; color:#000000; font-size: 18px; line-height: 24px;" }
padding: 0 !important; %p{ style: "margin: 0 0 50px 0;" }
width: 100% !important; = @message.feedback_thanks
background-color: #ffffff; - if @message.invite_members?
color: #424242; %tr
} %td{ align: "center", style: "padding: 0 20px 80px 20px; font-family: 'Source Sans Pro', helvetica, arial, sans-serif;" }
= @message.invite_text
a { %br
color: #6b4fbb; = @message.invite_link
text-decoration: underline;
}
.cta_link a {
font-size: 24px;
font-family: 'Source Sans Pro', helvetica, arial, sans-serif;
color: #ffffff;
text-decoration: none;
border-radius: 5px;
-webkit-border-radius: 5px;
background-color: #6e49cb;
border-top: 15px solid #6e49cb;
border-bottom: 15px solid #6e49cb;
border-right: 40px solid #6e49cb;
border-left: 40px solid #6e49cb;
display: inline-block;
}
.footernav {
display: inline !important;
}
.footernav a {
color: #6e49cb;
}
.address {
margin: 0;
font-size: 16px;
line-height: 26px;
}
:css
/* iOS BLUE LINKS */
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
/[if gte mso 9]
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
/[if (mso)|(mso 16)]
<style type="text/css">
body, table, td, a, span { font-family: Arial, Helvetica, sans-serif !important; }
</style>
:css
@media only screen and (max-width: 595px) {
.wrapper {
width: 100% !important;
margin: 0 auto !important;
padding: 0 !important;
}
p,
li {
font-size: 18px !important;
line-height: 26px !important;
}
.stack {
width: 100% !important;
}
.stack-mobile-padding {
width: 100% !important;
margin-top: 20px !important;
}
.callout {
padding-bottom: 20px !important;
}
.redbutton {
text-align: center;
}
.stack33 {
display: block !important;
width: 100% !important;
max-width: 100% !important;
direction: ltr !important;
text-align: center !important;
}
}
@media only screen and (max-width: 480px) {
u~div {
width: 100vw !important;
}
div>u~div {
width: 100% !important;
}
}
%body#body{ width: "100%" }
%table{ border: "0", cellpadding: "0", cellspacing: "0", role: "presentation", width: "100%" }
%tr
%td{ align: "center", style: "padding: 0px;" }
%table.wrapper{ border: "0", cellpadding: "0", cellspacing: "0", role: "presentation", width: "600" }
%tr
%td{ style: "padding: 0px;" }
#main-story.mktEditable{ mktoname: "main-story" }
%table{ border: "0", cellpadding: "0", cellspacing: "0", role: "presentation", width: "100%" }
%tr
%td{ align: "left", style: "padding: 0 20px;" }
= about_link('mailers/in_product_marketing/gitlab-logo-gray-rgb.png', 200)
%tr
%td{ "aria-hidden" => "true", height: "30", style: "font-size: 0; line-height: 0;" }
- if @message.series?
%tr{ style: "background-color: #ffffff;" }
%td{ style: "color: #424242; padding: 10px 30px; text-align: center; font-family: 'Source Sans Pro', helvetica, arial, sans-serif;font-size: 16px; line-height: 22px; border: 1px solid #dddddd" }
%p
= @message.progress.html_safe
%tr
%td{ bgcolor: "#ffffff", height: "auto", style: "max-width: 600px; width: 100%; text-align: center; height: 200px; padding: 25px 15px; mso-line-height-rule: exactly; min-height: 40px; font-family: 'Source Sans Pro', helvetica, arial, sans-serif;", valign: "middle", width: "100%" }
= inline_image_link(@message.logo_path, { width: '150', style: 'width: 150px;' })
%h1{ style: "font-size: 40px; line-height: 46x; color: #000000; padding: 20px 0 0 0; font-weight: normal;" }
= @message.title
%h2{ style: "font-size: 28px; line-height: 34px; color: #000000; padding: 0; font-weight: 400;" }
= @message.subtitle
%tr
%td{ style: "padding: 10px 20px 30px 20px; font-family: 'Source Sans Pro', helvetica, arial, sans-serif; color:#000000; font-size: 18px; line-height: 24px;" }
%p{ style: "margin: 0 0 20px 0;" }
= @message.body_line1.html_safe
- @message.body_line2&.tap do |line|
%p{ style: "margin: 0 0 20px 0;" }
= line.html_safe
- if @message.cta_text
%tr
%td{ align: "center", style: "padding: 10px 20px 80px 20px; font-family: 'Source Sans Pro', helvetica, arial, sans-serif;" }
.cta_link= @message.cta_link
- else
%tr
%td{ style: "padding: 10px 20px 10px 20px; font-family: 'Source Sans Pro', helvetica, arial, sans-serif; color:#000000; font-size: 16px; line-height: 20px;" }
%table{ border: "0", cellpadding: "0", cellspacing: "0", width: "100%", style: "width: 100%; min-width: 100%;" }
%tr
%td{ width: "50%", style: "width: 50%; min-width: 50%; color: #000000; font-family: 'Source Sans Pro', helvetica, arial, sans-serif; font-size: 16px; line-height: 100%; padding-bottom: 16px; text-align: left;", align: "left" }
= @message.feedback_ratings(1)
%td{ width: "50%", style: "width: 50%; min-width: 50%; color: #000000; font-family: 'Source Sans Pro', helvetica, arial, sans-serif; font-size: 16px; line-height: 100%; padding-bottom: 16px; text-align: right;", align: "right" }
= @message.feedback_ratings(5)
%tr
%td{ align: "center", style: "padding: 10px 1px 30px 1px;" }
%table{ align: "center", cellpadding: "5", cellspacing: "0", width: "100%", style: "width: 100%; min-width: 100%; border: 1px solid #dae0ea; border-radius: 0; min-width: 100%; text-align: center; font-family: 'Source Sans Pro', helvetica, arial, sans-serif; font-size: 16px;" }
%tr
- (1..5).each do |rating|
%td{ height: "54", style: "border-left: 1px solid #dae0ea; padding-bottom: 0; width: 9% !important;", width: "9%" }
%a{ href: @message.feedback_link(rating), style: "color: #424242; display: block; text-decoration: none;" }
%span{ height: "54", style: "display: block; font-size: 18px; height: 22px; line-height: 22px; padding: 16px 0; width: 100%; text-decoration: none;" }
= rating
%tr
%td{ style: "padding: 10px 20px 30px 20px; font-family: 'Source Sans Pro', helvetica, arial, sans-serif; color:#000000; font-size: 18px; line-height: 24px;" }
%p{ style: "margin: 0 0 50px 0;" }
= @message.feedback_thanks
- if @message.invite_members?
%tr
%td{ align: "center", style: "padding: 0 20px 80px 20px; font-family: 'Source Sans Pro', helvetica, arial, sans-serif;" }
= @message.invite_text
%br
= @message.invite_link
%tr{ style: "background-color: #ffffff;" }
%td{ align: "center", style: "padding:75px 20px 25px;" }
= about_link('gitlab_logo.png', 80)
%tr{ style: "background-color: #ffffff;" }
%td{ align: "center", style: "padding:0px ;" }
%tr{ style: "background-color: #ffffff;" }
%td{ align: "center", style: "padding:0px 10px; font-family: 'Source Sans Pro', helvetica, arial, sans-serif; " }
%span.footernav{ style: "color: #6e49cb; font-size: 16px; line-height: 26px; font-family: 'Source Sans Pro', helvetica, arial, sans-serif;" }
= @message.footer_links.join('&nbsp;' * 3 + '|' + '&nbsp;' * 4).html_safe
%tr{ style: "background-color:#ffffff;" }
%td{ align: "center", style: "padding: 40px 30px 20px 30px; font-family: 'Source Sans Pro', helvetica, arial, sans-serif;" }
.address= @message.address
%tr{ style: "background-color: #ffffff;" }
%td{ align: "left", style: "padding:20px 30px 20px 30px;" }
%span.footernav{ style: "color: #6e49cb; font-size: 14px; line-height: 20px; font-family: 'Source Sans Pro', helvetica, arial, sans-serif; color:#424242;" }
= @message.unsubscribe.html_safe
lib/gitlab/email/message/in_product_marketing/base.rb
View file @ af5b79cf
...@@ -88,29 +88,6 @@ module Gitlab ...@@ -88,29 +88,6 @@ module Gitlab
end end
end end
def address
s_('InProductMarketing|%{strong_start}GitLab Inc.%{strong_end} 268 Bush Street, #350, San Francisco, CA 94104, USA').html_safe % strong_options
end
def footer_links
links = [
[s_('InProductMarketing|Blog'), 'https://about.gitlab.com/blog'],
[s_('InProductMarketing|Twitter'), 'https://twitter.com/gitlab'],
[s_('InProductMarketing|Facebook'), 'https://www.facebook.com/gitlab'],
[s_('InProductMarketing|YouTube'), 'https://www.youtube.com/channel/UCnMGQ8QHMAnVIsI3xJrihhg']
]
case format
when :html
links.map do |text, link|
ActionController::Base.helpers.link_to(text, link)
end
else
'| ' + links.map do |text, link|
[text, link].join(' ')
end.join("\n| ")
end
end
def logo_path def logo_path
["mailers/in_product_marketing", "#{track}-#{series}.png"].join('/') ["mailers/in_product_marketing", "#{track}-#{series}.png"].join('/')
end end
......
lib/gitlab/email/message/in_product_marketing/helper.rb
View file @ af5b79cf
...@@ -8,6 +8,29 @@ module Gitlab ...@@ -8,6 +8,29 @@ module Gitlab
include ActionView::Context include ActionView::Context
include ActionView::Helpers::TagHelper include ActionView::Helpers::TagHelper
def footer_links
links = [
[s_('InProductMarketing|Blog'), 'https://about.gitlab.com/blog'],
[s_('InProductMarketing|Twitter'), 'https://twitter.com/gitlab'],
[s_('InProductMarketing|Facebook'), 'https://www.facebook.com/gitlab'],
[s_('InProductMarketing|YouTube'), 'https://www.youtube.com/channel/UCnMGQ8QHMAnVIsI3xJrihhg']
]
case format
when :html
links.map do |text, link|
ActionController::Base.helpers.link_to(text, link)
end
else
'| ' + links.map do |text, link|
[text, link].join(' ')
end.join("\n| ")
end
end
def address
s_('InProductMarketing|%{strong_start}GitLab Inc.%{strong_end} 268 Bush Street, #350, San Francisco, CA 94104, USA').html_safe % strong_options
end
private private
def list(array) def list(array)
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7