Skip to content

Commit c0a838f

Browse files
bryliebrylie
authored
Merge pull request #102 from GeriLife/django-tailwind
Migrate from Bootstrap to Tailwind CSS and enhance accessibility
2 parents 21af205 + c016e53 commit c0a838f

34 files changed

+3106
-544
lines changed

‎.github/copilot-instructions.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
# Copilot Instructions
2+
3+
## Style
4+
5+
This project uses the Tailwind CSS framework and daisyUI component library. Please use daisyUI components when possible.

‎.gitignore‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -128,3 +128,8 @@ dmypy.json
128128
.vscode
129129

130130
.DS_Store
131+
132+
# Tailwind compiled CSS
133+
# We can commit this if it is necessary for deployment
134+
# but it should be possible to generate it from the source in CI
135+
theme/static/css/style.css

‎accounts/templates/registration/login.html‎

Lines changed: 48 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,57 @@
11
{% extends 'base.html' %}
22

33
{% load i18n %}
4-
{% load crispy_forms_tags %}
54

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

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

11-
<form action="" method=post>
12-
{% csrf_token %}
13-
{{ form | crispy }}
14-
<button class="btn btn-primary" type="submit">{% translate "Log in" %}</button>
15-
</form>
12+
<form action="" method="post" class="space-y-6">
13+
{% csrf_token %}
14+
15+
<!-- Username field -->
16+
<div class="form-control w-full">
17+
<label class="label">
18+
<span class="label-text">{{ form.username.label }}</span>
19+
</label>
20+
<input type="text" name="{{ form.username.name }}"
21+
class="input input-bordered w-full {% if form.username.errors %}input-error{% endif %}"
22+
value="{{ form.username.value|default:'' }}" />
23+
{% if form.username.errors %}
24+
<label class="label">
25+
<span class="label-text-alt text-error">{{ form.username.errors }}</span>
26+
</label>
27+
{% endif %}
28+
</div>
29+
30+
<!-- Password field -->
31+
<div class="form-control w-full">
32+
<label class="label">
33+
<span class="label-text">{{ form.password.label }}</span>
34+
</label>
35+
<input type="password" name="{{ form.password.name }}"
36+
class="input input-bordered w-full {% if form.password.errors %}input-error{% endif %}" />
37+
{% if form.password.errors %}
38+
<label class="label">
39+
<span class="label-text-alt text-error">{{ form.password.errors }}</span>
40+
</label>
41+
{% endif %}
42+
</div>
43+
44+
{% if form.non_field_errors %}
45+
<div class="alert alert-error">
46+
<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>
47+
<span>{{ form.non_field_errors }}</span>
48+
</div>
49+
{% endif %}
50+
51+
<div class="card-actions">
52+
<button class="btn btn-primary" type="submit">{% translate "Log in" %}</button>
53+
</div>
54+
</form>
55+
</div>
56+
</div>
1657
{% endblock content %}

‎accounts/templates/registration/signup.html‎

Lines changed: 92 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,101 @@
11
{% extends 'base.html' %}
22

33
{% load i18n %}
4-
{% load crispy_forms_tags %}
54

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

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

11-
<form action="" method=post>
12-
{% csrf_token %}
13-
{{ form | crispy }}
14-
<button class="btn btn-primary" type="submit">{% translate "Sign up" %}</button>
15-
</form>
12+
<form action="" method="post" class="space-y-6">
13+
{% csrf_token %}
14+
15+
<!-- Username field -->
16+
<div class="form-control w-full">
17+
<label class="label">
18+
<span class="label-text">{{ form.username.label }}</span>
19+
</label>
20+
<input type="text" name="{{ form.username.name }}"
21+
class="input input-bordered w-full {% if form.username.errors %}input-error{% endif %}"
22+
value="{{ form.username.value|default:'' }}" />
23+
{% if form.username.errors %}
24+
<label class="label">
25+
<span class="label-text-alt text-error">{{ form.username.errors }}</span>
26+
</label>
27+
{% endif %}
28+
{% if form.username.help_text %}
29+
<label class="label">
30+
<span class="label-text-alt">{{ form.username.help_text }}</span>
31+
</label>
32+
{% endif %}
33+
</div>
34+
35+
<!-- Email field -->
36+
<div class="form-control w-full">
37+
<label class="label">
38+
<span class="label-text">{{ form.email.label }}</span>
39+
</label>
40+
<input type="email" name="{{ form.email.name }}"
41+
class="input input-bordered w-full {% if form.email.errors %}input-error{% endif %}"
42+
value="{{ form.email.value|default:'' }}" />
43+
{% if form.email.errors %}
44+
<label class="label">
45+
<span class="label-text-alt text-error">{{ form.email.errors }}</span>
46+
</label>
47+
{% endif %}
48+
</div>
49+
50+
<!-- Password field -->
51+
<div class="form-control w-full">
52+
<label class="label">
53+
<span class="label-text">{{ form.password1.label }}</span>
54+
</label>
55+
<input type="password" name="{{ form.password1.name }}"
56+
class="input input-bordered w-full {% if form.password1.errors %}input-error{% endif %}" />
57+
{% if form.password1.errors %}
58+
<label class="label">
59+
<span class="label-text-alt text-error">{{ form.password1.errors }}</span>
60+
</label>
61+
{% endif %}
62+
{% if form.password1.help_text %}
63+
<label class="label">
64+
<span class="label-text-alt">{{ form.password1.help_text|safe }}</span>
65+
</label>
66+
{% endif %}
67+
</div>
68+
69+
<!-- Password confirmation field -->
70+
<div class="form-control w-full">
71+
<label class="label">
72+
<span class="label-text">{{ form.password2.label }}</span>
73+
</label>
74+
<input type="password" name="{{ form.password2.name }}"
75+
class="input input-bordered w-full {% if form.password2.errors %}input-error{% endif %}" />
76+
{% if form.password2.errors %}
77+
<label class="label">
78+
<span class="label-text-alt text-error">{{ form.password2.errors }}</span>
79+
</label>
80+
{% endif %}
81+
{% if form.password2.help_text %}
82+
<label class="label">
83+
<span class="label-text-alt">{{ form.password2.help_text }}</span>
84+
</label>
85+
{% endif %}
86+
</div>
87+
88+
{% if form.non_field_errors %}
89+
<div class="alert alert-error">
90+
<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>
91+
<span>{{ form.non_field_errors }}</span>
92+
</div>
93+
{% endif %}
94+
95+
<div class="card-actions">
96+
<button class="btn btn-primary" type="submit">{% translate "Sign up" %}</button>
97+
</div>
98+
</form>
99+
</div>
100+
</div>
16101
{% endblock content %}

0 commit comments

Comments
 (0)