Changeset 1829fbf in OpenWorkouts-current


Ignore:
Timestamp:
Feb 20, 2019, 9:31:22 PM (5 years ago)
Author:
Borja Lopez <borja@…>
Branches:
current, feature/docs, master
Children:
38171c6
Parents:
42d775c
Message:

(#61) Several fixes for the multipart/alternative (text+html) version of the verify
your account email:

  • Use premailer [1] to embed all styles into the body of the html part of the email (ensuring the styles are rendered correctly in most email clients)
  • Fixed some styles (RGB colors, transparencies, etc don't work in mail clients)
  • Ensure the different bodies (text and html) have the proper content type and charset set.

[1] ​https://pypi.org/project/premailer

Files:
4 edited

Legend:

Unmodified
Added
Removed

  • ow/mail.py

    r42d775c r1829fbf  
    22
    33from pyramid_mailer import get_mailer
    4 from pyramid_mailer.message import Message
     4from pyramid_mailer.message import Message, Attachment
    55from pyramid.renderers import render
    66from pyramid.i18n import TranslationStringFactory
     7
     8import premailer
    79
    810_ = TranslationStringFactory('OpenWorkouts')
    … …  
    4547    mailer = get_mailer(request)
    4648    txt_body = render(txt_template, context, request)
    47     html_body = render(html_template, context, request)
     49    html_body = premailer.transform(render(html_template, context, request))
    4850    message = Message(
    4951        subject=subject,
    5052        recipients=[user.email],
    51         body=txt_body,
    52         html=html_body
     53        body=Attachment(data=txt_body,
     54                        content_type="text/plain; charset=utf-8",
     55                        transfer_encoding="quoted-printable"),
     56        html=Attachment(data=html_body,
     57                        content_type="text/html; charset=utf-8",
     58                        transfer_encoding="quoted-printable")
    5359    )
    5460    message = idna_encode_recipients(message)

  • ow/static/css/main.css

    r42d775c r1829fbf  
    14921492  justify-content: center;
    14931493  align-items: center;
    1494   min-height: calc(100vh - 98px);
     1494  /* dynamic min-height based on window height does not work well
     1495     with premailer and generating the proper html with styles for mails */
     1496  min-height: 400px;
    14951497  padding: 1em 0;
    1496   color: #e1e1e1;
     1498  /* RGB calculated color does not work well with premailer and
     1499       generating the proper html with styles for mails */
     1500  color: #151515;
    14971501}
    14981502.verify-account-content .info {
    14991503  max-width: 580px;
    1500   background-color: rgba(21, 21, 21, 0.6);
     1504  /* RGB calculated color does not work well with premailer and
     1505         generating the proper html with styles for mails */
     1506  background-color: #e1e1e1;
    15011507  border-radius: 6px;
    15021508  padding: 2em 1.5em;
    … …  
    15061512}
    15071513.verify-account-content a {
    1508   color: #e1e1e1;
     1514  /* RGB calculated color does not work well with premailer and
     1515           generating the proper html with styles for mails */
     1516  color: #151515;
    15091517  font-size: 13px;
    15101518  text-decoration: none;
    … …  
    15121520}
    15131521.verify-account-content a:hover {
    1514   color: white;
     1522  color: #151515;
    15151523}
    15161524.verify-account-content .button {
    1517   transition: all 500ms ease-in-out;
    15181525  background-color: #EE4056;
     1526  background: #EE4056;
    15191527  color: white;
    15201528  text-transform: uppercase;
    15211529}
    15221530.verify-account-content .button:hover {
    1523   background-color: #e6152f;
    1524 }
     1531  background-color: #F60002;
     1532}

  • ow/static/less/pages/verify_account.less

    r42d775c r1829fbf  
    55    justify-content: center;
    66    align-items: center;
    7     min-height: calc(100vh - 98px);
     7    /* dynamic min-height based on window height does not work well
     8     with premailer and generating the proper html with styles for mails */
     9    min-height: 400px;
    810    padding: 1em 0;
    9     color: @color-main-light;
     11    /* RGB calculated color does not work well with premailer and
     12       generating the proper html with styles for mails */
     13    color: #151515;
    1014
    1115    .info {
    1216        max-width: 580px;
    13         background-color: fadeout(@color-main, 40%);
     17        /* RGB calculated color does not work well with premailer and
     18         generating the proper html with styles for mails */
     19        background-color: #e1e1e1;
    1420        border-radius: 6px;
    1521        padding: 2em  1.5em;
    … …  
    2026
    2127    a {
    22         color: @color-main-light;
     28        /* RGB calculated color does not work well with premailer and
     29           generating the proper html with styles for mails */
     30        color: #151515;
    2331        font-size: 13px;
    2432        text-decoration: none;
    2533        margin-right: .75em;
    2634        &:hover {
    27             color: white;
     35            color: #151515;
    2836        }
    2937    }
    3038
    3139    .button {
    32         transition: all 500ms ease-in-out;
    3340        background-color: @color-app;
     41        background: @color-app;
    3442        color: white;
    3543        text-transform: uppercase;
    3644        &:hover {
    37             background-color: darken(@color-app, 10%);
     45            background-color: @color-app-important;
    3846        }
    3947    }

  • setup.py

    r42d775c r1829fbf  
    3535    'fitparse',
    3636    'splinter',
    37     'Pillow'
     37    'Pillow',
     38    'premailer'
    3839]
    3940
Note: See TracChangeset for help on using the changeset viewer.