Skip to content

Commit c2f869a

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

File tree

5 files changed

+139
-44
lines changed

5 files changed

+139
-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: 130 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,87 +1,172 @@
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: 48px;
51+
height: 48px;
52+
background-color: rgba(254, 240, 199, 1);
53+
border-radius: 24px;
54+
text-align: center;
55+
}
56+
57+
.icon-container img {
58+
width: 24px;
59+
height: 18px;
60+
margin-top: 15px;
61+
}
62+
63+
.sysname-container {
64+
width: fit-content;
65+
margin: 1em auto 0 auto;
66+
background-color: #F2F4F7;
67+
padding: 0 0.5em;
68+
border: solid #D0D5DD 1px;
69+
border-radius: 1em;
70+
color: #777;
71+
font-size: 12px;
72+
line-height: 18px;
73+
}
74+
75+
.logo-container {
3376
text-align: center;
34-
margin-bottom: 20px;
77+
margin-top: 1em;
3578
}
79+
3680
.logo {
37-
max-width: 210px;
81+
max-width: 104px;
3882
}
39-
.call-to-action{
83+
84+
.call-to-action {
4085
text-align: center;
4186
margin-top: 30px;
4287
}
43-
.subject{
44-
font-size: medium;
45-
font-weight: 700;
46-
margin: 20px 0;
88+
89+
.email-title {
90+
font-weight: 600;
91+
font-size: 18px;
92+
width: fit-content;
93+
margin: 0.1em auto;
94+
color: #101828;
95+
}
96+
97+
.subtitle {
98+
font-weight: 400;
99+
font-size: 14px;
100+
width: fit-content;
101+
margin: 0em auto 1em auto;
102+
color: #475467;
47103
}
48-
.msg{
104+
105+
.msg {
49106
color: #1b1818;
50107
margin: 20px 0;
51108
font-size: medium;
52109
}
53-
.btn{
110+
111+
.btn {
54112
appearance: button;
55113
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;
114+
border: solid #D0D5DD 1px;
115+
border-radius: 0.5em;
116+
font-weight: 600;
117+
font-size: 1em;
118+
line-height: 1.5em;
119+
padding: 0.6em 1em;
120+
color: #344054 !important;
121+
box-sizing: border-box;
122+
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);
63123
}
64-
.btn:hover, .btn:focus {
65-
background: #000;
66-
outline: 0 none;
67-
background: rgba(51, 51, 51, 0.7);
124+
125+
.btn:hover,
126+
.btn:focus {
127+
border-color: #000;
128+
color: #000;
68129
}
130+
69131
a:link:hover {
70132
text-decoration: none;
71133
}
134+
135+
.footer {
136+
height: 40px;
137+
text-align: center;
138+
}
139+
140+
.footer p {
141+
font-size: 12px;
142+
margin: 0 auto;
143+
line-height: 20px;
144+
}
72145
</style>
73146
{% endblock styles %}
74147
</head>
75148
<body>
76149
{% block body %}
77150
<div class="container">
151+
{% block logo %}
152+
<div class="logo-container">
153+
<img src="{{ logo_url }}" alt="Logo" class="logo">
154+
</div>
155+
{% endblock logo %}
156+
{% block email_info %}
157+
<div class="email-info">This email is sent to <u>{{ recipient_email }}</u> from [{{ site_name }}]</div>
158+
{% endblock email_info %}
78159
<div class="box">
79160
{% block mail_header %}
80-
<div class="logo-container">
81-
<img src="{{ logo_url }}" alt="Logo" class="logo">
161+
<div class="icon-container">
162+
<img src="{{ site_url }}{% static "ui/openwisp/images/email.png" %}" alt="email icon">
82163
</div>
83-
{% if subject %}
84-
<div class="subject">{{ subject }}</div>
164+
<div class="sysname-container">{{ site_name }}</div>
165+
{% if title %}
166+
<div class="email-title">{{ title }}</div>
167+
{% endif %}
168+
{% if subtitle %}
169+
<div class="subtitle">{{ subtitle }}</div>
85170
{% endif %}
86171
{% endblock mail_header %}
87172
{% block mail_body %}
@@ -94,13 +179,15 @@
94179
</div>
95180
{% endif %}
96181
{% endblock call_to_action %}
97-
{% block mail_footer %}
98-
{% if footer %}
182+
</div>
183+
{% block mail_footer %}
184+
{% if footer %}
185+
<div class="footer">
99186
{{ footer | safe }}
100-
{% endif %}
187+
</div>
188+
{% endif %}
101189
{% endblock mail_footer %}
102-
</div>
190+
{% endblock body %}
103191
</div>
104-
{% endblock body %}
105192
</body>
106193
</html>

0 commit comments

Comments
 (0)