use common devise layout and use heading style
This commit is contained in:
parent
25fcaa9fa3
commit
a3bd6ce8a3
10 changed files with 118 additions and 292 deletions
|
@ -1,140 +0,0 @@
|
|||
@import "framework/variables";
|
||||
|
||||
// NOTE: This stylesheet is for the exclusive use of the `devise_mailer` layout
|
||||
// used for Devise email templates, and _should not_ be included in any
|
||||
// application stylesheets.
|
||||
//
|
||||
// Styles defined here are embedded directly into the resulting email HTML via
|
||||
// the `premailer` gem.
|
||||
|
||||
$body-background-color: #363636;
|
||||
$message-background-color: #fafafa;
|
||||
|
||||
$header-color: #6b4fbb;
|
||||
$body-color: #444;
|
||||
$cta-color: #e14329;
|
||||
$footer-link-color: #7e7e7e;
|
||||
|
||||
$font-family: Helvetica, Arial, sans-serif;
|
||||
|
||||
body {
|
||||
background-color: $body-background-color;
|
||||
font-family: $font-family;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
table {
|
||||
-premailer-cellpadding: 0;
|
||||
-premailer-cellspacing: 0;
|
||||
|
||||
border: 0;
|
||||
border-collapse: separate;
|
||||
|
||||
&#wrapper {
|
||||
background-color: $body-background-color;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&#header {
|
||||
margin: 0 auto;
|
||||
text-align: left;
|
||||
width: 600px;
|
||||
|
||||
& > td {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
&#body {
|
||||
background-color: $message-background-color;
|
||||
border: 1px solid $black;
|
||||
border-radius: 4px;
|
||||
margin: 0 auto;
|
||||
width: 600px;
|
||||
}
|
||||
|
||||
&#footer {
|
||||
color: $footer-link-color;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
td {
|
||||
&#body-container {
|
||||
padding: 20px 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#logo {
|
||||
border: none;
|
||||
outline: none;
|
||||
min-height: 88px;
|
||||
width: 134px;
|
||||
}
|
||||
|
||||
#content {
|
||||
h2 {
|
||||
color: $header-color;
|
||||
font-size: 30px;
|
||||
font-weight: 400;
|
||||
line-height: 34px;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
p {
|
||||
color: $body-color;
|
||||
font-size: 17px;
|
||||
line-height: 24px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#cta {
|
||||
border: 1px solid $cta-color;
|
||||
border-radius: 3px;
|
||||
display: inline-block;
|
||||
margin: 20px 0;
|
||||
padding: 12px 24px;
|
||||
|
||||
a {
|
||||
background-color: $message-background-color;
|
||||
color: $cta-color;
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
#tanuki {
|
||||
padding: 40px 0 0;
|
||||
|
||||
img {
|
||||
border: none;
|
||||
outline: none;
|
||||
width: 37px;
|
||||
min-height: 36px;
|
||||
}
|
||||
}
|
||||
|
||||
#tagline {
|
||||
font-size: 22px;
|
||||
font-weight: 100;
|
||||
padding: 4px 0 40px;
|
||||
}
|
||||
|
||||
#social {
|
||||
padding: 0 10px 20px;
|
||||
width: 600px;
|
||||
word-spacing: 20px;
|
||||
|
||||
a {
|
||||
color: $footer-link-color;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
|
@ -2,7 +2,7 @@ class DeviseMailer < Devise::Mailer
|
|||
default from: "#{Gitlab.config.gitlab.email_display_name} <#{Gitlab.config.gitlab.email_from}>"
|
||||
default reply_to: Gitlab.config.gitlab.email_reply_to
|
||||
|
||||
layout 'mailer'
|
||||
layout 'mailer/devise'
|
||||
|
||||
helper EmailsHelper
|
||||
|
||||
|
|
|
@ -1,16 +1,15 @@
|
|||
.center
|
||||
- if @resource.unconfirmed_email.present?
|
||||
#content
|
||||
%h2= @resource.unconfirmed_email
|
||||
%p Click the link below to confirm your email address.
|
||||
#cta
|
||||
= link_to 'Confirm your email address', confirmation_url(@resource, confirmation_token: @token)
|
||||
- else
|
||||
#content
|
||||
- if Gitlab.com?
|
||||
%h2 Thanks for signing up to GitLab!
|
||||
- else
|
||||
%h2 Welcome, #{@resource.name}!
|
||||
%p To get started, click the link below to confirm your account.
|
||||
#cta
|
||||
= link_to 'Confirm your account', confirmation_url(@resource, confirmation_token: @token)
|
||||
- if @resource.unconfirmed_email.present?
|
||||
#content
|
||||
= email_default_heading(@resource.unconfirmed_email)
|
||||
%p Click the link below to confirm your email address.
|
||||
#cta
|
||||
= link_to 'Confirm your email address', confirmation_url(@resource, confirmation_token: @token)
|
||||
- else
|
||||
#content
|
||||
- if Gitlab.com?
|
||||
= email_default_heading('Thanks for signing up to GitLab!')
|
||||
- else
|
||||
= email_default_heading("Welcome, #{@resource.name}!")
|
||||
%p To get started, click the link below to confirm your account.
|
||||
#cta
|
||||
= link_to 'Confirm your account', confirmation_url(@resource, confirmation_token: @token)
|
||||
|
|
|
@ -1,9 +1,8 @@
|
|||
= render layout: 'layouts/mailer/default_content' do
|
||||
Hello, #{@resource.name}!
|
||||
%p
|
||||
The password for your GitLab account on
|
||||
#{link_to(Gitlab.config.gitlab.url, Gitlab.config.gitlab.url)}
|
||||
has successfully been changed.
|
||||
%p
|
||||
If you did not initiate this change, please contact your administrator
|
||||
immediately.
|
||||
= email_default_heading("Hello, #{@resource.name}!")
|
||||
%p
|
||||
The password for your GitLab account on
|
||||
#{link_to(Gitlab.config.gitlab.url, Gitlab.config.gitlab.url)}
|
||||
has successfully been changed.
|
||||
%p
|
||||
If you did not initiate this change, please contact your administrator
|
||||
immediately.
|
||||
|
|
|
@ -1,11 +1,10 @@
|
|||
= render layout: 'layouts/mailer/default_content' do
|
||||
Hello, #{@resource.name}!
|
||||
%p
|
||||
Someone, hopefully you, has requested to reset the password for your
|
||||
GitLab account on #{link_to(Gitlab.config.gitlab.url, Gitlab.config.gitlab.url)}.
|
||||
%p
|
||||
If you did not perform this request, you can safely ignore this email.
|
||||
%p
|
||||
Otherwise, click the link below to complete the process.
|
||||
#cta
|
||||
= link_to('Reset password', edit_password_url(@resource, reset_password_token: @token))
|
||||
= email_default_heading("Hello, #{@resource.name}!")
|
||||
%p
|
||||
Someone, hopefully you, has requested to reset the password for your
|
||||
GitLab account on #{link_to(Gitlab.config.gitlab.url, Gitlab.config.gitlab.url)}.
|
||||
%p
|
||||
If you did not perform this request, you can safely ignore this email.
|
||||
%p
|
||||
Otherwise, click the link below to complete the process.
|
||||
#cta
|
||||
= link_to('Reset password', edit_password_url(@resource, reset_password_token: @token))
|
||||
|
|
|
@ -1,9 +1,8 @@
|
|||
.center
|
||||
#content
|
||||
%h2 Hello, #{@resource.name}!
|
||||
%p
|
||||
Your GitLab account has been locked due to an excessive amount of unsuccessful
|
||||
sign in attempts. Your account will automatically unlock in #{time_ago_in_words(Devise.unlock_in.from_now)}
|
||||
or you may click the link below to unlock now.
|
||||
#cta
|
||||
= link_to('Unlock account', unlock_url(@resource, unlock_token: @token))
|
||||
#content
|
||||
= email_default_heading("Hello, #{@resource.name}!")
|
||||
%p
|
||||
Your GitLab account has been locked due to an excessive amount of unsuccessful
|
||||
sign in attempts. Your account will automatically unlock in #{time_ago_in_words(Devise.unlock_in.from_now)}
|
||||
or you may click the link below to unlock now.
|
||||
#cta
|
||||
= link_to('Unlock account', unlock_url(@resource, unlock_token: @token))
|
||||
|
|
72
app/views/layouts/_mailer.html.haml
Normal file
72
app/views/layouts/_mailer.html.haml
Normal file
|
@ -0,0 +1,72 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
%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" }/
|
||||
%meta{ content: "IE=edge", "http-equiv" => "X-UA-Compatible" }/
|
||||
%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; }
|
||||
|
||||
/* 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;
|
||||
}
|
||||
|
||||
/* ANDROID MARGIN HACK */
|
||||
body { margin:0 !important; }
|
||||
div[style*="margin: 16px 0"] { margin:0 !important; }
|
||||
|
||||
@media only screen and (max-width: 639px) {
|
||||
body, #body {
|
||||
min-width: 320px !important;
|
||||
}
|
||||
table.wrapper {
|
||||
width: 100% !important;
|
||||
min-width: 320px !important;
|
||||
}
|
||||
table.wrapper > tbody > tr > td {
|
||||
border-left: 0 !important;
|
||||
border-right: 0 !important;
|
||||
border-radius: 0 !important;
|
||||
padding-left: 10px !important;
|
||||
padding-right: 10px !important;
|
||||
}
|
||||
}
|
||||
%body{ style: "background-color:#fafafa;margin:0;padding:0;text-align:center;min-width:640px;width:100%;height:100%;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;" }
|
||||
%table#body{ border: "0", cellpadding: "0", cellspacing: "0", style: "background-color:#fafafa;margin:0;padding:0;text-align:center;min-width:640px;width:100%;" }
|
||||
%tbody
|
||||
%tr.line
|
||||
%td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;background-color:#6b4fbb;height:4px;font-size:4px;line-height:4px;" }
|
||||
%tr.header
|
||||
%td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;padding:25px 0;font-size:13px;line-height:1.6;color:#5c5c5c;" }
|
||||
= header_logo
|
||||
%tr
|
||||
%td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;" }
|
||||
%table.wrapper{ border: "0", cellpadding: "0", cellspacing: "0", style: "width:640px;margin:0 auto;border-collapse:separate;border-spacing:0;" }
|
||||
%tbody
|
||||
%tr
|
||||
%td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;background-color:#ffffff;text-align:left;padding:18px 25px;border:1px solid #ededed;border-radius:3px;overflow:hidden;" }
|
||||
%table.content{ border: "0", cellpadding: "0", cellspacing: "0", style: "width:100%;border-collapse:separate;border-spacing:0;" }
|
||||
%tbody
|
||||
= yield
|
||||
|
||||
%tr.footer
|
||||
%td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;padding:25px 0;font-size:13px;line-height:1.6;color:#5c5c5c;" }
|
||||
%img{ alt: "GitLab", height: "33", src: image_url('mailers/gitlab_footer_logo.gif'), style: "display:block;margin:0 auto 1em;", width: "90" }/
|
||||
%div
|
||||
%a{ href: profile_notifications_url, style: "color:#3777b0;text-decoration:none;" } Manage all notifications
|
||||
·
|
||||
%a{ href: help_url, style: "color:#3777b0;text-decoration:none;" } Help
|
||||
%div
|
||||
You're receiving this email because of your account on
|
||||
= succeed "." do
|
||||
%a{ href: root_url, style: "color:#3777b0;text-decoration:none;" }= Gitlab.config.gitlab.host
|
|
@ -1,34 +0,0 @@
|
|||
!!! 5
|
||||
%html
|
||||
%head
|
||||
%meta{ content: 'text/html; charset=UTF-8', 'http-equiv'=> 'Content-Type' }
|
||||
= stylesheet_link_tag 'mailers/devise'
|
||||
|
||||
%body
|
||||
%table#wrapper
|
||||
%tr
|
||||
%td
|
||||
%table#header
|
||||
%td{ valign: "top" }
|
||||
= image_tag('mailers/gitlab_header_logo.png', id: 'logo', alt: 'GitLab Wordmark')
|
||||
|
||||
%table#body
|
||||
%tr
|
||||
%td#body-container
|
||||
= yield
|
||||
|
||||
- if Gitlab.com?
|
||||
%table#footer
|
||||
%tr
|
||||
%td#tanuki
|
||||
= image_tag('mailers/gitlab_tanuki_2x.png', alt: 'GitLab Logo')
|
||||
%tr
|
||||
%td#tagline
|
||||
Everyone can contribute
|
||||
%tr
|
||||
%td#social
|
||||
= link_to 'Blog', 'https://about.gitlab.com/blog/'
|
||||
= link_to 'Twitter', 'https://twitter.com/gitlab'
|
||||
= link_to 'Facebook', 'https://www.facebook.com/gitlab/'
|
||||
= link_to 'YouTube', 'https://www.youtube.com/channel/UCnMGQ8QHMAnVIsI3xJrihhg'
|
||||
= link_to 'LinkedIn', 'https://www.linkedin.com/company/gitlab-com'
|
|
@ -1,72 +1 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
%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" }/
|
||||
%meta{ content: "IE=edge", "http-equiv" => "X-UA-Compatible" }/
|
||||
%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; }
|
||||
|
||||
/* 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;
|
||||
}
|
||||
|
||||
/* ANDROID MARGIN HACK */
|
||||
body { margin:0 !important; }
|
||||
div[style*="margin: 16px 0"] { margin:0 !important; }
|
||||
|
||||
@media only screen and (max-width: 639px) {
|
||||
body, #body {
|
||||
min-width: 320px !important;
|
||||
}
|
||||
table.wrapper {
|
||||
width: 100% !important;
|
||||
min-width: 320px !important;
|
||||
}
|
||||
table.wrapper > tbody > tr > td {
|
||||
border-left: 0 !important;
|
||||
border-right: 0 !important;
|
||||
border-radius: 0 !important;
|
||||
padding-left: 10px !important;
|
||||
padding-right: 10px !important;
|
||||
}
|
||||
}
|
||||
%body{ style: "background-color:#fafafa;margin:0;padding:0;text-align:center;min-width:640px;width:100%;height:100%;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;" }
|
||||
%table#body{ border: "0", cellpadding: "0", cellspacing: "0", style: "background-color:#fafafa;margin:0;padding:0;text-align:center;min-width:640px;width:100%;" }
|
||||
%tbody
|
||||
%tr.line
|
||||
%td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;background-color:#6b4fbb;height:4px;font-size:4px;line-height:4px;" }
|
||||
%tr.header
|
||||
%td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;padding:25px 0;font-size:13px;line-height:1.6;color:#5c5c5c;" }
|
||||
= header_logo
|
||||
%tr
|
||||
%td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;" }
|
||||
%table.wrapper{ border: "0", cellpadding: "0", cellspacing: "0", style: "width:640px;margin:0 auto;border-collapse:separate;border-spacing:0;" }
|
||||
%tbody
|
||||
%tr
|
||||
%td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;background-color:#ffffff;text-align:left;padding:18px 25px;border:1px solid #ededed;border-radius:3px;overflow:hidden;" }
|
||||
%table.content{ border: "0", cellpadding: "0", cellspacing: "0", style: "width:100%;border-collapse:separate;border-spacing:0;" }
|
||||
%tbody
|
||||
= yield
|
||||
|
||||
%tr.footer
|
||||
%td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;padding:25px 0;font-size:13px;line-height:1.6;color:#5c5c5c;" }
|
||||
%img{ alt: "GitLab", height: "33", src: image_url('mailers/gitlab_footer_logo.gif'), style: "display:block;margin:0 auto 1em;", width: "90" }/
|
||||
%div
|
||||
%a{ href: profile_notifications_url, style: "color:#3777b0;text-decoration:none;" } Manage all notifications
|
||||
·
|
||||
%a{ href: help_url, style: "color:#3777b0;text-decoration:none;" } Help
|
||||
%div
|
||||
You're receiving this email because of your account on
|
||||
= succeed "." do
|
||||
%a{ href: root_url, style: "color:#3777b0;text-decoration:none;" }= Gitlab.config.gitlab.host
|
||||
= render 'layouts/mailer'
|
||||
|
|
3
app/views/layouts/mailer/devise.html.haml
Normal file
3
app/views/layouts/mailer/devise.html.haml
Normal file
|
@ -0,0 +1,3 @@
|
|||
= render layout: 'layouts/mailer' do
|
||||
= render layout: 'layouts/mailer/default_content' do
|
||||
= yield
|
Loading…
Reference in a new issue