Skip to content

Commit 0d95a35

Browse files
pandafypandafy
committed
[change] Ehanced UI of HTML email template
1 parent 8b9d6d7 commit 0d95a35

File tree

5 files changed

+138
-44
lines changed

5 files changed

+138
-44
lines changed

‎openwisp_utils/admin_theme/email.py‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
from smtplib import SMTPRecipientsRefused
33

44
from django.conf import settings
5+
from django.contrib.sites.shortcuts import get_current_site
56
from django.core.mail import EmailMultiAlternatives
67
from django.template.loader import render_to_string
78
from django.utils.html import strip_tags
@@ -29,9 +30,13 @@ def send_email(
2930
**kwargs,
3031
)
3132
if app_settings.OPENWISP_HTML_EMAIL and body_html:
33+
site = get_current_site(None)
34+
scheme = 'http' if settings.DEBUG else 'https'
3235
context = dict(
33-
subject=subject,
36+
title=subject,
3437
message=body_html,
38+
site_name=site.name,
39+
site_url=f"{scheme}://{site.domain}",
3540
logo_url=app_settings.OPENWISP_EMAIL_LOGO,
3641
)
3742
context.update(extra_context)

‎openwisp_utils/admin_theme/static/ui/openwisp/images/email.png‎

518 Bytes
Loading

‎openwisp_utils/admin_theme/static/ui/openwisp/images/email.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎openwisp_utils/admin_theme/static/ui/openwisp/images/right-arrow.png‎

157 Bytes
Loading

‎openwisp_utils/admin_theme/templates/openwisp_utils/email_template.html‎

Lines changed: 129 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,87 +1,171 @@
11
{% load i18n %}
22
{% load l10n %}
3+
{% load static %}
34
<html lang="en">
45
<head>
56
<meta charset="UTF-8">
67
<meta name="viewport" content="width=device-width, initial-scale=1.0">
78
{% block styles %}
89
<style type="text/css">
10+
:root {
11+
--muted-fg-color: #777;
12+
--loud-fg-color: #333;
13+
--muted-bg-color: #F2F4F7;
14+
--muted-border-color: #D0D5DD;
15+
}
16+
917
body {
1018
min-width: 250px;
11-
background: #ffe5e5;
19+
background: #fff;
1220
margin: 0;
1321
padding: 0;
1422
}
15-
.container{
16-
background: #ffe5e5;
23+
24+
.email-info {
25+
margin: 1.1em auto;
26+
font-size: 0.8em;
27+
font-weight: 400;
28+
color: #777;
29+
text-align: center;
30+
}
31+
32+
.container {
33+
background: #fff;
1734
height: 100%;
18-
display: flex;
19-
justify-content: center;
20-
align-items: center;
2135
}
22-
.box{
36+
37+
.box {
2338
width: auto;
24-
max-width: 650px;
25-
padding: 30px;
26-
background-color: #fcfcfc;
27-
box-sizing: border-box;
28-
box-shadow: 0 15px 25px rgba(256,256, 256,.5);
29-
margin: 30px auto;
39+
max-width: 700px;
40+
padding: 24px 15px 34px 15px;
41+
background-color: #fff;
42+
box-shadow: 0px 20px 24px -4px rgba(16, 24, 40, 0.08), 0px 8px 8px -4px rgba(16, 24, 40, 0.03);
43+
border-radius: 12px;
44+
margin: 0px auto 16px auto;
3045
line-height: 27px;
3146
}
32-
.logo-container{
47+
48+
.icon-container {
49+
margin: 0 auto;
50+
width: 3em;
51+
height: 3em;
52+
background-color: rgba(254, 240, 199, 1);
53+
border-radius: 3em;
54+
}
55+
56+
.icon-container img {
57+
width: 24px;
58+
height: 18px;
59+
margin: 15px 6px;
60+
}
61+
62+
.sysname-container {
63+
width: fit-content;
64+
margin: 1em auto 0 auto;
65+
background-color: #F2F4F7;
66+
padding: 0 0.5em;
67+
border: solid #D0D5DD 1px;
68+
border-radius: 1em;
69+
color: #777;
70+
font-size: 12px;
71+
line-height: 18px;
72+
}
73+
74+
.logo-container {
3375
text-align: center;
34-
margin-bottom: 20px;
76+
margin-top: 1em;
3577
}
78+
3679
.logo {
37-
max-width: 210px;
80+
max-width: 104px;
3881
}
39-
.call-to-action{
82+
83+
.call-to-action {
4084
text-align: center;
4185
margin-top: 30px;
4286
}
43-
.subject{
44-
font-size: medium;
45-
font-weight: 700;
46-
margin: 20px 0;
87+
88+
.email-title {
89+
font-weight: 600;
90+
font-size: 18px;
91+
width: fit-content;
92+
margin: 0.1em auto;
93+
color: #101828;
4794
}
48-
.msg{
95+
96+
.subtitle {
97+
font-weight: 400;
98+
font-size: 14px;
99+
width: fit-content;
100+
margin: 0em auto 1em auto;
101+
color: #475467;
102+
}
103+
104+
.msg {
49105
color: #1b1818;
50106
margin: 20px 0;
51107
font-size: medium;
52108
}
53-
.btn{
109+
110+
.btn {
54111
appearance: button;
55112
text-decoration: none;
56-
color: #fff!important;
57-
background: #333;
58-
border-radius: 4px;
59-
border: 0;
60-
padding: 10px 15px;
61-
font-weight: bold;
62-
font-size: medium;
113+
border: solid #D0D5DD 1px;
114+
border-radius: 0.5em;
115+
font-weight: 600;
116+
font-size: 1em;
117+
line-height: 1.5em;
118+
padding: 0.6em 1em;
119+
color: #344054 !important;
120+
box-sizing: border-box;
121+
box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), inset 0px 0px 0px 1px rgba(16, 24, 40, 0.18), inset 0px -2px 0px rgba(16, 24, 40, 0.05);
63122
}
64-
.btn:hover, .btn:focus {
65-
background: #000;
66-
outline: 0 none;
67-
background: rgba(51, 51, 51, 0.7);
123+
124+
.btn:hover,
125+
.btn:focus {
126+
border-color: #000;
127+
color: #000;
68128
}
129+
69130
a:link:hover {
70131
text-decoration: none;
71132
}
133+
134+
.footer {
135+
height: 40px;
136+
text-align: center;
137+
}
138+
139+
.footer p {
140+
font-size: 12px;
141+
margin: 0 auto;
142+
line-height: 20px;
143+
}
72144
</style>
73145
{% endblock styles %}
74146
</head>
75147
<body>
76148
{% block body %}
77149
<div class="container">
150+
{% block logo %}
151+
<div class="logo-container">
152+
<img src="{{ logo_url }}" alt="Logo" class="logo">
153+
</div>
154+
{% endblock logo %}
155+
{% block email_info %}
156+
<div class="email-info">This email is sent to <u>{{ recipient_email }}</u> from [{{ site_name }}]</div>
157+
{% endblock email_info %}
78158
<div class="box">
79159
{% block mail_header %}
80-
<div class="logo-container">
81-
<img src="{{ logo_url }}" alt="Logo" class="logo">
160+
<div class="icon-container">
161+
<img src="{{ site_url }}{% static "ui/openwisp/images/email.png" %}" alt="email icon">
82162
</div>
83-
{% if subject %}
84-
<div class="subject">{{ subject }}</div>
163+
<div class="sysname-container">{{ site_name }}</div>
164+
{% if title %}
165+
<div class="email-title">{{ title }}</div>
166+
{% endif %}
167+
{% if subtitle %}
168+
<div class="subtitle">{{ subtitle }}</div>
85169
{% endif %}
86170
{% endblock mail_header %}
87171
{% block mail_body %}
@@ -94,13 +178,15 @@
94178
</div>
95179
{% endif %}
96180
{% endblock call_to_action %}
97-
{% block mail_footer %}
98-
{% if footer %}
181+
</div>
182+
{% block mail_footer %}
183+
{% if footer %}
184+
<div class="footer">
99185
{{ footer | safe }}
100-
{% endif %}
186+
</div>
187+
{% endif %}
101188
{% endblock mail_footer %}
102-
</div>
189+
{% endblock body %}
103190
</div>
104-
{% endblock body %}
105191
</body>
106192
</html>

0 commit comments

Comments
 (0)