steve
/
mybuddy
mirror of https://github.com/snachodog/mybuddy.git
1
0
Fork 0
Code Issues 3 Packages Projects 1 Releases Wiki Activity

Adjust form layout for better BS4 integration.

This commit is contained in:
Christopher Charbonneau Wells 2017-10-31 15:15:02 -04:00
parent 8c274ce765
commit 9c0989d22b
2 changed files with 33 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
babybuddy/static_src/scss/_global.scss
View File

@ -5,3 +5,8 @@
right: 0; right: 0;
left: auto; // Reset the default from `.dropdown-menu` left: auto; // Reset the default from `.dropdown-menu`
} }
// BB form fields do not follow typical BS4 style that enables this display.
.invalid-feedback {
display: block;
}

48
babybuddy/templates/babybuddy/form.html
View File

@ -3,12 +3,26 @@
<div class="container-fluid"> <div class="container-fluid">
<form role="form" method="post"> <form role="form" method="post">
{% csrf_token %} {% csrf_token %}
{% if form.non_field_errors %}
{% for error in form.non_field_errors %}
<div class="alert alert-danger" role="alert">
<strong>Error:</strong> {{ error }}
</div>
{% endfor %}
{% elif form.errors %}
<div class="alert alert-danger" role="alert">
<strong>Error:</strong> Some fields have errors. See below for details.
</div>
{% endif %}
{% for field in form %} {% for field in form %}
<div class="d-none">{{ field|field_type }}</div>
<div class="form-group row"> <div class="form-group row">
{% if field|field_type == "booleanfield" %} <label for="id_{{ field.name }}" class="col-sm-1 col-form-label">
<div class="col-sm-1 d-none d-sm-block">&nbsp;</div> {% if field|field_type != "booleanfield" %}
<div class="col-sm-11"> {{ field.label }}
{% endif %}
</label>
<div class="col-sm-11">
{% if field|field_type == "booleanfield" %}
<div class="form-check"> <div class="form-check">
<label for="id_{{ field.name }}" class="form-check-label"> <label for="id_{{ field.name }}" class="form-check-label">
{% if field.errors %} {% if field.errors %}
@ -19,10 +33,7 @@
{{ field.label }} {{ field.label }}
</label> </label>
</div> </div>
</div> {% elif field|field_type == "datetimefield" or field|field_type == "datefield" %}
{% elif field|field_type == "datetimefield" or field|field_type == "datefield" %}
<label for="id_{{ field.name }}" class="col-sm-1 col-form-label">{{ field.label }}</label>
<div class="col-sm-11">
<div class="form-group"> <div class="form-group">
<div class="input-group date" id="datetimepicker_{{ field.name }}" data-target-input="nearest"> <div class="input-group date" id="datetimepicker_{{ field.name }}" data-target-input="nearest">
<div class="input-group-addon" data-target="#datetimepicker_{{ field.name }}" data-toggle="datetimepicker"> <div class="input-group-addon" data-target="#datetimepicker_{{ field.name }}" data-toggle="datetimepicker">
@ -35,23 +46,20 @@
{% endif %} {% endif %}
</div> </div>
</div> </div>
</div> {% else %}
{% else %}
<label for="id_{{ field.name }}" class="col-sm-1 col-form-label">{{ field.label }}</label>
<div class="col-sm-11">
{% if field.errors %} {% if field.errors %}
{{ field|add_class:"form-control is-invalid" }} {{ field|add_class:"form-control is-invalid" }}
{% else %} {% else %}
{{ field|add_class:"form-control" }} {{ field|add_class:"form-control" }}
{% endif %} {% endif %}
</div> {% endif %}
{% endif %} {% if field.help_text %}
{% if field.help_text %} <div class="help-block"><small>{{ field.help_text }}</small></div>
<p class="help-block"><small>{{ field.help_text }}</small></p> {% endif %}
{% endif %} {% if field.errors %}
{% if field.errors %} <div class="invalid-feedback">{% for error in field.errors %}{{ error }}{% endfor %}</div>
<p class="invalid-feedback">{% for error in field.errors %}{{ error }}{% endfor %}</p> {% endif %}
{% endif %} </div>
</div> </div>
{% endfor %} {% endfor %}
<button type="submit" class="btn btn-primary">Submit</button> <button type="submit" class="btn btn-primary">Submit</button>