Skip to content

Instantly share code, notes, and snippets.

@vittoriozamboni

vittoriozamboni/backbone.html

Last active January 14, 2021 09:45
Show Gist options
  • Save vittoriozamboni/26152cbea52ca88b0a69d4d416378e0a to your computer and use it in GitHub Desktop.
Save vittoriozamboni/26152cbea52ca88b0a69d4d416378e0a to your computer and use it in GitHub Desktop.
Download ZIP
Email backbone and content example
Raw
backbone.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>{{ title }}</title>
</head>
<body
style="
background-color: #f6f6f6;
font-family: 'Helvetica Neue', Helvetica, sans-serif;
font-size: 100%;
line-height: 1.6em;
height: 100%;
width: 100% !important;
margin: 0;
padding: 0;
"
>
<table style="width: 100%; padding: 20px">
<tr style="margin: 0; padding: 0">
<td
style="
background-color: #fff;
clear: both !important;
display: block !important;
max-width: 600px !important;
margin: 0 auto;
padding: 20px;
border: 1px solid #f0f0f0;
"
>
<div
style="display: block; max-width: 600px; margin: 0 auto; padding: 0"
>
<a href="{{ SITE_PREFIX }}" style="text-decoration: none">
<h2
style="
font-size: 28px;
line-height: 1.2em;
color: #247ea3;
font-weight: 200;
margin: 0 0 5px 0;
padding: 0;
"
>
Company Portal
</h2>
</a>
<h3
style="
font-size: 22px;
line-height: 1.2em;
color: #454545;
font-weight: 200;
"
>
{{ title }}
</h3>
{% autoescape off %}
<div
style="
font-size: 14px;
line-height: 1.6em;
font-weight: normal;
background-color: #fdfdfd;
margin: 25px 0;
padding: 15px;
display: block;
color: #454545;
"
>
{{ content }}
</div>
{% endautoescape %} {% if notification_button_url %}
<table
cellpadding="0"
cellspacing="0"
style="
line-height: 1.6em;
width: auto !important;
margin: 0 0 10px;
padding: 0;
border: none;
"
>
<tr style="margin: 0; padding: 0">
<td
style="text-align: center; background-color: transparent"
valign="top"
>
<a
href="{{ notification_button_url }}"
style="
font-size: 0.8em;
line-height: 2;
color: #ffffff;
display: inline-block;
font-weight: bold;
text-decoration: none;
background-color: #247da3;
border-color: #247da3;
border-style: solid;
border-width: 10px 20px;
border-radius: 25px;
"
>{{ notification_button_title }}</a
>
</td>
</tr>
</table>
{% endif %}
</div>
</td>
</tr>
</table>
<div style="display: block; max-width: 600px; margin: 0 auto; padding: 0">
<table style="width: 100%; margin: 0; padding: 0">
<tr style="margin: 0; padding: 0">
<td style="margin: 0; padding: 0; font-size: 12px; color: #666666">
<div style="text-align: center">
<p style="line-height: 1.6em">Company Portal automatic mailer</p>
<p style="line-height: 1.6em">
Don't like these annoying emails? You can edit notification
alterts from your settings page.
</p>
</div>
</td>
</tr>
</table>
</div>
</body>
</html>
Raw
notifications.py
from django.conf import settings
from django.core.mail import send_mail
from django.template import loader
import bleach
def generate_message(template, context):
backbone = loader.get_template(template)
return backbone.render(context)
def send_notification(to_emails, subject, message, context=None, **kwargs):
"""
Send a notification.
The email content is passed as HTML with `message` argument.
If `text_message` is not provided, message is converted by stripping tags.
Variables are converted by using Django template engine.
Args:
- to_emails: a list of emails
- subject: email subject
- message: (HTML) message
- context: additional context variables
Kwargs:
- text_message: plain text message; if not set, message is converted
- sender: overrides settings.EMAIL_SENDER value
- subject_prefix: adds a prefix to each email subject. If not passed,
settings.EMAIL_SUBJECT_PREFIX is used (if set).
"""
text_message = kwargs.get('text_message')
sender = kwargs.get('sender', settings.EMAIL_SENDER)
subject_prefix = kwargs.get('subject_prefix', getattr(settings, 'EMAIL_SUBJECT_PREFIX', ''))
html_backbone_template = 'company_portal/notifications/backbone.html'
title = kwargs.get('title', subject)
if subject_prefix:
subject = f'{subject_prefix}{subject}'
if not text_message:
text_message = bleach.clean(message, strip=True)
text_message += f'\nCompany Portal - {settings.UI_BASE_URL}\n'
email_context = {}
if context is not None:
email_context.update(context)
email_context.update({
'subject': subject,
'title': title,
'content': message,
'SITE_PREFIX': settings.UI_BASE_URL,
'STATIC_URL': settings.STATIC_URL,
})
html_message = generate_message(html_backbone_template, email_context)
send_mail(subject, text_message, sender, to_emails, html_message=html_message)
Raw
timesheets_notifications.py
from django.conf import settings
from company_portal.models import UserManager
from company_portal.notifications import send_notification, generate_message
def notify_new_time_off_request(time_off_request):
managers = UserManager.objects.filter(user=time_off_request.user)
local_context = {
"request_user_full_name": time_off_request.user.get_full_name(),
"request_date_from": time_off_request.date_from.strftime('%Y-%m-%d'),
"request_date_to": time_off_request.date_to.strftime('%Y-%m-%d'),
"description": time_off_request.description,
"is_full_day": "Yes" if time_off_request.is_full_day else "No",
}
message = generate_message('timesheets/notifications/time_off_request.html', local_context)
time_off_request_url = f'portal/time-off-requests/{time_off_request.id}'
context = {
"notification_button_title": "Manage Request",
"notification_button_url": settings.UI_BASE_URL + time_off_request_url
}
managers_emails = [m.manager.email for m in managers if m.manager.email is not None]
send_notification(managers_emails, 'New Time Off Request', message, context)
Raw
timesheets_templates_notifications_time_off_request.html
<div style="background-color: white; color: #454545">
<div>
A new Time Off Request has been createdy by {{ request_user_full_name }} and
requires your approval.
</div>
<div style="font-size: 14px; margin-top: 10px">
<div>
<span
style="
font-weight: 400;
font-size: 12px;
width: 60px;
display: inline-block;
"
>DATE:</span
>
<span style="color: #247da3"> {{ request_date_from }} </span>
<span style="font-weight: 400; display: inline-block">to</span>
<span style="color: #247da3"> {{ request_date_to }} </span>
</div>
<div>
<span
style="
font-weight: 400;
font-size: 12px;
width: 60px;
display: inline-block;
"
>FULL DAY:</span
>
{{ is_full_day }}
</div>
{% if description %}
<div style="padding: 10px">{{ description }}</div>
{% endif %}
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment