encode/django-rest-framework
1
1
Fork 0
mirror of https://github.com/encode/django-rest-framework.git synced 2025-07-27 08:29:59 +03:00
Code Issues Packages Projects Releases Wiki Activity

Horizontal forms

Browse Source 
* checkbox are now fully custom by default in Bootstrap5 - removed previous tweaks.
* control-label --> col-form-label
* errors now need `invalid-feedback` on the text and `is-invalid` on the input
* new `form-text` class for help text
* New html layout and css classes for radio/multiple checkbox. Added work around for errors and inline (see comments in code).
This commit is contained in:
David Smith 2020-07-11 20:53:12 +01:00
parent 44c9d8f3c7
commit fc7235e636
12 changed files with 77 additions and 111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
rest_framework/static/rest_framework/css/bootstrap-tweaks.css vendored
View File

@ -198,20 +198,6 @@ body a:hover {
clear:both;
}
.horizontal-checkbox label {
padding-top: 0;
}
.horizontal-checkbox label {
padding-top: 0 !important;
}
.horizontal-checkbox input {
float: left;
width: 20px;
margin-top: 3px;
}
.modal-footer form {
margin-left: 5px;
margin-right: 5px;

12
rest_framework/templates/rest_framework/horizontal/checkbox.html
View File

@ -1,21 +1,23 @@
<div class="mb-3 horizontal-checkbox {% if field.errors %}has-error{% endif %}">
<div class="mb-3 row">
{% if field.label %}
<label class="col-sm-2 control-label {% if style.hide_label %}sr-only{% endif %}">
<label class="col-sm-2 col-form-label pt-0 {% if style.hide_label %}sr-only{% endif %}">
{{ field.label }}
</label>
{% endif %}
<div class="col-sm-10">
<input type="checkbox" name="{{ field.name }}" value="true" {% if field.value %}checked{% endif %}>
<div class="col-sm-10">
<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.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>
</div>

45
rest_framework/templates/rest_framework/horizontal/checkbox_multiple.html
View File

@ -1,39 +1,32 @@
{% load rest_framework %}
<div class="mb-3">
<div class="mb-3 row">
{% if field.label %}
<label class="col-sm-2 control-label {% if style.hide_label %}sr-only{% endif %}">
<label class="col-sm-2 col-form-label pt-0 {% if style.hide_label %}sr-only{% endif %}">
{{ field.label }}
</label>
{% endif %}
<div class="col-sm-10">
{% if style.inline %}
{% 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 %}
{% else %}
{% 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>
{% for key, text in field.choices|items %}
<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 %}
{% 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.errors %}
{% for error in field.errors %}
<span class="help-block">{{ error }}</span>
{% endfor %}
{% endif %}
{% if field.help_text %}
<span class="help-block">{{ field.help_text|safe }}</span>
{% endif %}
{% if field.help_text %}
<p class="form-text">{{ field.help_text|safe }}</p>
{% endif %}
</div>
</div>

6
rest_framework/templates/rest_framework/horizontal/dict_field.html
View File

@ -1,11 +1,11 @@
<div class="mb-3">
<div class="mb-3 row">
{% if field.label %}
<label class="col-sm-2 control-label {% if style.hide_label %}sr-only{% endif %}">
<label class="col-sm-2 col-form-label {% if style.hide_label %}sr-only{% endif %}">
{{ field.label }}
</label>
{% endif %}
<div class="col-sm-10">
<p class="form-control-static">Dictionaries are not currently supported in HTML input.</p>
<p class="col-form-label">Dictionaries are not currently supported in HTML input.</p>
</div>
</div>

4
rest_framework/templates/rest_framework/horizontal/fieldset.html
View File

@ -1,8 +1,8 @@
{% load rest_framework %}
<fieldset>
{% if field.label %}
<div class="mb-3" style="border-bottom: 1px solid #e5e5e5">
<legend class="control-label col-sm-2 {% if style.hide_label %}sr-only{% endif %}" style="border-bottom: 0">
<div class="mb-3 row" style="border-bottom: 1px solid #e5e5e5">
<legend class="col-form-label col-sm-2 {% if style.hide_label %}sr-only{% endif %}" style="border-bottom: 0">
{{ field.label }}
</legend>
</div>

10
rest_framework/templates/rest_framework/horizontal/input.html
View File

@ -1,21 +1,21 @@
<div class="mb-3 {% if field.errors %}has-error{% endif %}">
<div class="mb-3 row">
{% if field.label %}
<label class="col-sm-2 control-label {% if style.hide_label %}sr-only{% endif %}">
<label class="col-sm-2 col-form-label {% if style.hide_label %}sr-only{% endif %}">
{{ field.label }}
</label>
{% endif %}
<div class="col-sm-10">
<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>
</div>

6
rest_framework/templates/rest_framework/horizontal/list_field.html
View File

@ -1,11 +1,11 @@
<div class="mb-3">
<div class="mb-3 row">
{% if field.label %}
<label class="col-sm-2 control-label {% if style.hide_label %}sr-only{% endif %}">
<label class="col-sm-2 col-form-label {% if style.hide_label %}sr-only{% endif %}">
{{ field.label }}
</label>
{% endif %}
<div class="col-sm-10">
<p class="form-control-static">Lists are not currently supported in HTML input.</p>
<p class="col-form-label">Lists are not currently supported in HTML input.</p>
</div>
</div>

4
rest_framework/templates/rest_framework/horizontal/list_fieldset.html
View File

@ -2,8 +2,8 @@
<fieldset>
{% if field.label %}
<div class="mb-3" style="border-bottom: 1px solid #e5e5e5">
<legend class="control-label col-sm-2 {% if style.hide_label %}sr-only{% endif %}" style="border-bottom: 0">
<div class="mb-3 row" style="border-bottom: 1px solid #e5e5e5">
<legend class="col-form-label col-sm-2 {% if style.hide_label %}sr-only{% endif %}" style="border-bottom: 0">
{{ field.label }}
</legend>
</div>

57
rest_framework/templates/rest_framework/horizontal/radio.html
View File

@ -3,55 +3,40 @@
{% trans "None" as none_choice %}
<div class="mb-3">
<div class="mb-3 row">
{% if field.label %}
<label class="col-sm-2 control-label {% if style.hide_label %}sr-only{% endif %}">
<label class="col-sm-2 col-form-label pt-0 {% if style.hide_label %}sr-only{% endif %}">
{{ field.label }}
</label>
{% endif %}
<div class="col-sm-10">
{% if style.inline %}
{% 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 %}
{% else %}
{% 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>
{% 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>
{% endfor %}
{% if field.allow_null or field.allow_blank %}
<div class="form-check {% if style.inline %}form-check-inline {% endif %}">
<input class="form-check-input" 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="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 %}
{% 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>
<p class="form-text">{{ field.help_text|safe }}</p>
{% endif %}
</div>
</div>
</div>

10
rest_framework/templates/rest_framework/horizontal/select.html
View File

@ -1,14 +1,14 @@
{% load rest_framework %}
<div class="mb-3">
<div class="mb-3 row">
{% if field.label %}
<label class="col-sm-2 control-label {% if style.hide_label %}sr-only{% endif %}">
<label class="col-sm-2 col-form-label {% if style.hide_label %}sr-only{% endif %}">
{{ field.label }}
</label>
{% endif %}
<div class="col-sm-10">
<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 %}
@ -25,12 +25,12 @@
{% 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>

10
rest_framework/templates/rest_framework/horizontal/select_multiple.html
View File

@ -3,15 +3,15 @@
{% trans "No items to select." as no_items %}
<div class="mb-3">
<div class="mb-3 row">
{% if field.label %}
<label class="col-sm-2 control-label {% if style.hide_label %}sr-only{% endif %}">
<label class="col-sm-2 col-form-label {% if style.hide_label %}sr-only{% endif %}">
{{ field.label }}
</label>
{% endif %}
<div class="col-sm-10">
<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 }}">
@ -27,12 +27,12 @@
{% 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>

10
rest_framework/templates/rest_framework/horizontal/textarea.html
View File

@ -1,21 +1,21 @@
<div class="mb-3 {% if field.errors %}has-error{% endif %}">
<div class="mb-3 row">
{% if field.label %}
<label class="col-sm-2 control-label {% if style.hide_label %}sr-only{% endif %}">
<label class="col-sm-2 col-form-label {% if style.hide_label %}sr-only{% endif %}">
{{ field.label }}
</label>
{% endif %}
<div class="col-sm-10">
<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>
<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>