Skip to content
This repository has been archived by the owner on Apr 26, 2024. It is now read-only.

Improve aesthetics and reusability of HTML templates #13652

Merged
merged 18 commits into from
Oct 21, 2022
Merged

Improve aesthetics and reusability of HTML templates #13652

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
c5d00f4
Template header and footer to fragments
germain-gg Aug 22, 2022
6fce9e9
Move existing fragments to correct folder
germain-gg Aug 22, 2022
3eb56fd
Move static assets to their own folder
germain-gg Aug 22, 2022
d405c4f
Set title variable and pass it to the context
germain-gg Aug 26, 2022
441d69f
move sso footer to fragments folder
germain-gg Aug 26, 2022
8e27b0c
Add basic styling for templates
germain-gg Aug 26, 2022
08899ec
Add changelog entry
germain-gg Aug 27, 2022
1a0232f
escape title variable
germain-gg Aug 27, 2022
1b02a93
lint fix changelog entry
germain-gg Aug 27, 2022
600ff84
Merge remote-tracking branch 'origin/develop' into gsouquet/template-…
clokep Oct 19, 2022
5b40a4e
Switch to a base template.
clokep Oct 19, 2022
17caf24
Move notif fragments back out.
clokep Oct 19, 2022
7288400
Move other fragments back.
clokep Oct 19, 2022
6cecd5a
Move static files back.
clokep Oct 19, 2022
8687721
Remove further unintentional changes.
clokep Oct 19, 2022
fd2e629
Merge remote-tracking branch 'origin/develop' into gsouquet/template-…
clokep Oct 21, 2022
e09affb
Inline styles instead of linking to them.
clokep Oct 21, 2022
cbc3003
Clarify changelog.
clokep Oct 21, 2022
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
1 change: 1 addition & 0 deletions changelog.d/13652.feature
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
Improve aesthetics of HTML templates.
Copy link
Member

Choose a reason for hiding this comment

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

This seems to have pretty big backwards compatibility ramifications (if someone customized their templates). I think we at least need to leave some upgrade notes?

Copy link
Member

Choose a reason for hiding this comment

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

I believe that way I've done this now isn't backwards incompatible (if someone has custom templates they'll still continue working fine).

clokep marked this conversation as resolved.
Show resolved Hide resolved
18 changes: 6 additions & 12 deletions synapse/res/templates/account_previously_renewed.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,6 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your account is valid until {{ expiration_ts|format_ts("%d-%m-%Y") }}.</title>
</head>
<body>
Your account is valid until {{ expiration_ts|format_ts("%d-%m-%Y") }}.
</body>
</html>
{% set title = 'Your account is valid until ' + expiration_ts|format_ts("%d-%m-%Y") + '.' %}
{% include "fragments/header.html" with context %}

<p>Your account is valid until {{ expiration_ts|format_ts("%d-%m-%Y") }}.</p>

{% include "fragments/footer.html" without context %}
clokep marked this conversation as resolved.
Show resolved Hide resolved
18 changes: 6 additions & 12 deletions synapse/res/templates/account_renewed.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,6 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your account has been successfully renewed and is valid until {{ expiration_ts|format_ts("%d-%m-%Y") }}.</title>
</head>
<body>
Your account has been successfully renewed and is valid until {{ expiration_ts|format_ts("%d-%m-%Y") }}.
</body>
</html>
{% set title = 'Your account has been successfully renewed and is valid until ' + expiration_ts|format_ts("%d-%m-%Y") + '.' %}
{% include "fragments/header.html" with context %}

<p>Your account has been successfully renewed and is valid until {{ expiration_ts|format_ts("%d-%m-%Y") }}.</p>

{% include "fragments/footer.html" without context %}
22 changes: 8 additions & 14 deletions synapse/res/templates/add_threepid.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,8 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Request to add an email address to your Matrix account</title>
</head>
<body>
<p>A request to add an email address to your Matrix account has been received. If this was you, please click the link below to confirm adding this email:</p>
<a href="{{ link }}">{{ link }}</a>
<p>If this was not you, you can safely ignore this email. Thank you.</p>
</body>
</html>
{% set title = 'Request to add an email address to your Matrix account' %}
{% include "fragments/header.html" with context %}

<p>A request to add an email address to your Matrix account has been received. If this was you, please click the link below to confirm adding this email:</p>
<a href="{{ link }}">{{ link }}</a>
<p>If this was not you, you can safely ignore this email. Thank you.</p>

{% include "fragments/footer.html" without context %}
20 changes: 7 additions & 13 deletions synapse/res/templates/add_threepid_failure.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,7 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Request failed</title>
</head>
<body>
<p>The request failed for the following reason: {{ failure_reason }}.</p>
<p>No changes have been made to your account.</p>
</body>
</html>
{% set title = 'Request failed' %}
{% include "fragments/header.html" with context %}

<p>The request failed for the following reason: {{ failure_reason }}.</p>
<p>No changes have been made to your account.</p>

{% include "fragments/footer.html" without context %}
18 changes: 6 additions & 12 deletions synapse/res/templates/add_threepid_success.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,6 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your email has now been validated</title>
</head>
<body>
<p>Your email has now been validated, please return to your client. You may now close this window.</p>
</body>
</html>
{% set title = 'Your email has now been validated' %}
{% include "fragments/header.html" with context %}

<p>Your email has now been validated, please return to your client. You may now close this window.</p>

{% include "fragments/footer.html" without context %}
25 changes: 11 additions & 14 deletions synapse/res/templates/auth_success.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,18 @@
<html>
<head>
<title>Success!</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{% set title = 'Success!' %}
{% include "fragments/header.html" with context %}

<div>
<p>Thank you</p>
<p>You may now close this window and return to the application</p>
</div>

<link rel="stylesheet" href="/_matrix/static/client/register/style.css">
<script>
if (window.onAuthDone) {
window.onAuthDone();
} else if (window.opener && window.opener.postMessage) {
window.opener.postMessage("authDone", "*");
window.opener.postMessage("authDone", "*");
}
</script>
</head>
<body>
<div>
<p>Thank you</p>
<p>You may now close this window and return to the application</p>
</div>
</body>
</html>

{% include "fragments/footer.html" without context %}
2 changes: 2 additions & 0 deletions synapse/res/templates/fragments/footer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
</body>
</html>
21 changes: 21 additions & 0 deletions synapse/res/templates/fragments/header.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ title }}</title>
<link rel="stylesheet" href="./static/css/style.css">
</head>
<body>
<header class="mx_Header">
{% if app_name == "Riot" %}
<img src="http://riot.im/img/external/riot-logo-email.png" width="83" height="83" alt="[Riot]"/>
{% elif app_name == "Vector" %}
<img src="http://matrix.org/img/vector-logo-email.png" width="64" height="83" alt="[Vector]"/>
{% elif app_name == "Element" %}
<img src="https://static.element.io/images/email-logo.png" width="83" height="83" alt="[Element]"/>
{% else %}
<img src="http://matrix.org/img/matrix-120x51.png" width="120" height="51" alt="[matrix]"/>
{% endif %}
</header>
0 synapse/res/templates/notif.html → synapse/res/templates/fragments/notif.html
View file
Open in desktop
File renamed without changes.
0 synapse/res/templates/notif.txt → synapse/res/templates/fragments/notif.txt
View file
Open in desktop
File renamed without changes.
2 changes: 1 addition & 1 deletion synapse/res/templates/room.html → synapse/res/templates/fragments/room.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
</tr>
{%- else %}
{%- for notif in room.notifs %}
{%- include 'notif.html' with context %}
{%- include 'fragments/notif.html' with context %}
{%- endfor %}
{%- endif %}
</table>
2 changes: 1 addition & 1 deletion synapse/res/templates/room.txt → synapse/res/templates/fragments/room.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,6 @@
You've been invited, join at {{ room.link }}
{%- else %}
{%- for notif in room.notifs %}
{%- include 'notif.txt' with context %}
{%- include 'fragments/notif.txt' with context %}
{%- endfor %}
{%- endif %}
0 synapse/res/templates/sso_footer.html → ...e/res/templates/fragments/sso_footer.html
View file
Open in desktop
File renamed without changes.
0 ...se/res/templates/sso_partial_profile.html → ...plates/fragments/sso_partial_profile.html
View file
Open in desktop
File renamed without changes.
18 changes: 6 additions & 12 deletions synapse/res/templates/invalid_token.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,6 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Invalid renewal token.</title>
</head>
<body>
Invalid renewal token.
</body>
</html>
{% set title = 'Invalid renewal token.' %}
{% include "fragments/header.html" with context %}

<p>Invalid renewal token.</p>

{% include "fragments/footer.html" without context %}
90 changes: 43 additions & 47 deletions synapse/res/templates/notice_expiry.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,47 +1,43 @@
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
{% include 'mail.css' without context %}
{% include "mail-%s.css" % app_name ignore missing without context %}
{% include 'mail-expiry.css' without context %}
</style>
</head>
<body>
<table id="page">
<tr>
<td> </td>
<td id="inner">
<table class="header">
<tr>
<td>
<div class="salutation">Hi {{ display_name }},</div>
</td>
<td class="logo">
{% if app_name == "Riot" %}
<img src="http://riot.im/img/external/riot-logo-email.png" width="83" height="83" alt="[Riot]"/>
{% elif app_name == "Vector" %}
<img src="http://matrix.org/img/vector-logo-email.png" width="64" height="83" alt="[Vector]"/>
{% elif app_name == "Element" %}
<img src="https://static.element.io/images/email-logo.png" width="83" height="83" alt="[Element]"/>
{% else %}
<img src="http://matrix.org/img/matrix-120x51.png" width="120" height="51" alt="[matrix]"/>
{% endif %}
</td>
</tr>
<tr>
<td colspan="2">
<div class="noticetext">Your account will expire on {{ expiration_ts|format_ts("%d-%m-%Y") }}. This means that you will lose access to your account after this date.</div>
<div class="noticetext">To extend the validity of your account, please click on the link below (or copy and paste it into a new browser tab):</div>
<div class="noticetext"><a href="{{ url }}">{{ url }}</a></div>
</td>
</tr>
</table>
</td>
<td> </td>
</tr>
</table>
</body>
</html>
{% set title = 'Notice of expiry' %}
{% include "fragments/header.html" with context %}

<table id="page">
<tr>
<td> </td>
<td id="inner">
<table class="header">
<tr>
<td>
<div class="salutation">Hi {{ display_name }},</div>
</td>
<td class="logo">
{% if app_name == "Riot" %}
<img src="http://riot.im/img/external/riot-logo-email.png" width="83" height="83" alt="[Riot]"/>
{% elif app_name == "Vector" %}
<img src="http://matrix.org/img/vector-logo-email.png" width="64" height="83" alt="[Vector]"/>
{% elif app_name == "Element" %}
<img src="https://static.element.io/images/email-logo.png" width="83" height="83" alt="[Element]"/>
{% else %}
<img src="http://matrix.org/img/matrix-120x51.png" width="120" height="51" alt="[matrix]"/>
{% endif %}
</td>
</tr>
<tr>
<td colspan="2">
<div class="noticetext">Your account will expire on {{ expiration_ts|format_ts("%d-%m-%Y") }}. This means that you will lose access to your account after this date.</div>
<div class="noticetext">To extend the validity of your account, please click on the link below (or copy and paste it into a new browser tab):</div>
<div class="noticetext"><a href="{{ url }}">{{ url }}</a></div>
</td>
</tr>
</table>
</td>
<td> </td>
</tr>
</table>
<style type="text/css">
{% include 'static/css/mail.css' without context %}
{% include "static/css/mail-%s.css" % app_name ignore missing without context %}
{% include 'static/css/mail-expiry.css' without context %}
</style>

{% include "fragments/footer.html" without context %}
Loading