Skip to content

Commit 6b4797d

Browse files
payamnjpayamnj
authored
Merge pull request #243 from AvaCodeSolutions/style/165/templates-refactor
style: #164 improve templates and styles
2 parents cb174f6 + 58ebe94 commit 6b4797d

19 files changed

Lines changed: 296 additions & 95 deletions

File tree

‎django_email_learning/personalised/views.py‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,9 @@ def error_response(
4545
"ref": error_ref,
4646
"errorMessage": message,
4747
"direction": "rtl" if lang_info["bidi"] else "ltr",
48+
"localeMessages": {
49+
"error": _("Error"),
50+
},
4851
},
4952
"page_title": title,
5053
},
@@ -149,6 +152,7 @@ def get(self, request, *args, **kwargs) -> HttpResponse: # type: ignore[no-unty
149152
),
150153
"cancel": _("Cancel"),
151154
"submit": _("Submit"),
155+
"close_window_message": _("You can now close this window!"),
152156
},
153157
}
154158
| self.get_app_context(),

‎django_email_learning/services/command_models/verify_enrollment_command.py‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
from django.core.mail import EmailMultiAlternatives
1515
from django.template.loader import render_to_string
1616
from django.utils.translation import gettext as _
17+
from django.conf import settings
1718
from typing import Literal
1819

1920

@@ -61,6 +62,15 @@ def execute(self) -> None:
6162
# Send confirmation email
6263
email_service = EmailSenderService()
6364
subject = _("Enrollment Verified")
65+
course_image_url = None
66+
if enrollment.course.image:
67+
image_url = enrollment.course.image.url
68+
if image_url.startswith(("http://", "https://")):
69+
course_image_url = image_url
70+
else:
71+
site_base_url = settings.DJANGO_EMAIL_LEARNING["SITE_BASE_URL"]
72+
course_image_url = f"{site_base_url}".rstrip("/") + image_url
73+
6474
body = render_to_string(
6575
"emails/enrollment_verified.txt",
6676
{
@@ -80,6 +90,7 @@ def execute(self) -> None:
8090
{
8191
"course_title": enrollment.course.title,
8292
"organization_name": enrollment.course.organization.name,
93+
"course_image_url": course_image_url,
8394
},
8495
)
8596
email.attach_alternative(html_content, "text/html")

‎django_email_learning/templates/emails/base.html‎

Lines changed: 94 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{% load i18n %}
2-
{% with brand_color="#7c86ff" %}
2+
{% with brand_color="#636eec" %}
33
<html>
44
<head>
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -13,6 +13,7 @@
1313
}
1414
.bg-brand {
1515
background-color: {{ brand_color }};
16+
color: #fff !important;
1617
}
1718
.border-brand {
1819
border-color: {{ brand_color }};
@@ -21,6 +22,7 @@
2122
width: 100%;
2223
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
2324
line-height: 1.8;
25+
font-size: 15px;
2426
color: #333;
2527
background-color: #f9f9f9;
2628
}
@@ -73,6 +75,97 @@
7375
margin: 0px !important;
7476
padding: 0 16px;
7577
}
78+
.email-title {
79+
color: #2c3e50;
80+
margin: 0 0 20px;
81+
text-align: center;
82+
border-bottom: 2px solid {{ brand_color }};
83+
padding-bottom: 12px;
84+
line-height: 1.35;
85+
font-size: 24px;
86+
}
87+
.email-subtitle {
88+
margin: 20px 0 10px;
89+
color: #2c3e50;
90+
font-size: 18px;
91+
}
92+
.email-paragraph {
93+
font-size: 15px;
94+
margin: 0 0 16px;
95+
}
96+
.email-cover-wrap {
97+
margin: 0 0 20px;
98+
}
99+
.email-cover {
100+
width: 100%;
101+
max-width: 100%;
102+
height: auto;
103+
display: block;
104+
border-radius: 6px;
105+
}
106+
.email-cta-wrap {
107+
text-align: center;
108+
margin: 24px 0;
109+
}
110+
.email-cta {
111+
display: inline-block;
112+
color: #1f2340;
113+
padding: 12px 24px;
114+
text-decoration: none;
115+
border-radius: 5px;
116+
font-weight: 400;
117+
font-size: 15px;
118+
border: 1px solid rgba(31, 35, 64, 0.18);
119+
}
120+
.email-panel {
121+
background-color: #f8f9fa;
122+
padding: 20px;
123+
border-radius: 5px;
124+
margin: 24px 0;
125+
}
126+
.email-panel.border-brand {
127+
border-left: 4px solid;
128+
}
129+
.email-code-box {
130+
background-color: #ffffff;
131+
padding: 15px;
132+
border-radius: 4px;
133+
border: 1px dashed #6c757d;
134+
text-align: center;
135+
}
136+
.email-divider-note {
137+
margin-top: 30px;
138+
padding-top: 20px;
139+
border-top: 1px solid #e9ecef;
140+
font-size: 14px;
141+
color: #6c757d;
142+
}
143+
.email-muted-note {
144+
font-size: 14px;
145+
color: #7f8c8d;
146+
text-align: center;
147+
margin-top: 30px;
148+
}
149+
.email-signoff {
150+
margin-top: 24px;
151+
}
152+
.email-signoff.centered {
153+
text-align: center;
154+
}
155+
.email-org-name {
156+
font-weight: bold;
157+
color: #2c3e50;
158+
font-size: 18px;
159+
margin: 0;
160+
}
161+
.email-list {
162+
margin: 0 0 16px;
163+
padding-left: 20px;
164+
font-size: 15px;
165+
}
166+
.email-list li {
167+
margin-bottom: 6px;
168+
}
76169
{% block extra_styles %}{% endblock %}
77170
</style>
78171
</head>

‎django_email_learning/templates/emails/certificate_form.html‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,19 +3,19 @@
33

44
{% block content %}
55

6-
<p>{% translate "Dear Learner," %}</p>
6+
<p class="email-paragraph">{% translate "Hello there," %}</p>
77

8-
<p>{% blocktranslate with course_title=course_title %}Congratulations on completing the course "{{ course_title }}"!{% endblocktranslate %}</p>
8+
<p class="email-paragraph">{% blocktranslate with course_title=course_title %}Congratulations on completing the course "{{ course_title }}"!{% endblocktranslate %}</p>
99

10-
<p>{% translate "To finalize your official Certificate of Completion, we need to verify how you would like your name to appear. Please follow the link below to submit your preferred name:" %}</p>
10+
<p class="email-paragraph">{% translate "To finalize your official Certificate of Completion, we need to verify how you would like your name to appear. Please follow the link below to submit your preferred name:" %}</p>
1111

12-
<div style="text-align: center; margin: 20px 0;">
13-
<a href="{{ link }}" style="background-color: {{ brand_color }}; color: white; padding: 12px 24px; text-decoration: none; border-radius: 5px; display: inline-block; font-weight: bold;">
12+
<div class="email-cta-wrap">
13+
<a href="{{ link }}" class="email-cta bg-brand">
1414
{% translate "Submit Name" %}
1515
</a>
1616
</div>
17-
<p>
18-
{% translate "Best Regards," %}<br />
17+
<p class="email-paragraph">
18+
{% translate "Best regards," %}<br />
1919
{% blocktranslate with organization_name=organization_name %}{{ organization_name }} Team{% endblocktranslate %}
2020
</p>
2121

‎django_email_learning/templates/emails/enrollment_verified.html‎

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,22 +2,28 @@
22
{% load i18n %}
33

44
{% block content %}
5-
<P>{% translate "Hello there," %}<br /></P>
5+
{% if course_image_url %}
6+
<div class="email-cover-wrap">
7+
<img src="{{ course_image_url }}" alt="{{ course_title }}" class="email-cover" />
8+
</div>
9+
{% endif %}
610

7-
<p>{% blocktranslate %}Congratulations! Your enrollment for <strong style="color: {{ brand_color }}">{{ course_title }}</strong> has been successfully verified and confirmed.{% endblocktranslate %}</p>
11+
<p class="email-paragraph">{% translate "Hello there," %}</p>
812

9-
<p>{% translate "We're excited to have you join our learning community. Here's what you can expect:" %}</p>
13+
<p class="email-paragraph">{% blocktranslate %}Congratulations! Your enrollment for <strong class="color-brand">{{ course_title }}</strong> has been successfully verified and confirmed.{% endblocktranslate %}</p>
1014

11-
<ul>
15+
<p class="email-paragraph">{% translate "We're excited to have you join our learning community. Here's what you can expect:" %}</p>
16+
17+
<ul class="email-list">
1218
<li>{% translate "Course materials will be delivered directly to this email address" %}</li>
1319
<li>{% translate "You'll receive structured lessons and assignments on a regular schedule" %}</li>
1420
<li>{% translate "Interactive content and assessments will help track your progress" %}</li>
1521
</ul>
1622

17-
<p>{% translate "Your learning adventure begins soon! Keep an eye on your inbox for the first lesson and welcome materials." %}</p>
23+
<p class="email-paragraph">{% translate "Your learning adventure begins soon! Keep an eye on your inbox for the first lesson and welcome materials." %}</p>
1824

19-
<h3>{% translate "Welcome aboard!" %}</h3>
25+
<h3 class="email-subtitle">{% translate "Welcome aboard!" %}</h3>
2026

21-
<p>{% translate "Best regards," %}<br>
27+
<p class="email-paragraph">{% translate "Best regards," %}<br>
2228
{% blocktranslate %}The {{ organization_name }} Team{% endblocktranslate %}</p>
2329
{% endblock %}

‎django_email_learning/templates/emails/enrolment_verification.html‎

Lines changed: 12 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -2,47 +2,42 @@
22
{% load i18n %}
33

44
{% block content %}
5-
<h2 style="color: #2c3e50; margin-top: 0; text-align: center; border-bottom: 2px solid {{ brand_color }}; padding-bottom: 15px;">{% translate "Welcome!" %}</h2>
5+
<p class="email-paragraph">{% translate "Hello there," %}</p>
66

7-
<p style="font-size: 16px; margin-bottom: 20px;">{% translate "Hello there," %}</p>
8-
9-
<p style="font-size: 16px; margin-bottom: 25px;">
10-
{% blocktranslate %}Congratulations on enrolling in <strong class="color-brand">{{ course_title }}</strong>!{% endblocktranslate %}
7+
<p class="email-paragraph">
8+
{% blocktranslate %}Congratulations on enrolling in <strong>{{ course_title }}</strong>!{% endblocktranslate %}
119
{% translate "We're excited to have you join our learning community." %}
1210
</p>
1311

14-
<p style="font-size: 16px; margin-bottom: 25px;">
12+
<p class="email-paragraph">
1513
{% translate "To get started, please verify your email address by clicking the button below:" %}
1614
</p>
1715

18-
<div style="text-align: center; margin: 30px 0;">
19-
<a href="{{ verification_link }}" class="bg-brand"
20-
style="display: inline-block; color: white; padding: 15px 30px; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 16px; transition: background-color 0.3s;">
16+
<div class="email-cta-wrap">
17+
<a href="{{ verification_link }}" class="email-cta bg-brand">
2118
{% translate "Verify Your Email Address" %}
2219
</a>
2320
</div>
2421

2522
{% if support_imap_interface %}
26-
<div style="background-color: #f8f9fa; padding: 20px; border-radius: 5px; border-left: 4px solid {{ brand_color }}; margin: 25px 0;">
23+
<div class="email-panel border-brand">
2724
<h4 class="color-brand" style="margin-top: 0;">{% translate "Alternative Verification Method" %}</h4>
28-
<p style="margin-bottom: 15px;">
25+
<p class="email-paragraph" style="margin-bottom: 15px;">
2926
{% blocktranslate %}You can also verify your email by sending a message to <strong style="color: #495057;">{{ imap_email_address }}</strong>{% endblocktranslate %}
3027
{% translate "with your verification code in the subject line or email body." %}
3128
{% translate "Simply forward this email to complete the verification process." %}
3229
</p>
33-
<p style="background-color: #ffffff; padding: 15px; border-radius: 4px; border: 1px dashed #6c757d; text-align: center;">
30+
<p class="email-code-box">
3431
{% translate "Verification Code:" %}
3532
<span style="font-family: 'Courier New', monospace; font-size: 18px; font-weight: bold;">{{ verification_code }}</span>
3633
</p>
3734
</div>
3835
{% endif %}
3936

40-
<div style="margin-top: 30px; padding-top: 20px; border-top: 1px solid #e9ecef; font-size: 14px; color: #6c757d;">
37+
<div class="email-divider-note">
4138
<p>{% translate "If you didn't sign up for this course, you can safely ignore this email." %}</p>
4239
</div>
4340

44-
<div style="margin-top: 25px; text-align: center;">
45-
<p style="margin-bottom: 5px; font-size: 16px;">{% translate "Best regards," %}</p>
46-
<p style="font-weight: bold; color: #2c3e50; font-size: 18px;">{{ organization_name }}</p>
47-
</div>
41+
<p class="email-paragraph">{% translate "Best regards," %}<br>
42+
{% blocktranslate %}The {{ organization_name }} Team{% endblocktranslate %}</p>
4843
{% endblock %}

‎django_email_learning/templates/emails/lesson.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,11 @@
1010
{% endblock %}
1111

1212
{% block content %}
13-
<h2 style="color: #2c3e50; margin-top: 0; text-align: center; border-bottom: 2px solid {{ brand_color }}; padding-bottom: 15px;">{{ lesson.title }}</h2>
13+
<h2 class="email-title">{{ lesson.title }}</h2>
1414

1515
{{ lesson.content|safe }}
1616

17-
<p style="font-size: 0.9em; color: #7f8c8d; text-align: center; margin-top: 30px;">
18-
{% blocktranslate %}If you wish to unsubscribe from this course, please <a href="{{ unsubscribe_link }}" style="color: {{ brand_color }}; text-decoration: none;">click here</a>{% endblocktranslate %}.
17+
<p class="email-muted-note">
18+
{% blocktranslate %}If you wish to unsubscribe from this course, please <a href="{{ unsubscribe_link }}" class="color-brand" style="text-decoration: none;">click here</a>{% endblocktranslate %}.
1919
</p>
2020
{% endblock %}

‎django_email_learning/templates/emails/password_reset.html‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,19 @@
22
{% load i18n %}
33

44
{% block content %}
5-
<h2 style="color: #2c3e50; margin-top: 0; text-align: center; border-bottom: 2px solid {{ brand_color }}; padding-bottom: 15px;">{% blocktranslate %}Welcome to {{ organization }}{% endblocktranslate %}</h2>
6-
{% translate "Hi there," %} <br /><br />
5+
<h2 class="email-title">{% blocktranslate %}Welcome to {{ organization }}{% endblocktranslate %}</h2>
6+
<p class="email-paragraph">{% translate "Hello there," %}</p>
77

8-
{% blocktranslate %}
9-
You have been added as a user to the {{ organization }} platform.<br />
10-
To get started and set up your account, please click the link below to choose your password.<br />
11-
{% endblocktranslate %}
8+
<p class="email-paragraph">{% blocktranslate %}
9+
You have been added as a user to the {{ organization }} platform.
10+
To get started and set up your account, please click the link below to choose your password.
11+
{% endblocktranslate %}</p>
1212

1313
{% block reset_link %}
1414
{{ protocol }}://{{ domain }}{% url 'password_reset_confirm' uidb64=uid token=token %}
15-
{% endblock %}<br /><br />
15+
{% endblock %}
1616

17-
{% translate "If you weren't expecting this invitation, you can safely ignore this email." %} <br /><br />
18-
{% translate "Best regards," %} <br/>
19-
{% blocktranslate %}The {{ organization }} team{% endblocktranslate %}
17+
<p class="email-paragraph">{% translate "If you weren't expecting this invitation, you can safely ignore this email." %}</p>
18+
<p class="email-paragraph">{% translate "Best regards," %}<br/>
19+
{% blocktranslate %}The {{ organization }} Team{% endblocktranslate %}</p>
2020
{% endblock %}

‎django_email_learning/templates/emails/quiz.html‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,22 +2,22 @@
22
{% load i18n %}
33

44
{% block content %}
5-
<h2>{{ quiz.title }}</h2>
5+
<h2 class="email-title">{{ quiz.title }}</h2>
66

7-
<p>{% translate "Dear Learner," %}</p>
7+
<p class="email-paragraph">{% translate "Hello there," %}</p>
88

9-
<p>{% blocktranslate with deadline_days=quiz.deadline_days %}Your quiz is now available for completion. You have <strong>{{ deadline_days }} days</strong> from today to submit your responses.{% endblocktranslate %}</p>
9+
<p class="email-paragraph">{% blocktranslate with deadline_days=quiz.deadline_days %}Your quiz is now available for completion. You have <strong>{{ deadline_days }} days</strong> from today to submit your responses.{% endblocktranslate %}</p>
1010

11-
<p>{% blocktranslate with score=quiz.required_score %}To successfully pass this quiz, you must achieve a minimum score of <strong>{{ score }}</strong>.{% endblocktranslate %}</p>
12-
<p>{% translate "Please click the link below to access and submit your quiz:" %}</p>
11+
<p class="email-paragraph">{% blocktranslate with score=quiz.required_score %}To successfully pass this quiz, you must achieve a minimum score of <strong>{{ score }}</strong>.{% endblocktranslate %}</p>
12+
<p class="email-paragraph">{% translate "Please click the link below to access and submit your quiz:" %}</p>
1313

14-
<div style="text-align: center; margin: 20px 0;">
15-
<a href="{{ link }}" style="background-color: {{ brand_color }}; color: white; padding: 12px 24px; text-decoration: none; border-radius: 5px; display: inline-block; font-weight: bold;">
14+
<div class="email-cta-wrap">
15+
<a href="{{ link }}" class="email-cta bg-brand">
1616
{% translate "Start Quiz" %}
1717
</a>
1818
</div>
19-
<p>{% translate "Best of luck!" %}</p>
20-
<p style="font-size: 0.9em; color: #7f8c8d; text-align: center; margin-top: 30px;">
21-
{% blocktranslate %}If you wish to unsubscribe from this course, please <a href="{{ unsubscribe_link }}" style="color: {{ brand_color }}; text-decoration: none;">click here</a>{% endblocktranslate %}.
19+
<p class="email-paragraph">{% translate "Best of luck!" %}</p>
20+
<p class="email-muted-note">
21+
{% blocktranslate %}If you wish to unsubscribe from this course, please <a href="{{ unsubscribe_link }}" class="color-brand" style="text-decoration: none;">click here</a>{% endblocktranslate %}.
2222
</p>
2323
{% endblock %}

‎django_email_learning/views.py‎

Lines changed: 0 additions & 5 deletions
This file was deleted.

0 commit comments

Comments
 (0)