mirror of https://github.com/watcha-fr/synapse
Improve aesthetics and reusability of HTML templates. (#13652)
Use a base template to create a cohesive feel across the HTML templates provided by Synapse. Adds basic styling to the base template for a more user-friendly look and feel.1.103.0-whithout-watcha
Germain
2 years ago
committed by
GitHub
parent
d24346f530
commit
1d45ad8b2a
@ -0,0 +1 @@ |
||||
Improve aesthetics of HTML templates. Note that these changes do not retroactively apply to templates which have been [customised](https://matrix-org.github.io/synapse/latest/templates.html#templates) by server admins. |
||||
@ -0,0 +1,29 @@ |
||||
<!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>{% block title %}{% endblock %}</title> |
||||
<style type="text/css"> |
||||
{%- include 'style.css' without context %} |
||||
</style> |
||||
{% block header %}{% endblock %} |
||||
</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> |
||||
|
||||
{% block body %}{% endblock %} |
||||
|
||||
</body> |
||||
</html> |
||||
@ -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> |
||||
{% extends "_base.html" %} |
||||
{% block title %}Your account is valid until {{ expiration_ts|format_ts("%d-%m-%Y") }}.{% endblock %} |
||||
|
||||
{% block body %} |
||||
<p>Your account is valid until {{ expiration_ts|format_ts("%d-%m-%Y") }}.</p> |
||||
{% endblock %} |
||||
|
||||
@ -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> |
||||
{% extends "_base.html" %} |
||||
{% block title %}Your account has been successfully renewed and is valid until {{ expiration_ts|format_ts("%d-%m-%Y") }}.{% endblock %} |
||||
|
||||
{% block body %} |
||||
<p>Your account has been successfully renewed and is valid until {{ expiration_ts|format_ts("%d-%m-%Y") }}.</p> |
||||
{% endblock %} |
||||
|
||||
@ -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> |
||||
{% extends "_base.html" %} |
||||
{% block title %}Request to add an email address to your Matrix account{% endblock %} |
||||
|
||||
{% block 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> |
||||
{% endblock %} |
||||
|
||||
@ -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> |
||||
{% extends "_base.html" %} |
||||
{% block title %}Request failed{% endblock %} |
||||
|
||||
{% block body %} |
||||
<p>The request failed for the following reason: {{ failure_reason }}.</p> |
||||
<p>No changes have been made to your account.</p> |
||||
</body> |
||||
</html> |
||||
{% endblock %} |
||||
|
||||
@ -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> |
||||
{% extends "_base.html" %} |
||||
{% block title %}Your email has now been validated{% endblock %} |
||||
|
||||
{% block body %} |
||||
<p>Your email has now been validated, please return to your client. You may now close this window.</p> |
||||
</body> |
||||
</html> |
||||
{% endblock %} |
||||
|
||||
@ -1,12 +1,5 @@ |
||||
<!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> |
||||
{% block title %}Invalid renewal token.{% endblock %} |
||||
|
||||
{% block body %} |
||||
<p>Invalid renewal token.</p> |
||||
{% endblock %} |
||||
|
||||
@ -1,14 +1,9 @@ |
||||
<html lang="en"> |
||||
<head> |
||||
<title>Password reset</title> |
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||
</head> |
||||
<body> |
||||
{% block title %}Password reset{% endblock %} |
||||
|
||||
{% block body %} |
||||
<p>A password reset request has been received for your Matrix account. If this was you, please click the link below to confirm resetting your password:</p> |
||||
|
||||
<a href="{{ link }}">{{ link }}</a> |
||||
|
||||
<p>If this was not you, <strong>do not</strong> click the link above and instead contact your server administrator. Thank you.</p> |
||||
</body> |
||||
</html> |
||||
{% endblock %} |
||||
|
||||
@ -1,12 +1,6 @@ |
||||
<html lang="en"> |
||||
<head> |
||||
<title>Password reset failure</title> |
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||
</head> |
||||
<body> |
||||
<p>The request failed for the following reason: {{ failure_reason }}.</p> |
||||
{% block title %}Password reset failure{% endblock %} |
||||
|
||||
{% block body %} |
||||
<p>The request failed for the following reason: {{ failure_reason }}.</p> |
||||
<p>Your password has not been reset.</p> |
||||
</body> |
||||
</html> |
||||
{% endblock %} |
||||
|
||||
@ -1,9 +1,5 @@ |
||||
<html lang="en"> |
||||
<head> |
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||
</head> |
||||
<body> |
||||
{% block title %}Password reset success{% endblock %} |
||||
|
||||
{% block body %} |
||||
<p>Your email has now been validated, please return to your client to reset your password. You may now close this window.</p> |
||||
</body> |
||||
</html> |
||||
{% endblock %} |
||||
|
||||
@ -1,9 +1,5 @@ |
||||
<html lang="en"> |
||||
<head> |
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||
</head> |
||||
<body> |
||||
{% block title %}Registration failure{% endblock %} |
||||
|
||||
{% block body %} |
||||
<p>Validation failed for the following reason: {{ failure_reason }}.</p> |
||||
</body> |
||||
</html> |
||||
{% endblock %} |
||||
|
||||
@ -1,10 +1,5 @@ |
||||
<html lang="en"> |
||||
<head> |
||||
<title>Your email has now been validated</title> |
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||
</head> |
||||
<body> |
||||
{% block title %}Your email has now been validated{% endblock %} |
||||
|
||||
{% block body %} |
||||
<p>Your email has now been validated, please return to your client. You may now close this window.</p> |
||||
</body> |
||||
</html> |
||||
{% endblock %} |
||||
|
||||
@ -0,0 +1,29 @@ |
||||
html { |
||||
height: 100%; |
||||
} |
||||
|
||||
body { |
||||
background: #f9fafb; |
||||
max-width: 680px; |
||||
margin: auto; |
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; |
||||
} |
||||
|
||||
.mx_Header { |
||||
border-bottom: 3px solid #ddd; |
||||
margin-bottom: 1rem; |
||||
padding-top: 1rem; |
||||
padding-bottom: 1rem; |
||||
text-align: center; |
||||
} |
||||
|
||||
@media screen and (max-width: 1120px) { |
||||
body { |
||||
font-size: 20px; |
||||
} |
||||
|
||||
h1 { font-size: 1rem; } |
||||
h2 { font-size: .9rem; } |
||||
h3 { font-size: .85rem; } |
||||
h4 { font-size: .8rem; } |
||||
} |
||||
Loading…
Reference in new issue