diff options
Diffstat (limited to 'app/views/notify/in_product_marketing_email.html.haml')
| -rw-r--r-- | app/views/notify/in_product_marketing_email.html.haml | 286 |
1 files changed, 51 insertions, 235 deletions
diff --git a/app/views/notify/in_product_marketing_email.html.haml b/app/views/notify/in_product_marketing_email.html.haml index a85fa7c519f..a88d581c5de 100644 --- a/app/views/notify/in_product_marketing_email.html.haml +++ b/app/views/notify/in_product_marketing_email.html.haml @@ -1,235 +1,51 @@ -!!! -%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;" } - - 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(' ' * 3 + '|' + ' ' * 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 +- 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.cta_link_primary= @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 |