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;
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;
}

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

@ -3,12 +3,26 @@
<div class="container-fluid">
<form role="form" method="post">
{% 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 %}
<div class="d-none">{{ field|field_type }}</div>
<div class="form-group row">
{% if field|field_type == "booleanfield" %}
<div class="col-sm-1 d-none d-sm-block">&nbsp;</div>
<label for="id_{{ field.name }}" class="col-sm-1 col-form-label">
{% if field|field_type != "booleanfield" %}
{{ field.label }}
{% endif %}
</label>
<div class="col-sm-11">
{% if field|field_type == "booleanfield" %}
<div class="form-check">
<label for="id_{{ field.name }}" class="form-check-label">
{% if field.errors %}
@ -19,10 +33,7 @@
{{ field.label }}
</label>
</div>
</div>
{% 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="input-group date" id="datetimepicker_{{ field.name }}" data-target-input="nearest">
<div class="input-group-addon" data-target="#datetimepicker_{{ field.name }}" data-toggle="datetimepicker">
@ -35,24 +46,21 @@
{% endif %}
</div>
</div>
</div>
{% else %}
<label for="id_{{ field.name }}" class="col-sm-1 col-form-label">{{ field.label }}</label>
<div class="col-sm-11">
{% if field.errors %}
{{ field|add_class:"form-control is-invalid" }}
{% else %}
{{ field|add_class:"form-control" }}
{% endif %}
</div>
{% endif %}
{% if field.help_text %}
<p class="help-block"><small>{{ field.help_text }}</small></p>
<div class="help-block"><small>{{ field.help_text }}</small></div>
{% endif %}
{% if field.errors %}
<p class="invalid-feedback">{% for error in field.errors %}{{ error }}{% endfor %}</p>
<div class="invalid-feedback">{% for error in field.errors %}{{ error }}{% endfor %}</div>
{% endif %}
</div>
</div>
{% endfor %}
<button type="submit" class="btn btn-primary">Submit</button>
</form>