Moar form styling

This commit is contained in:
Tom Christie 2014-10-15 13:35:12 +01:00
parent cc1c423255
commit 36fbc7678c
27 changed files with 145 additions and 61 deletions

View File

@ -59,7 +59,7 @@
<ul class="breadcrumb"> <ul class="breadcrumb">
{% for breadcrumb_name, breadcrumb_url in breadcrumblist %} {% for breadcrumb_name, breadcrumb_url in breadcrumblist %}
{% if forloop.last %} {% if forloop.last %}
<li class="active">{{ breadcrumb_name }}</li> <li class="active"><a href="{{ breadcrumb_url }}">{{ breadcrumb_name }}</a></li>
{% else %} {% else %}
<li><a href="{{ breadcrumb_url }}">{{ breadcrumb_name }}</a></li> <li><a href="{{ breadcrumb_url }}">{{ breadcrumb_name }}</a></li>
{% endif %} {% endif %}

View File

@ -1,4 +1,4 @@
<div class="form-group"> <div class="form-group {% if field.errors %}has-error{% endif %}">
<div class="col-sm-offset-2 col-sm-10"> <div class="col-sm-offset-2 col-sm-10">
<div class="checkbox"> <div class="checkbox">
<label> <label>
@ -6,5 +6,11 @@
{% if field.label %}{{ field.label }}{% endif %} {% if field.label %}{{ field.label }}{% endif %}
</label> </label>
</div> </div>
{% 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 }}</span>
{% endif %}
</div> </div>
</div> </div>

View File

@ -1,9 +1,9 @@
<div class="form-group"> <div class="form-group">
{% if field.label %} {% if field.label %}
<label class="col-sm-2 control-label {% if field.style.hide_label %}sr-only{% endif %}">{{ field.label }}</label> <label class="col-sm-2 control-label {% if style.hide_label %}sr-only{% endif %}">{{ field.label }}</label>
{% endif %} {% endif %}
<div class="col-sm-10"> <div class="col-sm-10">
{% if field.style.inline %} {% if style.inline %}
{% for key, text in field.choices.items %} {% for key, text in field.choices.items %}
<label class="checkbox-inline"> <label class="checkbox-inline">
<input type="checkbox" name="{{ field.name }}" value="{{ key }}" {% if key in field.value %}checked{% endif %}> <input type="checkbox" name="{{ field.name }}" value="{{ key }}" {% if key in field.value %}checked{% endif %}>
@ -20,5 +20,11 @@
</div> </div>
{% endfor %} {% endfor %}
{% endif %} {% 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 }}</span>
{% endif %}
</div> </div>
</div> </div>

View File

@ -2,10 +2,10 @@
<fieldset> <fieldset>
{% if field.label %} {% if field.label %}
<div class="form-group" style="border-bottom: 1px solid #e5e5e5"> <div class="form-group" style="border-bottom: 1px solid #e5e5e5">
<legend class="control-label col-sm-2 {% if field.style.hide_label %}sr-only{% endif %}" style="border-bottom: 0">{{ field.label }}</legend> <legend class="control-label col-sm-2 {% if style.hide_label %}sr-only{% endif %}" style="border-bottom: 0">{{ field.label }}</legend>
</div> </div>
{% endif %} {% endif %}
{% for nested_field in field %} {% for nested_field in field %}
{% render_field nested_field layout=layout renderer=renderer %} {% render_field nested_field template_pack=template_pack renderer=renderer %}
{% endfor %} {% endfor %}
</fieldset> </fieldset>

View File

@ -1,9 +1,14 @@
<div class="form-group"> <div class="form-group {% if field.errors %}has-error{% endif %}">
{% if field.label %} {% if field.label %}
<label class="col-sm-2 control-label {% if field.style.hide_label %}sr-only{% endif %}">{{ field.label }}</label> <label class="col-sm-2 control-label {% if style.hide_label %}sr-only{% endif %}">{{ field.label }}</label>
{% endif %} {% endif %}
<div class="col-sm-10"> <div class="col-sm-10">
<input name="{{ field.name }}" type="{{ input_type }}" class="form-control" {% if field.style.placeholder %}placeholder="{{ field.style.placeholder }}"{% endif %} {% if field.value %}value="{{ field.value }}"{% endif %}> <input name="{{ field.name }}" class="form-control" type="{{ style.input_type }}" novalidate {% if style.placeholder %}placeholder="{{ style.placeholder }}"{% endif %} {% if field.value %}value="{{ field.value }}"{% endif %}>
{% if field.help_text %}<p class="help-block">{{ field.help_text }}</p>{% 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 }}</span>
{% endif %}
</div> </div>
</div> </div>

View File

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

View File

@ -1,9 +1,9 @@
<div class="form-group"> <div class="form-group">
{% if field.label %} {% if field.label %}
<label class="col-sm-2 control-label {% if field.style.hide_label %}sr-only{% endif %}">{{ field.label }}</label> <label class="col-sm-2 control-label {% if style.hide_label %}sr-only{% endif %}">{{ field.label }}</label>
{% endif %} {% endif %}
<div class="col-sm-10"> <div class="col-sm-10">
{% if field.style.inline %} {% if style.inline %}
{% for key, text in field.choices.items %} {% for key, text in field.choices.items %}
<label class="radio-inline"> <label class="radio-inline">
<input type="radio" name="{{ field.name }}" value="{{ key }}" {% if key == field.value %}checked{% endif %}> <input type="radio" name="{{ field.name }}" value="{{ key }}" {% if key == field.value %}checked{% endif %}>
@ -20,5 +20,11 @@
</div> </div>
{% endfor %} {% endfor %}
{% endif %} {% 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 }}</span>
{% endif %}
</div> </div>
</div> </div>

View File

@ -1,6 +1,6 @@
<div class="form-group"> <div class="form-group">
{% if field.label %} {% if field.label %}
<label class="col-sm-2 control-label {% if field.style.hide_label %}sr-only{% endif %}">{{ field.label }}</label> <label class="col-sm-2 control-label {% if style.hide_label %}sr-only{% endif %}">{{ field.label }}</label>
{% endif %} {% endif %}
<div class="col-sm-10"> <div class="col-sm-10">
<select class="form-control" name="{{ field.name }}"> <select class="form-control" name="{{ field.name }}">
@ -8,5 +8,11 @@
<option value="{{ key }}" {% if key == field.value %}selected{% endif %}>{{ text }}</option> <option value="{{ key }}" {% if key == field.value %}selected{% endif %}>{{ text }}</option>
{% endfor %} {% endfor %}
</select> </select>
{% 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 }}</span>
{% endif %}
</div> </div>
</div> </div>

View File

@ -1,6 +1,6 @@
<div class="form-group"> <div class="form-group">
{% if field.label %} {% if field.label %}
<label class="col-sm-2 control-label {% if field.style.hide_label %}sr-only{% endif %}">{{ field.label }}</label> <label class="col-sm-2 control-label {% if style.hide_label %}sr-only{% endif %}">{{ field.label }}</label>
{% endif %} {% endif %}
<div class="col-sm-10"> <div class="col-sm-10">
<select multiple class="form-control" name="{{ field.name }}"> <select multiple class="form-control" name="{{ field.name }}">
@ -8,5 +8,11 @@
<option value="{{ key }}" {% if key in field.value %}selected{% endif %}>{{ text }}</option> <option value="{{ key }}" {% if key in field.value %}selected{% endif %}>{{ text }}</option>
{% endfor %} {% endfor %}
</select> </select>
{% 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 }}</span>
{% endif %}
</div> </div>
</div> </div>

View File

@ -1,9 +1,14 @@
<div class="form-group"> <div class="form-group {% if field.errors %}has-error{% endif %}">
{% if field.label %} {% if field.label %}
<label class="col-sm-2 control-label {% if field.style.hide_label %}sr-only{% endif %}">{{ field.label }}</label> <label class="col-sm-2 control-label {% if style.hide_label %}sr-only{% endif %}">{{ field.label }}</label>
{% endif %} {% endif %}
<div class="col-sm-10"> <div class="col-sm-10">
<textarea name="{{ field.name }}" class="form-control" {% if field.style.placeholder %}placeholder="{{ field.style.placeholder }}"{% endif %} {% if field.style.rows %}rows="{{ field.style.rows }}"{% endif %}>{% if field.value %}{{ field.value }}{% endif %}</textarea> <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>
{% if field.help_text %}<p class="help-block">{{ field.help_text }}</p>{% 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 }}</span>
{% endif %}
</div> </div>
</div> </div>

View File

@ -1,6 +1,8 @@
<div class="checkbox"> <div class="form-group {% if field.errors %}has-error{% endif %}">
<div class="checkbox">
<label> <label>
<input type="checkbox" name="{{ field.name }}" value="true" {% if field.value %}checked{% endif %}> <input type="checkbox" name="{{ field.name }}" value="true" {% if field.value %}checked{% endif %}>
{% if field.label %}{{ field.label }}{% endif %} {% if field.label %}{{ field.label }}{% endif %}
</label> </label>
</div>
</div> </div>

View File

@ -1,4 +1,4 @@
<div class="form-group"> <div class="form-group {% if field.errors %}has-error{% endif %}">
{% if field.label %} {% if field.label %}
<label class="sr-only">{{ field.label }}</label> <label class="sr-only">{{ field.label }}</label>
{% endif %} {% endif %}

View File

@ -1,4 +1,4 @@
{% load rest_framework %} {% load rest_framework %}
{% for nested_field in field %} {% for nested_field in field %}
{% render_field nested_field layout=layout renderer=renderer %} {% render_field nested_field template_pack=template_pack renderer=renderer %}
{% endfor %} {% endfor %}

View File

@ -1,6 +1,6 @@
<div class="form-group"> <div class="form-group {% if field.errors %}has-error{% endif %}">
{% if field.label %} {% if field.label %}
<label class="sr-only">{{ field.label }}</label> <label class="sr-only">{{ field.label }}</label>
{% endif %} {% endif %}
<input name="{{ field.name }}" type="{{ input_type }}" class="form-control" {% if field.style.placeholder %}placeholder="{{ field.style.placeholder }}"{% endif %} {% if field.value %}value="{{ field.value }}"{% endif %}> <input name="{{ field.name }}" class="form-control" type="{{ style.input_type }}" novalidate {% if style.placeholder %}placeholder="{{ style.placeholder }}"{% endif %} {% if field.value %}value="{{ field.value }}"{% endif %}>
</div> </div>

View File

@ -1,4 +1,4 @@
<div class="form-group"> <div class="form-group {% if field.errors %}has-error{% endif %}">
{% if field.label %} {% if field.label %}
<label class="sr-only">{{ field.label }}</label> <label class="sr-only">{{ field.label }}</label>
{% endif %} {% endif %}

View File

@ -1,4 +1,4 @@
<div class="form-group"> <div class="form-group {% if field.errors %}has-error{% endif %}">
{% if field.label %} {% if field.label %}
<label class="sr-only">{{ field.label }}</label> <label class="sr-only">{{ field.label }}</label>
{% endif %} {% endif %}

View File

@ -1,4 +1,4 @@
<div class="form-group"> <div class="form-group {% if field.errors %}has-error{% endif %}">
{% if field.label %} {% if field.label %}
<label class="sr-only">{{ field.label }}</label> <label class="sr-only">{{ field.label }}</label>
{% endif %} {% endif %}

View File

@ -1,6 +1,6 @@
<div class="form-group"> <div class="form-group {% if field.errors %}has-error{% endif %}">
{% if field.label %} {% if field.label %}
<label class="sr-only">{{ field.label }}</label> <label class="sr-only">{{ field.label }}</label>
{% endif %} {% endif %}
<input name="{{ field.name }}" type="{{ input_type }}" class="form-control" {% if field.style.placeholder %}placeholder="{{ field.style.placeholder }}"{% endif %} {% if field.value %}value="{{ field.value }}"{% endif %}> <input name="{{ field.name }}" type="text" class="form-control" {% if style.placeholder %}placeholder="{{ style.placeholder }}"{% endif %} {% if field.value %}value="{{ field.value }}"{% endif %}>
</div> </div>

View File

@ -1,6 +1,14 @@
<div class="checkbox"> <div class="form-group {% if field.errors %}has-error{% endif %}">
<div class="checkbox">
<label> <label>
<input type="checkbox" name="{{ field.name }}" value="true" {% if value %}checked{% endif %}> <input type="checkbox" name="{{ field.name }}" value="true" {% if value %}checked{% endif %}>
{% if field.label %}{{ field.label }}{% endif %} {% if field.label %}{{ field.label }}{% endif %}
</label> </label>
</div>
{% 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 }}</span>
{% endif %}
</div> </div>

View File

@ -1,8 +1,8 @@
<div class="form-group"> <div class="form-group {% if field.errors %}has-error{% endif %}">
{% if field.label %} {% if field.label %}
<label {% if field.style.hide_label %}class="sr-only"{% endif %}>{{ field.label }}</label> <label {% if style.hide_label %}class="sr-only"{% endif %}>{{ field.label }}</label>
{% endif %} {% endif %}
{% if field.style.inline %} {% if style.inline %}
<div> <div>
{% for key, text in field.choices.items %} {% for key, text in field.choices.items %}
<label class="checkbox-inline"> <label class="checkbox-inline">
@ -21,4 +21,10 @@
</div> </div>
{% endfor %} {% endfor %}
{% endif %} {% 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 }}</span>
{% endif %}
</div> </div>

View File

@ -1,7 +1,7 @@
{% load rest_framework %} {% load rest_framework %}
<fieldset> <fieldset>
{% if field.label %}<legend {% if field.style.hide_label %}class="sr-only"{% endif %}>{{ field.label }}</legend>{% endif %} {% if field.label %}<legend {% if style.hide_label %}class="sr-only"{% endif %}>{{ field.label }}</legend>{% endif %}
{% for nested_field in field %} {% for nested_field in field %}
{% render_field nested_field layout=layout renderer=renderer %} {% render_field nested_field template_pack=template_pack renderer=renderer %}
{% endfor %} {% endfor %}
</fieldset> </fieldset>

View File

@ -1,7 +1,12 @@
<div class="form-group"> <div class="form-group {% if field.errors %}has-error{% endif %}">
{% if field.label %} {% if field.label %}
<label {% if field.style.hide_label %}class="sr-only"{% endif %}>{{ field.label }}</label> <label {% if style.hide_label %}class="sr-only"{% endif %}>{{ field.label }}</label>
{% endif %}
<input name="{{ field.name }}" class="form-control" type="{{ style.input_type }}" novalidate {% if style.placeholder %}placeholder="{{ style.placeholder }}"{% endif %} {% if field.value %}value="{{ field.value }}"{% 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 }}</span>
{% endif %} {% endif %}
<input name="{{ field.name }}" type="{{ input_type }}" class="form-control" {% if field.style.placeholder %}placeholder="{{ field.style.placeholder }}"{% endif %} {% if field.style.rows %}rows="{{ field.style.rows }}"{% endif %} {% if field.value %}value="{{ field.value }}"{% endif %}>
{% if field.help_text %}<p class="help-block">{{ field.help_text }}</p>{% endif %}
</div> </div>

View File

@ -1,6 +1,6 @@
<fieldset> <fieldset>
{% if field.label %}<legend {% if field.style.hide_label %}class="sr-only"{% endif %}>{{ field.label }}</legend>{% endif %} {% if field.label %}<legend {% if style.hide_label %}class="sr-only"{% endif %}>{{ field.label }}</legend>{% endif %}
<!-- {% if field.label %}<legend {% if field.style.hide_label %}class="sr-only"{% endif %}>{{ field.label }}</legend>{% endif %} <!-- {% if field.label %}<legend {% if style.hide_label %}class="sr-only"{% endif %}>{{ field.label }}</legend>{% endif %}
{% for field_item in field.value.field_items.values() %} {% for field_item in field.value.field_items.values() %}
{{ renderer.render_field(field_item, layout=layout) }} {{ renderer.render_field(field_item, layout=layout) }}
{% endfor %} --> {% endfor %} -->

View File

@ -1,8 +1,8 @@
<div class="form-group"> <div class="form-group {% if field.errors %}has-error{% endif %}">
{% if field.label %} {% if field.label %}
<label {% if field.style.hide_label %}class="sr-only"{% endif %}>{{ field.label }}</label> <label {% if style.hide_label %}class="sr-only"{% endif %}>{{ field.label }}</label>
{% endif %} {% endif %}
{% if field.style.inline %} {% if style.inline %}
<div> <div>
{% for key, text in field.choices.items %} {% for key, text in field.choices.items %}
<label class="radio-inline"> <label class="radio-inline">
@ -21,4 +21,10 @@
</div> </div>
{% endfor %} {% endfor %}
{% endif %} {% 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 }}</span>
{% endif %}
</div> </div>

View File

@ -1,10 +1,16 @@
<div class="form-group"> <div class="form-group {% if field.errors %}has-error{% endif %}">
{% if field.label %} {% if field.label %}
<label {% if field.style.hide_label %}class="sr-only"{% endif %}>{{ field.label }}</label> <label {% if style.hide_label %}class="sr-only"{% endif %}>{{ field.label }}</label>
{% endif %} {% endif %}
<select class="form-control" name="{{ field.name }}"> <select class="form-control" name="{{ field.name }}">
{% for key, text in field.choices.items %} {% for key, text in field.choices.items %}
<option value="{{ key }}" {% if key == field.value %}selected{% endif %}>{{ text }}</option> <option value="{{ key }}" {% if key == field.value %}selected{% endif %}>{{ text }}</option>
{% endfor %} {% endfor %}
</select> </select>
{% 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 }}</span>
{% endif %}
</div> </div>

View File

@ -1,10 +1,16 @@
<div class="form-group"> <div class="form-group {% if field.errors %}has-error{% endif %}">
{% if field.label %} {% if field.label %}
<label {% if field.style.hide_label %}class="sr-only"{% endif %}>{{ field.label }}</label> <label {% if style.hide_label %}class="sr-only"{% endif %}>{{ field.label }}</label>
{% endif %} {% endif %}
<select multiple class="form-control" name="{{ field.name }}"> <select multiple class="form-control" name="{{ field.name }}">
{% for key, text in field.choices.items %} {% for key, text in field.choices.items %}
<option value="{{ key }}" {% if key in field.value %}selected{% endif %}>{{ text }}</option> <option value="{{ key }}" {% if key in field.value %}selected{% endif %}>{{ text }}</option>
{% endfor %} {% endfor %}
</select> </select>
{% 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 }}</span>
{% endif %}
</div> </div>

View File

@ -1,7 +1,12 @@
<div class="form-group"> <div class="form-group {% if field.errors %}has-error{% endif %}">
{% if field.label %} {% if field.label %}
<label {% if field.style.hide_label %}class="sr-only"{% endif %}>{{ field.label }}</label> <label {% if style.hide_label %}class="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>
{% 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 }}</span>
{% endif %} {% endif %}
<textarea name="{{ field.name }}" class="form-control" {% if field.style.placeholder %}placeholder="{{ field.style.placeholder }}"{% endif %} {% if field.style.rows %}rows="{{ field.style.rows }}"{% endif %}>{% if field.value %}{{ field.value }}{% endif %}</textarea>
{% if field.help_text %}<p class="help-block">{{ field.help_text }}</p>{% endif %}
</div> </div>