Skip to content

feat(emails+rsvp): card-based invitation/update/cancel/reply emails + /rsvp pages #57

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
mosa-riel wants to merge 6 commits into
base: main
Choose a base branch
from
Open

feat(emails+rsvp): card-based invitation/update/cancel/reply emails + /rsvp pages #57

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
5a14548
feat(emails+rsvp): redesigned card-based templates with header badge
mosa-riel May 28, 2026
ad48d1d
feat(rsvp): apply the email card layout to /rsvp pages
mosa-riel May 28, 2026
d2a9b85
fix(emails+rsvp): drop status_icon from /rsvp + multi-line layout doc
mosa-riel May 28, 2026
a724c6f
refactor(emails+rsvp): hardcode 'Calendars' footer, link cancel URL, …
mosa-riel May 28, 2026
3bc5430
style(rsvp): dedent stray },} in viewsets_rsvp render contexts
mosa-riel May 28, 2026
0930e13
🐛 (rsvp) fix leaking template comment + sync test button colors
mosa-riel May 29, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
66 changes: 66 additions & 0 deletions src/backend/core/templates/emails/_invitation_layout.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
{% comment %}
Shared layout for calendar invitation / update / cancel / reply emails.
Email-client-safe: table-based, inline styles, no external CSS.
Blocks:
header_color — background color of the header strip (default blue).
badge_color — text color of the uppercase header badge (default light blue tint).
body — the per-template body content (after the header, before the footer).
{% endcomment %}<!doctype html>
Comment on lines +1 to +8
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot May 29, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Move the template comment below the doctype.

Keeping <!doctype html> as the first token in the source avoids the current HTMLHint failure on this shared template.

Suggested fix 
-{% comment %}
-Shared layout for calendar invitation / update / cancel / reply emails.
-Email-client-safe: table-based, inline styles, no external CSS.
-Blocks:
-  header_color  — background color of the header strip (default blue).
-  badge_color   — text color of the uppercase header badge (default light blue tint).
-  body          — the per-template body content (after the header, before the footer).
-{% endcomment %}<!doctype html>
+<!doctype html>
+{% comment %}
+Shared layout for calendar invitation / update / cancel / reply emails.
+Email-client-safe: table-based, inline styles, no external CSS.
+Blocks:
+  header_color  — background color of the header strip (default blue).
+  badge_color   — text color of the uppercase header badge (default light blue tint).
+  body          — the per-template body content (after the header, before the footer).
+{% endcomment %}
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
{% comment %}
Shared layout for calendar invitation / update / cancel / reply emails.
Email-client-safe: table-based, inline styles, no external CSS.
Blocks:
header_color — background color of the header strip (default blue).
badge_color — text color of the uppercase header badge (default light blue tint).
body — the per-template body content (after the header, before the footer).
{% endcomment %}<!doctype html>
<!doctype html>
{% comment %}
Shared layout for calendar invitation / update / cancel / reply emails.
Email-client-safe: table-based, inline styles, no external CSS.
Blocks:
header_color — background color of the header strip (default blue).
badge_color — text color of the uppercase header badge (default light blue tint).
body — the per-template body content (after the header, before the footer).
{% endcomment %}
🧰 Tools
🪛 HTMLHint (1.9.2)

[error] 1-1: Doctype must be declared before any non-comment content.

(doctype-first)

🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/backend/core/templates/emails/_invitation_layout.html` around lines 1 -
8, The HTML doctype must be the very first token to satisfy HTMLHint; move the
Jinja comment block currently preceding "<!doctype html>" so that "<!doctype
html>" is the first line and then place the "{% comment %} ... {% endcomment %}"
block immediately after it; update the file
"src/backend/core/templates/emails/_invitation_layout.html" accordingly and
verify the template still defines the same blocks (header_color, badge_color,
body).

<html lang="{{ lang|default:'en' }}">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>{{ content.title }}</title>
</head>
<body style="margin:0; padding:0; background-color:#eef0f3;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation"
width="100%" style="border-collapse:collapse; background-color:#eef0f3;">
<tr><td align="center" style="padding:24px 12px;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation"
style="border-collapse:collapse; width:100%; max-width:560px;
border-radius:8px; border:1px solid #d4d7dd; overflow:hidden;">

{# ── header ── #}
<tr><td style="background-color:{% block header_color %}#435de6{% endblock %}; padding:28px 36px;">
{% if content.badge %}
<p style="font-family:Arial,Helvetica,sans-serif; font-size:11px; font-weight:700;
color:{% block badge_color %}#bdc6f6{% endblock %};
text-transform:uppercase; letter-spacing:0.12em; margin:0 0 6px;">
{{ content.badge }}
</p>
{% endif %}
<p style="font-family:Arial,Helvetica,sans-serif; font-size:26px; font-weight:700;
color:#ffffff; line-height:1.25; margin:0;">
{{ summary }}
</p>
</td></tr>

{# ── body (per-template) ── #}
<tr><td style="background-color:#f6f8f9; padding:28px 36px 32px;">
{% block body %}{% endblock %}
</td></tr>

{# ── divider ── #}
<tr><td style="background-color:#e7e9eb; height:1px; padding:0;
font-size:0; line-height:0;"></td></tr>

{# ── footer ── #}
<tr><td style="background-color:#f6f8f9; padding:28px 36px;">
{% if instructions %}
<p style="font-family:Arial,Helvetica,sans-serif; font-size:12px;
color:#626a80; line-height:1.6; margin:0 0 12px;">
{{ instructions }}
</p>
{% endif %}
<p style="font-family:Arial,Helvetica,sans-serif; font-size:12px;
color:#626a80; line-height:1.6; margin:0;">
{{ footer }}
</p>
</td></tr>

</table>
</td></tr>
</table>
</body>
</html>
225 changes: 73 additions & 152 deletions src/backend/core/templates/emails/calendar_invitation.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,158 +1,79 @@
<!DOCTYPE html>
<html lang="{{ lang }}">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ content.title }}</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
line-height: 1.6;
color: #333;
max-width: 600px;
margin: 0 auto;
padding: 20px;
background-color: #f5f5f5;
}
.container {
background-color: #ffffff;
border-radius: 8px;
padding: 30px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.header {
border-bottom: 2px solid #0066cc;
padding-bottom: 15px;
margin-bottom: 20px;
}
.header h1 {
color: #0066cc;
margin: 0;
font-size: 24px;
}
.event-title {
font-size: 20px;
font-weight: bold;
color: #333;
margin: 15px 0;
}
.event-details {
background-color: #f8f9fa;
border-left: 4px solid #0066cc;
padding: 15px;
margin: 20px 0;
}
.event-details table {
width: 100%;
border-collapse: collapse;
}
.event-details td {
padding: 8px 0;
vertical-align: top;
}
.event-details td:first-child {
font-weight: bold;
color: #666;
width: 120px;
}
.event-details td:last-child {
color: #333;
}
.description {
background-color: #fff;
border: 1px solid #eee;
padding: 15px;
margin: 20px 0;
border-radius: 4px;
}
.description h3 {
margin-top: 0;
color: #666;
}
.instructions {
background-color: #e7f3ff;
border-radius: 4px;
padding: 15px;
margin: 20px 0;
}
.instructions p {
margin: 0;
color: #0066cc;
}
.footer {
border-top: 1px solid #eee;
padding-top: 15px;
margin-top: 20px;
font-size: 12px;
color: #999;
text-align: center;
}
.icon {
vertical-align: middle;
margin-right: 8px;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>{{ content.heading }}</h1>
</div>
{% extends "emails/_invitation_layout.html" %}

<p>{{ content.body }}</p>
{# Header defaults (blue) inherited from the base layout. #}

<div class="event-title">{{ summary }}</div>
{% block body %}
{# date/time #}
<p style="font-family:Arial,Helvetica,sans-serif; font-size:18px; font-weight:700;
color:#1b1f2e; line-height:1.4; margin:0 0 4px;">
{{ start_date }}
</p>
<p style="font-family:Arial,Helvetica,sans-serif; font-size:14px; color:#626a80;
line-height:1.4; margin:0 0 20px;">
{{ time_str }}{% if start_date != end_date %} · {{ labels.until }} {{ end_date }}{% endif %}
</p>

<div class="event-details">
<table>
<tr>
<td>{{ labels.when }}</td>
<td>
{{ start_date }}<br>
<strong>{{ time_str }}</strong>
{% if start_date != end_date %}<br>{{ labels.until }} {{ end_date }}{% endif %}
</td>
</tr>
{% if event.location %}
<tr>
<td>{{ labels.location }}</td>
<td>{{ event.location }}</td>
</tr>
{% endif %}
{% if event.url %}
<tr>
<td>{{ labels.videoConference }}</td>
<td><a href="{{ event.url }}" style="color: #0066cc;">{{ event.url }}</a></td>
</tr>
{% endif %}
<tr>
<td>{{ labels.organizer }}</td>
<td>{{ organizer_display }}</td>
</tr>
</table>
</div>
{% if event.location %}
<p style="font-family:Arial,Helvetica,sans-serif; font-size:14px; color:#626a80;
line-height:1.5; margin:0 0 10px;">
<strong style="color:#1b1f2e;">{{ labels.location }}:</strong> {{ event.location }}
</p>
{% endif %}

{% if event.description %}
<div class="description">
<h3>{{ labels.description }}</h3>
<p>{{ event.description|linebreaks }}</p>
</div>
{% endif %}
{% if event.url %}
<p style="font-family:Arial,Helvetica,sans-serif; font-size:14px; color:#626a80;
line-height:1.5; margin:0 0 10px;">
<strong style="color:#1b1f2e;">{{ labels.videoConference }}:</strong>
<a href="{{ event.url }}" style="color:#435de6; text-decoration:none;">{{ event.url }}</a>
</p>
{% endif %}

{% if rsvp_accepted_url %}
<div style="text-align: center; margin: 20px 0;">
<a href="{{ rsvp_accepted_url }}" style="display: inline-block; padding: 10px 24px; margin: 0 6px; background-color: #16a34a; color: white; text-decoration: none; border-radius: 6px; font-weight: bold;">{{ actions.accept }}</a>
<a href="{{ rsvp_tentative_url }}" style="display: inline-block; padding: 10px 24px; margin: 0 6px; background-color: #d97706; color: white; text-decoration: none; border-radius: 6px; font-weight: bold;">{{ actions.maybe }}</a>
<a href="{{ rsvp_declined_url }}" style="display: inline-block; padding: 10px 24px; margin: 0 6px; background-color: #dc2626; color: white; text-decoration: none; border-radius: 6px; font-weight: bold;">{{ actions.decline }}</a>
</div>
{% endif %}
<div class="instructions">
<p>{{ instructions }}</p>
</div>
{# organizer / body sentence (content.body is i18n-rendered with {{organizer}}) #}
<p style="font-family:Arial,Helvetica,sans-serif; font-size:14px; color:#626a80;
line-height:1.6; margin:0 0 24px;">
{{ content.body }}
</p>

<div class="footer">
<p>{{ footer }}</p>
</div>
</div>
</body>
</html>
{% if event.description %}
<p style="font-family:Arial,Helvetica,sans-serif; font-size:14px; color:#626a80;
line-height:1.6; margin:0 0 24px;">
{{ event.description|linebreaksbr }}
</p>
{% endif %}

{# RSVP buttons — only present for REQUEST-method emails #}
{% if rsvp_accepted_url %}
<table border="0" cellpadding="0" cellspacing="0" role="presentation"
style="border-collapse:collapse; width:100%; table-layout:fixed;">
<tr>
<td style="padding:0 4px 0 0;">
<a href="{{ rsvp_accepted_url }}"
style="display:block; text-align:center; background-color:#435de6;
color:#ffffff; font-family:Arial,Helvetica,sans-serif;
font-size:14px; font-weight:700; padding:12px 8px;
border-radius:4px; text-decoration:none;">
{{ actions.accept }}
</a>
</td>
<td style="padding:0 4px;">
<a href="{{ rsvp_tentative_url }}"
style="display:block; text-align:center; background-color:#626a80;
color:#ffffff; font-family:Arial,Helvetica,sans-serif;
font-size:14px; font-weight:700; padding:12px 8px;
border-radius:4px; text-decoration:none;">
{{ actions.maybe }}
</a>
</td>
<td style="padding:0 0 0 4px;">
<a href="{{ rsvp_declined_url }}"
style="display:block; text-align:center; background-color:#d2212f;
color:#ffffff; font-family:Arial,Helvetica,sans-serif;
font-size:14px; font-weight:700; padding:12px 8px;
border-radius:4px; text-decoration:none;">
{{ actions.decline }}
</a>
</td>
</tr>
</table>
{% endif %}
{% endblock %}
Loading
Loading