Skip to content

Base input style #8

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

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

Base input style #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
dd3f497
Added base styles
smithdc1 May 9, 2020
2051d48
Updated baseinput.html
smithdc1 May 9, 2020
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: 1 addition & 1 deletion crispy_tailwind/templates/tailwind/layout/baseinput.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
name="{% if input.name|wordcount > 1 %}{{ input.name|slugify }}{% else %}{{ input.name }}{% endif %}"
value="{{ input.value }}"
{% if input.input_type != "hidden" %}
class="{{ input.field_classes }}"
class="{{ input.field_classes }} bg-white focus:outline-none focus:shadow-outline border border-gray-300 rounded-lg py-2 px-4 block w-full appearance-none leading-normal"
Copy link
Member

Choose a reason for hiding this comment

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

Say the form has two buttons, submit / cancel. Does this allow users to still adjust colour by adding additional classes? (seems to me like the most likely use case).

id="{% if input.id %}{{ input.id }}{% else %}{{ input.input_type }}-id-{{ input.name|slugify }}{% endif %}"
{% endif %}
{{ input.flat_attrs|safe }}
Expand Down
40 changes: 33 additions & 7 deletions crispy_tailwind/templatetags/tailwind_field.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,38 @@ def pairwise(iterable):

class CrispyTailwindFieldNode(template.Node):

default_styles = {"text": "tailwind-text", "radioselect": " tailwind-radio"}
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": "",
"radioselect": "",
"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": "",
}

default_container = CSSContainer(default_styles)

Expand Down Expand Up @@ -113,11 +144,7 @@ def render(self, context): # noqa: C901
if isinstance(attrs, dict):
attrs = [attrs] * len(widgets)

converters = {
"textinput": "textinput textInput",
"fileinput": "fileinput fileUpload",
"passwordinput": "textinput textInput",
}
converters = {}
converters.update(getattr(settings, "CRISPY_CLASS_CONVERTERS", {}))

for widget, attr in zip(widgets, attrs):
Expand All @@ -131,7 +158,6 @@ def render(self, context): # noqa: C901
css_class = class_name

# Added additional code for Tailwind

if template_pack == "tailwind":
css_container = context.get("css_container", self.default_container)
if css_container:
Expand Down
44 changes: 30 additions & 14 deletions tests/test_filter.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,48 +27,64 @@ def test_crispy_filter(self):
<div id="div_id_email" class=" mb-3">
<label for="id_email" class="block text-gray-700 text-sm font-bold mb-2">email<span class="asteriskField">
*</span> </label>
<input type="text" name="email" maxlength="30" class="textinput textInput inputtext tailwind-text"
<input type="text" name="email" maxlength="30" class="textinput textInput inputtext w-full rounded-lg """
"""border appearance-none py-2 border-gray-300 bg-white text-gray-700 focus:outline-none px-4 block """
"""leading-normal"
required id="id_email">
<small id="hint_id_email" class="text-gray-600">Insert your email</small> </div>

<div id="div_id_password1" class=" mb-3">
<label for="id_password1" class="block text-gray-700 text-sm font-bold mb-2">password
<span class="asteriskField">*</span>
<label for="id_password1" class="block text-gray-700 text-sm font-bold mb-2">password<span
class="asteriskField">*</span>
</label>
<input type="password" name="password1" maxlength="30" class="textinput textInput "
required id="id_password1"> </div>
<input type="password" name="password1" maxlength="30"
class="passwordinput w-full rounded-lg """
"""border appearance-none py-2 border-gray-300 bg-white text-gray-700 focus:outline-none px-4 block """
"""leading-normal" required id="id_password1">
</div>

<div id="div_id_password2" class=" mb-3">
<label for="id_password2" class="block text-gray-700 text-sm font-bold mb-2">
re-enter password<span class="asteriskField">*</span> </label>
<input type="password" name="password2" maxlength="30" class="textinput textInput "
<input type="password" name="password2" maxlength="30"
class="passwordinput w-full rounded-lg """
"""border appearance-none py-2 border-gray-300 bg-white text-gray-700 focus:outline-none px-4 block """
"""leading-normal"
required id="id_password2"> </div>

<div id="div_id_first_name" class=" mb-3">
<label for="id_first_name" class="block text-gray-700 text-sm font-bold mb-2">
first name<span class="asteriskField">*</span> </label>
<input type="text" name="first_name" maxlength="5" class="textinput textInput inputtext tailwind-text"
required id="id_first_name"> </div>
<input type="text" name="first_name" maxlength="5" class="textinput textInput inputtext w-full """
"""rounded-lg border appearance-none py-2 border-gray-300 bg-white text-gray-700 focus:outline-none """
'px-4 block leading-normal"'
"""required id="id_first_name"> </div>

<div id="div_id_last_name" class=" mb-3">
<label for="id_last_name" class="block text-gray-700 text-sm font-bold mb-2">
last name<span class="asteriskField">*</span> </label>
<input type="text" name="last_name" maxlength="5" class="textinput textInput inputtext tailwind-text"
required id="id_last_name"> </div>
<input type="text" name="last_name" maxlength="5"
class="textinput textInput inputtext w-full rounded-lg border appearance-none py-2 border-gray-300 """
"""bg-white text-gray-700 focus:outline-none px-4 block leading-normal" required id="id_last_name"> """
"""</div>

<div id="div_id_datetime_field" class=" mb-3">
<label for="id_datetime_field_0" class="block text-gray-700 text-sm font-bold mb-2">
date time<span class="asteriskField">*</span> </label>
<input type="text" name="datetime_field_0" class="dateinput " required id="id_datetime_field_0">
<input type="text" name="datetime_field_1" class="timeinput " required id="id_datetime_field_1">
</div>
<input type="text" name="datetime_field_0"
class="dateinput rounded-lg focus:outline border appearance-none py-2 mr-2 border-gray-300 bg-white """
"""text-gray-700 focus:outline-none px-4 leading-normal" required id="id_datetime_field_0">
<input type="text" name="datetime_field_1" class="timeinput rounded-lg focus:outline border """
"""appearance-none py-2 mr-2 border-gray-300 bg-white text-gray-700 focus:outline-none px-4 """
"""leading-normal" required id="id_datetime_field_1"> </div>

<div id="div_id_tos_accepted" class=" mb-3">
<label for="id_tos_accepted" class="block text-gray-700 text-sm font-bold mb-2">
terms of service<span class="asteriskField">*</span> </label>
<div class=" mb-3">
<div class="relative">
<select class="block appearance-none w-full bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500" name="tos_accepted">
<select class="block appearance-none w-full bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 """
"""pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500" name="tos_accepted">
<option value="accepted">Accepted</option>
<option value="not_accepted">Not accepted</option>
</select><div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
Expand Down