Skip to content

Commit 8add319

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

File tree

5 files changed

+139
-43
lines changed

5 files changed

+139
-43
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 & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,87 +1,173 @@
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%;
35+
}
36+
37+
.box {
38+
width: 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;
45+
line-height: 27px;
46+
}
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;
1854
display: flex;
1955
justify-content: center;
2056
align-items: center;
2157
}
22-
.box{
23-
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;
30-
line-height: 27px;
58+
59+
.icon-email {
60+
height: 1.5em;
61+
width: 1.5em;
3162
}
32-
.logo-container{
63+
64+
.sysname-container {
65+
width: fit-content;
66+
margin: 1em auto 0 auto;
67+
background-color: #F2F4F7;
68+
padding: 0 0.5em;
69+
border: solid #D0D5DD 1px;
70+
border-radius: 1em;
71+
color: #777;
72+
font-size: 12px;
73+
line-height: 18px;
74+
}
75+
76+
.logo-container {
3377
text-align: center;
34-
margin-bottom: 20px;
78+
margin-top: 1em;
3579
}
80+
3681
.logo {
37-
max-width: 210px;
82+
max-width: 104px;
3883
}
39-
.call-to-action{
84+
85+
.call-to-action {
4086
text-align: center;
4187
margin-top: 30px;
4288
}
43-
.subject{
44-
font-size: medium;
45-
font-weight: 700;
46-
margin: 20px 0;
89+
90+
.email-title {
91+
font-weight: 600;
92+
font-size: 18px;
93+
width: fit-content;
94+
margin: 0.1em auto;
95+
color: #101828;
4796
}
48-
.msg{
97+
98+
.subtitle {
99+
font-weight: 400;
100+
font-size: 14px;
101+
width: fit-content;
102+
margin: 0em auto 1em auto;
103+
color: #475467;
104+
}
105+
106+
.msg {
49107
color: #1b1818;
50108
margin: 20px 0;
51109
font-size: medium;
52110
}
53-
.btn{
111+
112+
.btn {
54113
appearance: button;
55114
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;
115+
border: solid #D0D5DD 1px;
116+
border-radius: 0.5em;
117+
font-weight: 600;
118+
font-size: 1em;
119+
line-height: 1.5em;
120+
padding: 0.6em 1em;
121+
color: #344054;
122+
box-sizing: border-box;
123+
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);
63124
}
64-
.btn:hover, .btn:focus {
65-
background: #000;
66-
outline: 0 none;
67-
background: rgba(51, 51, 51, 0.7);
125+
126+
.btn:hover,
127+
.btn:focus {
128+
border-color: #000;
129+
color: #000;
68130
}
131+
69132
a:link:hover {
70133
text-decoration: none;
71134
}
135+
136+
.footer {
137+
height: 40px;
138+
text-align: center;
139+
}
140+
141+
.footer p {
142+
font-size: 12px;
143+
margin: 0 auto;
144+
line-height: 20px;
145+
}
72146
</style>
73147
{% endblock styles %}
74148
</head>
75149
<body>
76150
{% block body %}
77151
<div class="container">
152+
{% block logo %}
153+
<div class="logo-container">
154+
<img src="{{ logo_url }}" alt="Logo" class="logo">
155+
</div>
156+
{% endblock logo %}
157+
{% block email_info %}
158+
<div class="email-info">This email is sent to <u>{{ recipient_email }}</u> from [{{ site_name }}]</div>
159+
{% endblock email_info %}
78160
<div class="box">
79161
{% block mail_header %}
80-
<div class="logo-container">
81-
<img src="{{ logo_url }}" alt="Logo" class="logo">
162+
<div class="icon-container">
163+
<img src="{{ site_url }}{% static "ui/openwisp/images/email.png" %}" alt="email icon">
82164
</div>
83-
{% if subject %}
84-
<div class="subject">{{ subject }}</div>
165+
<div class="sysname-container">{{ site_name }}</div>
166+
{% if title %}
167+
<div class="email-title">{{ title }}</div>
168+
{% endif %}
169+
{% if subtitle %}
170+
<div class="subtitle">{{ subtitle }}</div>
85171
{% endif %}
86172
{% endblock mail_header %}
87173
{% block mail_body %}
@@ -94,13 +180,15 @@
94180
</div>
95181
{% endif %}
96182
{% endblock call_to_action %}
97-
{% block mail_footer %}
98-
{% if footer %}
183+
</div>
184+
{% block mail_footer %}
185+
{% if footer %}
186+
<div class="footer">
99187
{{ footer | safe }}
100-
{% endif %}
188+
</div>
189+
{% endif %}
101190
{% endblock mail_footer %}
102-
</div>
191+
{% endblock body %}
103192
</div>
104-
{% endblock body %}
105193
</body>
106194
</html>

0 commit comments

Comments
 (0)