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.

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

Update tailwind_field.py #163

Open
wants to merge 26 commits into
base: main
Choose a base branch
from
Open

Update tailwind_field.py #163

Show file tree
Hide file tree
Changes from 17 commits
Commits
Show all changes
26 commits
Select commit Hold shift + click to select a range
70a11d9
Update tailwind_field.py
Thutmose3 Feb 13, 2024
0535c32
Update tailwind_field.py
Thutmose3 Feb 13, 2024
5f14404
Update tailwind_field.py
Thutmose3 Feb 13, 2024
f691dba
Update select.html
Thutmose3 Feb 13, 2024
b6092a5
fix black
Feb 13, 2024
af19990
add documentation
Feb 13, 2024
b21bcd5
fix black
Feb 13, 2024
60cc327
push
Feb 13, 2024
12d1862
Update custom.txt
Thutmose3 Feb 24, 2024
30ad236
Update getting_started.txt
Thutmose3 Feb 24, 2024
e9fbfdf
Update custom.txt
Thutmose3 Feb 24, 2024
f37dd37
Update select.html
Thutmose3 Feb 24, 2024
2131738
Update crispy_filter.html
Thutmose3 Feb 24, 2024
50609dc
Update tailwind_field.py
Thutmose3 Feb 24, 2024
9017693
Update crispy_filter.html
Thutmose3 Feb 24, 2024
4fa7e3b
add classes to multiple select
Feb 24, 2024
c65735a
Update custom.txt
Thutmose3 Feb 24, 2024
523633c
Update tailwind_field.py
Thutmose3 Jul 30, 2024
a78b908
Update custom.txt
Thutmose3 Jul 30, 2024
f0353dc
Update custom.txt
Thutmose3 Jul 30, 2024
c3d8f15
Update custom.txt
Thutmose3 Jul 30, 2024
b9e47b7
Update custom.txt
Thutmose3 Jul 30, 2024
71b2f13
Update custom.txt
Thutmose3 Jul 30, 2024
3e85456
Update custom.txt
Thutmose3 Jul 30, 2024
9d0201e
Update custom.txt
Thutmose3 Jul 30, 2024
df82130
Update custom.txt
Thutmose3 Aug 1, 2024
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
4 changes: 2 additions & 2 deletions crispy_tailwind/templates/tailwind/layout/select.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
{% load crispy_forms_filters %}
{% load tailwind_filters %}
{% load tailwind_filters tailwind_field %}
{% load l10n %}

<div class="relative">
<select class="bg-white focus:outline-none border {% if field.errors %}border-red-500 {% else %}border-gray-300 {% endif %}rounded-lg py-2 px-4 block w-full appearance-none leading-normal text-gray-700" name="{{ field.html_name }}" {{ field|build_attrs }}>
<select class="{{ field|tailwind_field_class }}{% if field.errors %} border-red-500{% endif %}" name="{{ field.html_name }}" {{ field|build_attrs }}>
Thutmose3 marked this conversation as resolved.
Show resolved Hide resolved
{% for group, options, index in field|optgroups %}
{% if group %}<optgroup label="{{ group }}">{% endif %}
{% for option in options %}
Expand Down
80 changes: 46 additions & 34 deletions crispy_tailwind/templatetags/tailwind_field.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,41 +76,53 @@ def pairwise(iterable):
return zip(a, a)


@register.filter
def tailwind_field_class(field):
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

thought: how about a unit-test? this is a massive piece of python code, though not so much complicated logic.

"""
Returns field class from defaults.
"""
return f" {tailwind_container.get_input_class(field)}"


base_input = (
"bg-white focus:outline-none border border-gray-300 rounded-lg py-2 px-4 block w-full "
"appearance-none leading-normal text-gray-700"
)

default_styles = {
"text": base_input,
"number": base_input,
"radioselect": "",
"email": base_input,
"url": base_input,
"password": base_input,
"hidden": "",
"multiplehidden": "",
"file": "",
"clearablefile": "",
"textarea": base_input,
"date": base_input,
"datetime": base_input,
"time": base_input,
"checkbox": "",
"select": "bg-white focus:outline-none border border-gray-300 rounded-lg py-2 px-4 block w-full appearance-none leading-normal text-gray-700",
"nullbooleanselect": "",
"selectmultiple": "bg-white focus:outline-none border border-gray-300 rounded-lg py-2 px-4 block w-full appearance-none leading-normal text-gray-700",
"checkboxselectmultiple": "",
"multi": "",
"splitdatetime": "text-gray-700 bg-white focus:outline border border-gray-300 leading-normal px-4 "
"appearance-none rounded-lg py-2 focus:outline-none mr-2",
"splithiddendatetime": "",
"selectdate": "",
"error_border": "border-red-500",
}

tailwind_styles = {**default_styles, **getattr(settings, "CRISPY_TAILWIND_STYLE", {})}
Thutmose3 marked this conversation as resolved.
Show resolved Hide resolved
tailwind_container = CSSContainer(tailwind_styles)


class CrispyTailwindFieldNode(template.Node):
base_input = (
"bg-white focus:outline-none border border-gray-300 rounded-lg py-2 px-4 block w-full "
"appearance-none leading-normal text-gray-700"
)

default_styles = {
"text": base_input,
"number": base_input,
"radioselect": "",
"email": base_input,
"url": base_input,
"password": base_input,
"hidden": "",
"multiplehidden": "",
"file": "",
"clearablefile": "",
"textarea": base_input,
"date": base_input,
"datetime": base_input,
"time": base_input,
"checkbox": "",
"select": "",
"nullbooleanselect": "",
"selectmultiple": "",
"checkboxselectmultiple": "",
"multi": "",
"splitdatetime": "text-gray-700 bg-white focus:outline border border-gray-300 leading-normal px-4 "
"appearance-none rounded-lg py-2 focus:outline-none mr-2",
"splithiddendatetime": "",
"selectdate": "",
"error_border": "border-red-500",
}

default_container = CSSContainer(default_styles)
default_container = tailwind_container

def __init__(self, field, attrs):
self.field = field
Expand Down
58 changes: 52 additions & 6 deletions docs/custom.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,18 +2,64 @@
Custom Styles
=============

With Tailwind being a utility framework there is much more ability to customise
your site than with many of the other CSS frameworks such as Bootstrap.
There are currently two ways to customize the tailwind classes for your forms.

While our opinionated Tailwind styles may get you so far you may wish to change these.
The first one is to override CRISPY_TAILWIND_STYLE in your settings. This will override the defaults for all forms.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
The first one is to override CRISPY_TAILWIND_STYLE in your settings. This will override the defaults for all forms.
The first one is to override ``CRISPY_TAILWIND_STYLE`` in your settings. This will override the defaults for all forms.

This is handy for when you want to easily configure classes for all your forms, as forms in a project usually have the same uniform styling.

The second way is to configure ``CSSContainer`` on a specific form. This will only work for forms that use FormHelper.
This allows you to override a specific form, this is usefull for unique/complex forms.

The idea is that you can easily configure all forms by overriding CRISPY_TAILWIND_STYLE in settings, and if you want to customize a specific form, you can use CSSContainer for that specific form.
Thutmose3 marked this conversation as resolved.
Show resolved Hide resolved
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
The idea is that you can easily configure all forms by overriding CRISPY_TAILWIND_STYLE in settings, and if you want to customize a specific form, you can use CSSContainer for that specific form.
The idea is that you can easily configure all forms by overriding ``CRISPY_TAILWIND_STYLE`` in settings, and if you want to customize a specific form, you can use ``CSSContainer`` for that specific form.


The Tailwind template pack aims to help you customise your form in a DRY way. This
template pack comes with a utility class called `CSSContainer` which can be attached to your
form helper.

------------
CSSContainer
------------
The documentation on CSSContainer is a bit under-developed, more documentation coming soon.

-----------------------------------------------------------------------------
1. Configuring custom tailwind classes in settings with CRISPY_TAILWIND_STYLE
-----------------------------------------------------------------------------

Example:

Check warning on line 25 in docs/custom.txt

View workflow job for this annotation

GitHub Actions / docs 

Inline literal start-string without end-string.
``CRISPY_TAILWIND_STYLE = {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

issue: github docs complains here about something

"text": "bg-gray-50 border border-gray-300",
"select": "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500",
}``

Check warning on line 29 in docs/custom.txt

View workflow job for this annotation

GitHub Actions / docs 

Block quote ends without a blank line; unexpected unindent.
This is currently only working for the input fields and the select field. More coming soon.

These are the fields you can override:
CRISPY_TAILWIND_STYLE = {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggestion: might be worth marking it as python code?

"text": "",
"number": "",
"radioselect": "",
"email": "",
"url": "",
"password": "",
"hidden": "",
"multiplehidden": "",
"file": "",
"clearablefile": "",
"textarea": "",
"date": "",
"datetime": "",
"time": "",
"checkbox": "",
"select": "",
"nullbooleanselect": "",
"selectmultiple": "",
"checkboxselectmultiple": "",
"multi": "",
"splitdatetime": "",
"splithiddendatetime": "",
"selectdate": "",
"error_border": "",
}

Check warning on line 58 in docs/custom.txt

View workflow job for this annotation

GitHub Actions / docs 

Block quote ends without a blank line; unexpected unindent.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

issue: github actions docs complains

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have no clue why its still complaining about this, i tried all different variations newlines and indents to make it happy, but it still complains

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe @smithdc1 knows what to do here?

---------------
2. CSSContainer
---------------

`CSSContainer` is imported from `crispy_tailwind.tailwind`. This is a class which holds the
CSS style for your form. Currently it holds the classes for the `<input>` tags within your form.
Expand Down
2 changes: 1 addition & 1 deletion tests/results/filter/crispy_filter.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@
<div class="mb-3">
<div class="relative">
<select class="bg-white focus:outline-none border border-gray-300 rounded-lg py-2 px-4 block w-full
appearance-none leading-normal text-gray-700" name="tos_accepted" id="id_tos_accepted">
appearance-none leading-normal text-gray-700" name="tos_accepted" id="id_tos_accepted">
<option value="accepted">Accepted</option>
<option value="not_accepted">Not accepted</option>
</select>
Expand Down
Loading