Skip to content
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.

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

Refactor message display layout and add helper templates for message types #129

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
2 changes: 2 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@ __pycache__/
# C extensions
*.so

venv/

# Distribution / packaging
.Python
build/
Expand Down
120 changes: 59 additions & 61 deletions allauth_ui/templates/allauth/layouts/base.html
Original file line number Diff line number Diff line change
Expand Up @@ -4,64 +4,62 @@
{% load allauth_ui %}
<!DOCTYPE html>
<html data-theme="{% allauth_ui_theme %}">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
{% block head_title %}
{% endblock head_title %}
</title>
{% block extra_head %}
<link rel="stylesheet" href="{% static 'allauth_ui/output.css' %}">
{% endblock extra_head %}
</head>
<body class="min-h-screen bg-base-300">
{% block body %}
{% if messages %}
{% for message in messages %}
<div role="alert"
class="text-sm md:text-base alert alert-{{ message.tags }}">
<span><strong>{{ message }}</strong></span>
</div>
{% endfor %}
{% endif %}
{% block content %}
{% endblock content %}
<div class="mx-auto [&_a]:link text-sm flex flex-col md:flex-row items-center justify-center gap-3 mt-3">
{% if user.is_authenticated %}
{% url 'account_email' as email_url %}
{% if email_url %}
<a href="{{ email_url }}">{% trans "Change Email" %}</a>
{% endif %}
{% url 'account_change_password' as change_password_url %}
{% if change_password_url %}
<a href="{{ change_password_url }}">{% trans "Change Password" %}</a>
{% endif %}
{% url 'mfa_index' as mfa_url %}
{% if mfa_url %}
<a href="{{ mfa_url }}">{% trans "Two-Factor Authentication" %}</a>
{% endif %}
{% url 'usersessions_list' as usersessions_list_url %}
{% if usersessions_list_url %}
<a href="{{ usersessions_list_url }}">{% trans "Sessions" %}</a>
{% endif %}
{% url 'account_logout' as logout_url %}
{% if logout_url %}
<a href="{{ logout_url }}">{% trans "Sign Out" %}</a>
{% endif %}
{% else %}
{% url 'account_login' as login_url %}
{% if login_url %}
<a href="{{ login_url }}">{% trans "Sign In" %}</a>
{% endif %}
{% url 'account_signup' as signup_url %}
{% if signup_url %}
<a href="{{ signup_url }}">{% trans "Sign Up" %}</a>
{% endif %}
{% endif %}
</div>
{% endblock body %}
{% block extra_body %}
{% endblock extra_body %}
</body>
</html>

<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
{% block head_title %}
{% endblock head_title %}
</title>
{% block extra_head %}
<link rel="stylesheet" href="{% static 'allauth_ui/output.css' %}">
{% endblock extra_head %}
</head>

<body class="min-h-screen bg-base-300">
{% block body %}

{% include 'helpers/messages.html' %}

{% block content %}
{% endblock content %}
<div class="mx-auto [&_a]:link text-sm flex flex-col md:flex-row items-center justify-center gap-3 mt-3">
{% if user.is_authenticated %}
{% url 'account_email' as email_url %}
{% if email_url %}
<a href="{{ email_url }}">{% trans "Change Email" %}</a>
{% endif %}
{% url 'account_change_password' as change_password_url %}
{% if change_password_url %}
<a href="{{ change_password_url }}">{% trans "Change Password" %}</a>
{% endif %}
{% url 'mfa_index' as mfa_url %}
{% if mfa_url %}
<a href="{{ mfa_url }}">{% trans "Two-Factor Authentication" %}</a>
{% endif %}
{% url 'usersessions_list' as usersessions_list_url %}
{% if usersessions_list_url %}
<a href="{{ usersessions_list_url }}">{% trans "Sessions" %}</a>
{% endif %}
{% url 'account_logout' as logout_url %}
{% if logout_url %}
<a href="{{ logout_url }}">{% trans "Sign Out" %}</a>
{% endif %}
{% else %}
{% url 'account_login' as login_url %}
{% if login_url %}
<a href="{{ login_url }}">{% trans "Sign In" %}</a>
{% endif %}
{% url 'account_signup' as signup_url %}
{% if signup_url %}
<a href="{{ signup_url }}">{% trans "Sign Up" %}</a>
{% endif %}
{% endif %}
</div>
{% endblock body %}
{% block extra_body %}
{% endblock extra_body %}
</body>

</html>
17 changes: 17 additions & 0 deletions allauth_ui/templates/helpers/messages.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
{% if messages %}
<ul class="max-w-screen-lg mx-auto flex flex-col gap-4 mb-5 pt-5">
{% for message in messages %}
<li class="*:!mb-0">
{% if message.tags == 'info' %}
{% include "helpers/messages/info.html" with message=message %}
{% elif message.tags == 'success' %}
{% include "helpers/messages/success.html" with message=message %}
{% elif message.tags == 'warning' %}
{% include "helpers/messages/warning.html" with message=message %}
{% elif message.tags == 'error' %}
{% include "helpers/messages/error.html" with message=message %}
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
3 changes: 3 additions & 0 deletions allauth_ui/templates/helpers/messages/error.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
<p class="mb-3 px-3 py-3 rounded-md text-sm last:mb-8 bg-red-100 text-red-700 dark:bg-red-500/20 dark:text-red-400">
{{ message }}
</p>
3 changes: 3 additions & 0 deletions allauth_ui/templates/helpers/messages/info.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
<p class="mb-3 px-3 py-3 rounded-md text-sm last:mb-8 bg-blue-100 text-blue-700 dark:bg-blue-500/20 dark:text-blue-400">
{{ message }}
</p>
3 changes: 3 additions & 0 deletions allauth_ui/templates/helpers/messages/success.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
<p class="mb-3 px-3 py-3 rounded-md text-sm last:mb-8 bg-green-100 text-green-700 dark:bg-green-500/20 dark:text-green-400">
{{ message }}
</p>
3 changes: 3 additions & 0 deletions allauth_ui/templates/helpers/messages/warning.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
<p class="mb-3 px-3 py-3 rounded-md text-sm last:mb-8 bg-orange-100 text-orange-700 dark:bg-orange-500/20 dark:text-orange-400">
{{ message }}
</p>