Skip to content

Migrate from Bootstrap to Tailwind CSS and enhance accessibility #102

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

Merged
merged 21 commits into from
Apr 7, 2025
Merged

Migrate from Bootstrap to Tailwind CSS and enhance accessibility #102

Show file tree
Hide file tree
Changes from 18 commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
b7759d6
Add Tailwind and django-browser-reload
brylie Apr 7, 2025
c7781f7
Add Copilot instructions for migrating to Tailwind CSS v4.x with dais…
brylie Apr 7, 2025
d1dbfd3
Refactor templates to remove Bootstrap and enhance layout with Tailwi…
brylie Apr 7, 2025
414f457
Refactor language selection form to improve usability and styling; re…
brylie Apr 7, 2025
005ee82
Adjust indentation and formatting
brylie Apr 7, 2025
41d1128
Refactor navigation template for improved structure and accessibility…
brylie Apr 7, 2025
5a2d7a0
Refactor navigation template for improved layout and accessibility; e…
brylie Apr 7, 2025
9bc6c32
Refactor charts, form, and report templates for improved structure an…
brylie Apr 7, 2025
f91232b
Refactor work form for improved usability and styling; replace crispy…
brylie Apr 7, 2025
382c190
Refactor work form and fields for improved structure and accessibilit…
brylie Apr 7, 2025
4126ec3
Refactor resident detail, form, and list templates for improved struc…
brylie Apr 7, 2025
7fa0ea3
Refactor chart background settings for improved visibility; set plot …
brylie Apr 7, 2025
b8d546b
Refactor home detail, charts, and user relation templates for improve…
brylie Apr 7, 2025
08eaa4f
Refactor add caregiver modal for improved usability and accessibility…
brylie Apr 7, 2025
c4fe8d2
Add authentication settings for login and logout redirects; set defau…
brylie Apr 7, 2025
8e2100a
Refactor login and signup forms for improved structure and accessibil…
brylie Apr 7, 2025
1883581
Refactor resident activity form and list for improved structure and u…
brylie Apr 7, 2025
d37b834
Remove crispy forms and crispy bootstrap5 dependencies from settings …
brylie Apr 7, 2025
75a8c53
Update copilot instructions to reflect the migration from Bootstrap 5…
brylie Apr 7, 2025
b9bd39c
Update authentication settings to redirect login and logout to the ho…
brylie Apr 7, 2025
c016e53
Remove cookiecutter dependency from dev dependencies in pyproject.tom…
brylie Apr 7, 2025
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
5 changes: 5 additions & 0 deletions .github/copilot-instructions.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
# Copilot Instructions

## Style

This project is migrating from Bootstrap 5 to Tailwind CSS v4.x. We have the Tailwind CSS component library daisyUI installed. Please use daisyUI components when possible.
5 changes: 5 additions & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -128,3 +128,8 @@ dmypy.json
.vscode

.DS_Store

# Tailwind compiled CSS
# We can commit this if it is necessary for deployment
# but it should be possible to generate it from the source in CI
theme/static/css/style.css
55 changes: 48 additions & 7 deletions accounts/templates/registration/login.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,57 @@
{% extends 'base.html' %}

{% load i18n %}
{% load crispy_forms_tags %}

{% block title %}Log in{% endblock title %}

{% block content %}
<h1>{% translate "Log in" %}</h1>
<div class="card bg-base-100 shadow-xl max-w-md mx-auto">
<div class="card-body">
<h1 class="card-title text-2xl mb-4">{% translate "Log in" %}</h1>

<form action="" method=post>
{% csrf_token %}
{{ form | crispy }}
<button class="btn btn-primary" type="submit">{% translate "Log in" %}</button>
</form>
<form action="" method="post" class="space-y-6">
{% csrf_token %}

<!-- Username field -->
<div class="form-control w-full">
<label class="label">
<span class="label-text">{{ form.username.label }}</span>
</label>
<input type="text" name="{{ form.username.name }}"
class="input input-bordered w-full {% if form.username.errors %}input-error{% endif %}"
value="{{ form.username.value|default:'' }}" />
{% if form.username.errors %}
<label class="label">
<span class="label-text-alt text-error">{{ form.username.errors }}</span>
</label>
{% endif %}
</div>

<!-- Password field -->
<div class="form-control w-full">
<label class="label">
<span class="label-text">{{ form.password.label }}</span>
</label>
<input type="password" name="{{ form.password.name }}"
class="input input-bordered w-full {% if form.password.errors %}input-error{% endif %}" />
{% if form.password.errors %}
<label class="label">
<span class="label-text-alt text-error">{{ form.password.errors }}</span>
</label>
{% endif %}
</div>

{% if form.non_field_errors %}
<div class="alert alert-error">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 shrink-0 stroke-current" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
<span>{{ form.non_field_errors }}</span>
</div>
{% endif %}

<div class="card-actions">
<button class="btn btn-primary" type="submit">{% translate "Log in" %}</button>
</div>
</form>
</div>
</div>
{% endblock content %}
99 changes: 92 additions & 7 deletions accounts/templates/registration/signup.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,101 @@
{% extends 'base.html' %}

{% load i18n %}
{% load crispy_forms_tags %}

{% block title %}{% translate "Sign up" %}{% endblock title %}

{% block content %}
<h1>{% translate "Sign up" %}</h1>
<div class="card bg-base-100 shadow-xl max-w-md mx-auto">
<div class="card-body">
<h1 class="card-title text-2xl mb-4">{% translate "Sign up" %}</h1>

<form action="" method=post>
{% csrf_token %}
{{ form | crispy }}
<button class="btn btn-primary" type="submit">{% translate "Sign up" %}</button>
</form>
<form action="" method="post" class="space-y-6">
{% csrf_token %}

<!-- Username field -->
<div class="form-control w-full">
<label class="label">
<span class="label-text">{{ form.username.label }}</span>
</label>
<input type="text" name="{{ form.username.name }}"
class="input input-bordered w-full {% if form.username.errors %}input-error{% endif %}"
value="{{ form.username.value|default:'' }}" />
{% if form.username.errors %}
<label class="label">
<span class="label-text-alt text-error">{{ form.username.errors }}</span>
</label>
{% endif %}
{% if form.username.help_text %}
<label class="label">
<span class="label-text-alt">{{ form.username.help_text }}</span>
</label>
{% endif %}
</div>

<!-- Email field -->
<div class="form-control w-full">
<label class="label">
<span class="label-text">{{ form.email.label }}</span>
</label>
<input type="email" name="{{ form.email.name }}"
class="input input-bordered w-full {% if form.email.errors %}input-error{% endif %}"
value="{{ form.email.value|default:'' }}" />
{% if form.email.errors %}
<label class="label">
<span class="label-text-alt text-error">{{ form.email.errors }}</span>
</label>
{% endif %}
</div>

<!-- Password field -->
<div class="form-control w-full">
<label class="label">
<span class="label-text">{{ form.password1.label }}</span>
</label>
<input type="password" name="{{ form.password1.name }}"
class="input input-bordered w-full {% if form.password1.errors %}input-error{% endif %}" />
{% if form.password1.errors %}
<label class="label">
<span class="label-text-alt text-error">{{ form.password1.errors }}</span>
</label>
{% endif %}
{% if form.password1.help_text %}
<label class="label">
<span class="label-text-alt">{{ form.password1.help_text|safe }}</span>
</label>
{% endif %}
</div>

<!-- Password confirmation field -->
<div class="form-control w-full">
<label class="label">
<span class="label-text">{{ form.password2.label }}</span>
</label>
<input type="password" name="{{ form.password2.name }}"
class="input input-bordered w-full {% if form.password2.errors %}input-error{% endif %}" />
{% if form.password2.errors %}
<label class="label">
<span class="label-text-alt text-error">{{ form.password2.errors }}</span>
</label>
{% endif %}
{% if form.password2.help_text %}
<label class="label">
<span class="label-text-alt">{{ form.password2.help_text }}</span>
</label>
{% endif %}
</div>

{% if form.non_field_errors %}
<div class="alert alert-error">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 shrink-0 stroke-current" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
<span>{{ form.non_field_errors }}</span>
</div>
{% endif %}

<div class="card-actions">
<button class="btn btn-primary" type="submit">{% translate "Sign up" %}</button>
</div>
</form>
</div>
</div>
{% endblock content %}
Loading