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

Jump to bottom

Bootstrap v5 #7411

Open
wants to merge 23 commits into
base: master
Choose a base branch
from
Open

Bootstrap v5 #7411

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
830f515
Updated static files to BS-v5 & added popper.js
smithdc1 Jul 9, 2020
7be17e9
Navbar and top buttons
smithdc1 Jul 10, 2020
db22809
Page header
smithdc1 Jul 10, 2020
69ba59c
Pagination (numbers.html)
smithdc1 Jul 10, 2020
8492841
HTML/Raw data forms
smithdc1 Jul 11, 2020
44c9d8f
Changed form-group to mb-3
smithdc1 Jul 11, 2020
fc7235e
Horizontal forms
smithdc1 Jul 11, 2020
39c22e0
Fixed tests following horizontal form changes
smithdc1 Jul 12, 2020
5577d36
Vertical forms
smithdc1 Jul 13, 2020
fe7a0cf
Filters
smithdc1 Jul 13, 2020
5a5cece
Inline Forms
smithdc1 Jul 13, 2020
ec558a4
Admin
smithdc1 Jul 13, 2020
a3d9232
Docs
smithdc1 Jul 14, 2020
b0c51d8
remove fontawesome
smithdc1 Jul 14, 2020
971bca6
Remove duplicate <p> tags
smithdc1 Jul 14, 2020
0d1d54d
Used bootstrap5 bundled js
smithdc1 Jul 14, 2020
3d156f4
Bump Bootstrap to v5.0.0-beta3
smithdc1 Apr 14, 2021
db81b27
Namespaced data attributes
smithdc1 Apr 15, 2021
b5bf67d
Changed hide to d-none
smithdc1 Apr 15, 2021
d5edf0f
Changed left/right to start/end
smithdc1 Apr 15, 2021
cde3503
Fixed dropdown button
smithdc1 Apr 26, 2021
a1e9721
Fixed test test_rendering_nested_fields_with_not_mappable_value
smithdc1 Apr 27, 2021
8a7ff84
Update rest_framework/templates/rest_framework/base.html
tomchristie Dec 10, 2021
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
16 changes: 7 additions & 9 deletions rest_framework/templates/rest_framework/vertical/checkbox.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,16 @@
<div class="mb-3 {% if field.errors %}has-error{% endif %}">
<div class="checkbox">
<label>
<input type="checkbox" name="{{ field.name }}" value="true" {% if field.value %}checked{% endif %}>
{% if field.label %}{{ field.label }}{% endif %}
</label>
</div>
<div class="mb-3">
<div class="form-check">
<input class="form-check-input{% if field.errors %} is-invalid{% endif %}" type="checkbox" name="{{ field.name }}" value="true" {% if field.value %}checked{% endif %}>
{% if field.label %}<label class="form-check-label">{{ field.label }}</label>{% endif %}

{% if field.errors %}
{% for error in field.errors %}
<span class="help-block">{{ error }}</span>
<span class="invalid-feedback">{{ error }}</span>
{% endfor %}
{% endif %}

{% if field.help_text %}
<span class="help-block">{{ field.help_text|safe }}</span>
<span class="form-text">{{ field.help_text|safe }}</span>
{% endif %}
</div>
</div>
41 changes: 17 additions & 24 deletions rest_framework/templates/rest_framework/vertical/checkbox_multiple.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,37 +1,30 @@
{% load rest_framework %}

<div class="mb-3 {% if field.errors %}has-error{% endif %}">
<div class="mb-3">
{% if field.label %}
<label {% if style.hide_label %}class="sr-only"{% endif %}>{{ field.label }}</label>
<label class="form-label {% if style.hide_label %}sr-only{% endif %}">{{ field.label }}</label>
Copy link

@ghost ghost Feb 12, 2022 •
edited by ghost
Loading

Choose a reason for hiding this comment

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

I think in Bootstrap 5 .sr-only was removed: https://getbootstrap.com/docs/5.0/getting-started/accessibility/#visually-hidden-content

The reason I am noticing this is because when I set hide_label to True in my serializer field I saw the class is added but when I looked in the CSS it was not there.

So anywhere in any of the forms it uses .sr-only which I think is a lot of templates would have to swap out to the v5 class.

{% endif %}

{% if style.inline %}
<div>
{% for key, text in field.choices|items %}
<label class="checkbox-inline">
<input type="checkbox" name="{{ field.name }}" value="{{ key }}" {% if key|as_string in field.value|as_list_of_strings %}checked{% endif %}>
{{ text }}
</label>
{% endfor %}
</div>
{% else %}
<div>
{% for key, text in field.choices|items %}
<div class="checkbox">
<label>
<input type="checkbox" name="{{ field.name }}" value="{{ key }}" {% if key|as_string in field.value|as_list_of_strings %}checked{% endif %}>
{{ text }}
</label>
<div class="form-check {% if style.inline %}form-check-inline{% endif %}">
<input class="form-check-input{% if field.errors %} is-invalid{% endif %}" type="checkbox" name="{{ field.name }}" value="{{ key }}" {% if key|as_string in field.value|as_list_of_strings %}checked{% endif %}>
<label class="form-check-label">{{ text }}</label>
</div>
{% endfor %}
{% endif %}

{% if field.errors %}
{% for error in field.errors %}
<span class="help-block">{{ error }}</span>
{% endfor %}
{% endif %}
{% if field.errors %}
{# A fake input to trigger the error messages as it needs to be after a valid input #}
{# If it's with the last input and it's inline then the error stacks under the last input label #}
{# It has no name so no data will be sent #}
<input type="radio" class="is-invalid" style="display: none"/>
{% for error in field.errors %}
<span class="invalid-feedback">{{ error }}</span>
{% endfor %}
{% endif %}

{% if field.help_text %}
<span class="help-block">{{ field.help_text|safe }}</span>
<span class="form-text">{{ field.help_text|safe }}</span>
{% endif %}
</div>
</div>
4 changes: 2 additions & 2 deletions rest_framework/templates/rest_framework/vertical/dict_field.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<div class="mb-3">
{% if field.label %}
<label {% if style.hide_label %}class="sr-only"{% endif %}>{{ field.label }}</label>
<label class="form-label {% if style.hide_label %}sr-only{% endif %}">{{ field.label }}</label>
{% endif %}

<p class="form-control-static">Dictionaries are not currently supported in HTML input.</p>
<p class="form-label">Dictionaries are not currently supported in HTML input.</p>
</div>
4 changes: 1 addition & 3 deletions rest_framework/templates/rest_framework/vertical/fieldset.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,7 @@

<fieldset>
{% if field.label %}
<legend {% if style.hide_label %}class="sr-only"{% endif %}>
{{ field.label }}
</legend>
<label class="form-label {% if style.hide_label %}sr-only{% endif %}">{{ field.label }}</label>
{% endif %}

{% for nested_field in field %}
Expand Down
10 changes: 5 additions & 5 deletions rest_framework/templates/rest_framework/vertical/input.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,17 @@
<div class="mb-3 {% if field.errors %}has-error{% endif %}">
<div class="mb-3">
{% if field.label %}
<label {% if style.hide_label %}class="sr-only"{% endif %}>{{ field.label }}</label>
<label class="form-label {% if style.hide_label %}sr-only{% endif %}">{{ field.label }}</label>
{% endif %}

<input name="{{ field.name }}" {% if style.input_type != "file" %}class="form-control"{% endif %} type="{{ style.input_type }}" {% if style.placeholder %}placeholder="{{ style.placeholder }}"{% endif %} {% if field.value is not None %}value="{{ field.value }}"{% endif %} {% if style.autofocus and style.input_type != "hidden" %}autofocus{% endif %}>
<input name="{{ field.name }}" {% if style.input_type != "file" %}class="form-control{% if field.errors %} is-invalid{% endif %}"{% endif %} type="{{ style.input_type }}" {% if style.placeholder %}placeholder="{{ style.placeholder }}"{% endif %} {% if field.value is not None %}value="{{ field.value }}"{% endif %} {% if style.autofocus and style.input_type != "hidden" %}autofocus{% endif %}>

{% if field.errors %}
{% for error in field.errors %}
<span class="help-block">{{ error }}</span>
<span class="invalid-feedback">{{ error }}</span>
{% endfor %}
{% endif %}

{% if field.help_text %}
<span class="help-block">{{ field.help_text|safe }}</span>
<span class="form-text">{{ field.help_text|safe }}</span>
{% endif %}
</div>
4 changes: 2 additions & 2 deletions rest_framework/templates/rest_framework/vertical/list_field.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<div class="mb-3">
{% if field.label %}
<label {% if style.hide_label %}class="sr-only"{% endif %}>{{ field.label }}</label>
<label class="form-label {% if style.hide_label %}sr-only{% endif %}">{{ field.label }}</label>
{% endif %}

<p class="form-control-static">Lists are not currently supported in HTML input.</p>
<p class="form-label">Lists are not currently supported in HTML input.</p>
</div>
6 changes: 2 additions & 4 deletions rest_framework/templates/rest_framework/vertical/list_fieldset.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,7 @@
<fieldset>
{% if field.label %}
<legend {% if style.hide_label %}class="sr-only"{% endif %}>
{{ field.label }}
</legend>
<label class="form-label {% if style.hide_label %}sr-only{% endif %}">{{ field.label }}</label>
{% endif %}

<p>Lists are not currently supported in HTML input.</p>
<p class="form-label">Lists are not currently supported in HTML input.</p>
</fieldset>
49 changes: 16 additions & 33 deletions rest_framework/templates/rest_framework/vertical/radio.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,56 +2,39 @@
{% load rest_framework %}
{% trans "None" as none_choice %}

<div class="mb-3 {% if field.errors %}has-error{% endif %}">
<div class="mb-3">
{% if field.label %}
<label {% if style.hide_label %}class="sr-only"{% endif %}>
<label class="form-label {% if style.hide_label %}sr-only{% endif %}">
{{ field.label }}
</label>
{% endif %}

{% if style.inline %}
<div>
{% if field.allow_null or field.allow_blank %}
<label class="radio-inline">
<input type="radio" name="{{ field.name }}" value="" {% if not field.value %}checked{% endif %} />
{{ none_choice }}
</label>
{% endif %}

{% for key, text in field.choices|items %}
<label class="radio-inline">
<input type="radio" name="{{ field.name }}" value="{{ key }}" {% if key|as_string == field.value|as_string %}checked{% endif %}>
{{ text }}
</label>
{% endfor %}
</div>
{% else %}
<div>
{% if field.allow_null or field.allow_blank %}
<div class="radio">
<label>
<input type="radio" name="{{ field.name }}" value="" {% if not field.value %}checked{% endif %} />
{{ none_choice }}
</label>
<div class="form-check {% if style.inline %}form-check-inline{% endif %}">
<input class="form-check-input{% if field.errors %} is-invalid{% endif %}" type="radio" name="{{ field.name }}" value="" {% if not field.value %}checked{% endif %} />
<label class="form-check-label">{{ none_choice }}</label>
</div>
{% endif %}

{% for key, text in field.choices|items %}
<div class="radio">
<label>
<input type="radio" name="{{ field.name }}" value="{{ key }}" {% if key|as_string == field.value|as_string %}checked{% endif %}>
{{ text }}
</label>
<div class="form-check {% if style.inline %}form-check-inline{% endif %}">
<input class="form-check-input{% if field.errors %} is-invalid{% endif %}" type="radio" name="{{ field.name }}" value="{{ key }}" {% if key|as_string == field.value|as_string %}checked{% endif %}>
<label class="form-check-label">{{ text }}</label>
</div>
{% endfor %}
{% endif %}

{% if field.errors %}
{# A fake input to trigger the error messages as it needs to be after a valid input #}
{# If it's with the last input and it's inline then the error stacks under the last input label #}
{# It has no name so no data will be sent #}
<input type="radio" class="is-invalid" style="display: none"/>
{% for error in field.errors %}
<span class="help-block">{{ error }}</span>
<span class="invalid-feedback">{{ error }}</span>
{% endfor %}
{% endif %}

{% if field.help_text %}
<span class="help-block">{{ field.help_text|safe }}</span>
<span class="form-text">{{ field.help_text|safe }}</span>
{% endif %}
</div>
</div>
10 changes: 5 additions & 5 deletions rest_framework/templates/rest_framework/vertical/select.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
{% load rest_framework %}

<div class="mb-3 {% if field.errors %}has-error{% endif %}">
<div class="mb-3">
{% if field.label %}
<label {% if style.hide_label %}class="sr-only"{% endif %}>
<label class="form-label {% if style.hide_label %}sr-only{% endif %}">
{{ field.label }}
</label>
{% endif %}

<select class="form-control" name="{{ field.name }}">
<select class="form-select{% if field.errors %} is-invalid{% endif %}" name="{{ field.name }}">
{% if field.allow_null or field.allow_blank %}
<option value="" {% if not field.value %}selected{% endif %}>--------</option>
{% endif %}
Expand All @@ -24,11 +24,11 @@

{% if field.errors %}
{% for error in field.errors %}
<span class="help-block">{{ error }}</span>
<span class="invalid-feedback">{{ error }}</span>
{% endfor %}
{% endif %}

{% if field.help_text %}
<span class="help-block">{{ field.help_text|safe }}</span>
<span class="form-text">{{ field.help_text|safe }}</span>
{% endif %}
</div>
12 changes: 5 additions & 7 deletions rest_framework/templates/rest_framework/vertical/select_multiple.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,12 @@
{% load rest_framework %}
{% trans "No items to select." as no_items %}

<div class="mb-3 {% if field.errors %}has-error{% endif %}">
<div class="mb-3">
{% if field.label %}
<label {% if style.hide_label %}class="sr-only"{% endif %}>
{{ field.label }}
</label>
<label class="form-label {% if style.hide_label %}sr-only{% endif %}">{{ field.label }}</label>
{% endif %}

<select multiple {{ field.choices|yesno:",disabled" }} class="form-control" name="{{ field.name }}">
<select multiple {{ field.choices|yesno:",disabled" }} class="form-select {% if field.errors %} is-invalid{% endif %}" name="{{ field.name }}">
{% for select in field.iter_options %}
{% if select.start_option_group %}
<optgroup label="{{ select.label }}">
Expand All @@ -24,10 +22,10 @@
</select>

{% if field.errors %}
{% for error in field.errors %}<span class="help-block">{{ error }}</span>{% endfor %}
{% for error in field.errors %}<span class="invalid-feedback">{{ error }}</span>{% endfor %}
{% endif %}

{% if field.help_text %}
<span class="help-block">{{ field.help_text|safe }}</span>
<span class="form-text">{{ field.help_text|safe }}</span>
{% endif %}
</div>
10 changes: 5 additions & 5 deletions rest_framework/templates/rest_framework/vertical/textarea.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,17 @@
<div class="mb-3 {% if field.errors %}has-error{% endif %}">
<div class="mb-3">
{% if field.label %}
<label {% if style.hide_label %}class="sr-only"{% endif %}>
<label class="form-label {% if style.hide_label %}sr-only{% endif %}">
{{ field.label }}
</label>
{% endif %}

<textarea name="{{ field.name }}" class="form-control" {% if style.placeholder %}placeholder="{{ style.placeholder }}"{% endif %} {% if style.rows %}rows="{{ style.rows }}"{% endif %}>{% if field.value %}{{ field.value }}{% endif %}</textarea>
<textarea name="{{ field.name }}" class="form-control{% if field.errors %} is-invalid{% endif %}" {% if style.placeholder %}placeholder="{{ style.placeholder }}"{% endif %} {% if style.rows %}rows="{{ style.rows }}"{% endif %}>{% if field.value %}{{ field.value }}{% endif %}</textarea>

{% if field.errors %}
{% for error in field.errors %}<span class="help-block">{{ error }}</span>{% endfor %}
{% for error in field.errors %}<span class="invalid-feedback">{{ error }}</span>{% endfor %}
{% endif %}

{% if field.help_text %}
<span class="help-block">{{ field.help_text|safe }}</span>
<span class="form-text">{{ field.help_text|safe }}</span>
{% endif %}
</div>
14 changes: 7 additions & 7 deletions tests/test_bound_fields.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,9 +79,9 @@ class ExampleSerializer(serializers.Serializer):
rendered = renderer.render_field(serializer['bool_field'], {})
expected_packed = (
'<divclass="mb-3">'
'<divclass="checkbox">'
'<label>'
'<inputtype="checkbox"name="bool_field"value="true"checked>'
'<divclass="form-check">'
'<inputclass="form-check-input"type="checkbox"name="bool_field"value="true"checked>'
'<labelclass="form-check-label">'
'Boolfield'
'</label>'
'</div>'
Expand Down Expand Up @@ -167,16 +167,16 @@ class ExampleSerializer(serializers.Serializer):
rendered = renderer.render_field(field, {})
expected_packed = (
'<fieldset>'
'<legend>Nested2</legend>'
'<labelclass="form-label">Nested2</label>'
'<fieldset>'
'<legend>Nested1</legend>'
'<labelclass="form-label">Nested1</label>'
'<divclass="mb-3">'
'<label>Textfield</label>'
'<labelclass="form-label">Textfield</label>'
'<inputname="nested2.nested1.text_field"class="form-control"type="text"value="">'
'</div>'
'</fieldset>'
'<divclass="mb-3">'
'<label>Textfield</label>'
'<labelclass="form-label">Textfield</label>'
'<inputname="nested2.text_field"class="form-control"type="text"value="test">'
'</div>'
'</fieldset>'
Expand Down