Skip to content

POC to use Tailwind CSS #1137

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

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

POC to use Tailwind CSS #1137

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
23 changes: 17 additions & 6 deletions apps/accounts/forms.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,9 @@

from allauth.account.forms import LoginForm
from allauth.utils import get_request_param
from crispy_bootstrap5.bootstrap5 import FloatingField
from crispy_forms.bootstrap import FormActions
from crispy_forms.helper import FormHelper
from crispy_forms.layout import Field, Layout, Submit
from crispy_forms.layout import Field, Layout, Submit, Div


class SignInForm(LoginForm):
Expand All @@ -15,11 +14,23 @@ def __init__(self, *args, **kwargs):
redirect_field_value = get_request_param(self.request, REDIRECT_FIELD_NAME)
if redirect_field_value:
self.fields[REDIRECT_FIELD_NAME] = forms.Field(initial=redirect_field_value)

# Add Tailwind classes to form fields
self.fields['login'].widget.attrs.update({
'class': 'appearance-none rounded-md relative block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-white bg-white dark:bg-gray-800 focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm',
'placeholder': 'Email address'
})
self.fields['password'].widget.attrs.update({
'class': 'appearance-none rounded-md relative block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-white bg-white dark:bg-gray-800 focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm',
'placeholder': 'Password'
})

self.helper = FormHelper()
self.helper.form_show_labels = False
self.helper.layout = Layout(
FloatingField("login"),
FloatingField("password"),
Field("remember"),
Field("login"),
Field("password"),
Field("remember", css_class="rounded border-gray-300 text-blue-600 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50"),
Field(REDIRECT_FIELD_NAME, type="hidden"),
FormActions(Submit(name="sign-in", value="Sign In", css_class="btn btn-primary w-100 py-2")),
FormActions(Submit(name="sign-in", value="Sign In", css_class="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500")),
)
38 changes: 16 additions & 22 deletions apps/base/templates/account/base_entrance.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,28 +12,22 @@
{% endblock content_class %}

{% block content %}
<h1>{% trans "Account Settings" %}</h1>
<ul class="nav nav-tabs mb-4">
<li class="nav-item">
<a class="nav-link {% block account_nav_name %}{% endblock account_nav_name %}
" aria-current="page" href="{% url 'account_change_name' %}">Name</a>
</li>
<li class="nav-item">
<a class="nav-link {% block account_nav_email %}{% endblock account_nav_email %}
" href="{% url 'account_email' %}">{% trans "E-mail Addresses" %}</a>
</li>
<li class="nav-item">
<a class="nav-link {% block account_nav_change_password %}{% endblock account_nav_change_password %}
" href="{% url 'account_change_password' %}">{% trans "Change Password" %}</a>
</li>
{% url 'socialaccount_connections' as connections_url %}
{% if connections_url %}
<li class="nav-item">
<a class="nav-link {% block account_nav_socialaccount_connections %}{% endblock account_nav_socialaccount_connections %}
" href="{{ connections_url }}">{% trans "Connected Accounts" %}</a>
</li>
{% endif %}
</ul>
<div class="mb-8">
<h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-6">{% trans "Account Settings" %}</h1>
<nav class="flex space-x-8 border-b border-gray-200 dark:border-gray-700 mb-6">
<a class="py-2 px-1 border-b-2 font-medium text-sm {% block account_nav_name %}border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300{% endblock account_nav_name %}"
href="{% url 'account_change_name' %}">Name</a>
<a class="py-2 px-1 border-b-2 font-medium text-sm {% block account_nav_email %}border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300{% endblock account_nav_email %}"
href="{% url 'account_email' %}">{% trans "E-mail Addresses" %}</a>
<a class="py-2 px-1 border-b-2 font-medium text-sm {% block account_nav_change_password %}border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300{% endblock account_nav_change_password %}"
href="{% url 'account_change_password' %}">{% trans "Change Password" %}</a>
{% url 'socialaccount_connections' as connections_url %}
{% if connections_url %}
<a class="py-2 px-1 border-b-2 font-medium text-sm {% block account_nav_socialaccount_connections %}border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300{% endblock account_nav_socialaccount_connections %}"
href="{{ connections_url }}">{% trans "Connected Accounts" %}</a>
{% endif %}
</nav>
</div>
{% block account_content %}
{% endblock account_content %}
{% endblock content %}
92 changes: 45 additions & 47 deletions apps/base/templates/account/login.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,25 +10,6 @@

{% block style %}
{{ block.super }}
<style>
#login-form main {
max-width: 400px;
}

#id_login {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}

#id_password {
border-top-right-radius: 0;
border-top-left-radius: 0;
}

#div_id_login {
margin-bottom: -1px !important;
}
</style>
{% endblock style %}

{% block base_header %}
Expand All @@ -38,36 +19,53 @@
{% block body_id %}login-form{% endblock body_id %}
{# djlint:on #}
{% block content_class %}
w-100 m-auto
flex items-center justify-center min-h-screen py-12 px-4 sm:px-6 lg:px-8
{% endblock content_class %}

{% block content %}
<h2>{% trans "Sign In" %}</h2>
{% if socialaccount.providers %}
<p>
{% blocktrans with site.name as site_name %}Please sign in with one
of your existing third party accounts. Or, <a href="{{ signup_url }}">sign up</a>
for a {{site_name}} account and sign in
below:{% endblocktrans %}
</p>
<div class="socialaccount_ballot">
<ul class="socialaccount_providers">
{% include "socialaccount/snippets/provider_list.html" with process="login" %}
</ul>
<div class="login-or">{% trans "or" %}</div>
<div class="max-w-md w-full space-y-8">
<div>
<h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900 dark:text-white">{% trans "Sign In" %}</h2>
{% if socialaccount.providers %}
<p class="mt-2 text-center text-sm text-gray-600 dark:text-gray-400">
{% blocktrans with site.name as site_name %}Please sign in with one
of your existing third party accounts. Or, <a href="{{ signup_url }}" class="font-medium text-blue-600 hover:text-blue-500">sign up</a>
for a {{site_name}} account and sign in
below:{% endblocktrans %}
</p>
<div class="mt-6">
<div class="socialaccount_providers">
{% include "socialaccount/snippets/provider_list.html" with process="login" %}
</div>
<div class="mt-6">
<div class="relative">
<div class="absolute inset-0 flex items-center">
<div class="w-full border-t border-gray-300 dark:border-gray-600"></div>
</div>
<div class="relative flex justify-center text-sm">
<span class="px-2 bg-white dark:bg-gray-900 text-gray-500">{% trans "or" %}</span>
</div>
</div>
</div>
</div>
{% include "socialaccount/snippets/login_extra.html" %}
{% endif %}
</div>
{% include "socialaccount/snippets/login_extra.html" %}
{% endif %}
<form class="login" method="post" action="{% url 'account_login' %}">
{% csrf_token %}
{% crispy form %}
{% if redirect_field_value %}
<input type="hidden"
name="{{ redirect_field_name }}"
value="{{ redirect_field_value }}" />
{% endif %}
<p class="mt-3">
{% blocktrans %}Don't have an account? <a href="{{ signup_url }}">Sign up</a>{% endblocktrans %}
</p>
</form>
<form class="mt-8 space-y-6" method="post" action="{% url 'account_login' %}">
{% csrf_token %}
<div class="space-y-4">
{% crispy form %}
</div>
{% if redirect_field_value %}
<input type="hidden"
name="{{ redirect_field_name }}"
value="{{ redirect_field_value }}" />
{% endif %}
<div class="text-center">
<p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
{% blocktrans %}Don't have an account? <a href="{{ signup_url }}" class="font-medium text-blue-600 hover:text-blue-500">Sign up</a>{% endblocktrans %}
</p>
</div>
</form>
</div>
{% endblock content %}
6 changes: 3 additions & 3 deletions apps/base/templates/account/name_change.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,12 @@

{# djlint:off #}
{% block head_title %}Name{% endblock head_title %}
{% block account_nav_name %}active{% endblock account_nav_name %}
{% block account_nav_name %}border-blue-500 text-blue-600 dark:border-blue-400 dark:text-blue-400{% endblock account_nav_name %}
{# djlint:on #}
{% block account_content %}
<form action="." method="post">
<form action="." method="post" class="space-y-6">
{% csrf_token %}
{{ form|crispy }}
<button class="btn btn-primary">Save</button>
<button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-md transition-colors">Save</button>
</form>
{% endblock account_content %}
85 changes: 49 additions & 36 deletions apps/base/templates/blocks/color_mode_picker.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{# djlint:off H021 #}
<li class="nav-item dropdown">
<div class="relative">
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="circle-half" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z" />
Expand All @@ -12,59 +12,72 @@
<path d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z" />
</symbol>
</svg>
<button class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle d-flex align-items-center"
<button onclick="toggleThemeDropdown()"
class="p-2 text-gray-700 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white transition-colors flex items-center"
id="bd-theme"
type="button"
aria-expanded="false"
data-bs-toggle="dropdown"
data-bs-display="static">
<svg class="bi my-1 theme-icon-active">
aria-expanded="false">
<svg class="w-4 h-4 theme-icon-active">
<use href="#circle-half"></use>
</svg>
<span class="d-lg-none ms-2">Toggle theme</span>
<span class="lg:hidden ml-2">Toggle theme</span>
</button>
<ul class="dropdown-menu dropdown-menu-end"
aria-labelledby="bd-theme"
style="--bs-dropdown-min-width: 8rem">
<li>
<div id="theme-dropdown"
class="hidden absolute right-0 mt-2 w-32 rounded-md shadow-lg bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5 z-50">
<div class="py-1">
<button type="button"
class="dropdown-item d-flex align-items-center"
data-bs-theme-value="light">
<svg class="bi me-2 opacity-50 theme-icon">
class="w-full text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center"
data-theme-value="light"
onclick="setThemeAndClose('light')">
<svg class="w-4 h-4 mr-2 opacity-50 theme-icon">
<use href="#sun-fill"></use>
</svg>
Light
<svg class="bi ms-auto d-none">
<use href="#check2"></use>
</svg>
</button>
</li>
<li>
<button type="button"
class="dropdown-item d-flex align-items-center"
data-bs-theme-value="dark">
<svg class="bi me-2 opacity-50 theme-icon">
class="w-full text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center"
data-theme-value="dark"
onclick="setThemeAndClose('dark')">
<svg class="w-4 h-4 mr-2 opacity-50 theme-icon">
<use href="#moon-stars-fill"></use>
</svg>
Dark
<svg class="bi ms-auto d-none">
<use href="#check2"></use>
</svg>
</button>
</li>
<li>
<button type="button"
class="dropdown-item d-flex align-items-center active"
data-bs-theme-value="auto">
<svg class="bi me-2 opacity-50 theme-icon">
class="w-full text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center"
data-theme-value="auto"
onclick="setThemeAndClose('auto')">
<svg class="w-4 h-4 mr-2 opacity-50 theme-icon">
<use href="#circle-half"></use>
</svg>
Auto
<svg class="bi ms-auto d-none">
<use href="#check2"></use>
</svg>
</button>
</li>
</ul>
</li>
</div>
</div>
</div>

<script>
function toggleThemeDropdown() {
const dropdown = document.getElementById('theme-dropdown');
dropdown.classList.toggle('hidden');
}

function setThemeAndClose(theme) {
if (window.setTheme) {
window.setTheme(theme);
}
const dropdown = document.getElementById('theme-dropdown');
dropdown.classList.add('hidden');
}

// Close theme dropdown when clicking outside
document.addEventListener('click', function(event) {
const dropdown = document.getElementById('theme-dropdown');
const button = event.target.closest('button[onclick="toggleThemeDropdown()"]');

if (!button && dropdown && !dropdown.contains(event.target)) {
dropdown.classList.add('hidden');
}
});
</script>
{# djlint:on #}
Loading
Loading