encode/django-rest-framework
1
1
Fork 0
mirror of https://github.com/encode/django-rest-framework.git synced 2025-02-03 13:14:30 +03:00
Code Issues Packages Projects Releases Wiki Activity

Styling of POST, PUT forms. Add add_class filter.

Browse Source
This commit is contained in:
Alec Perkins 2012-09-09 15:17:44 -04:00
parent 4500103337
commit 8c0bd39f12
4 changed files with 95 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
djangorestframework/static/djangorestframework/css/bootstrap-tweaks.css vendored Normal file
View File

@ -0,0 +1,13 @@
/*
This CSS file contains some tweaks specific to the included Bootstrap theme.
It's separate from `style.css` so that it can be easily overridden by replacing
a single block in the template.
*/
.form-actions {
background: transparent;
border-top-color: transparent;
}

4
djangorestframework/static/djangorestframework/css/style.css
View File

@ -52,3 +52,7 @@ h2, h3 {
#options-form { #options-form {
margin-right: 1em; margin-right: 1em;
} }
.errorlist {
margin-top: 0.5em;
}

70
djangorestframework/templates/djangorestframework/base.html
View File

@ -1,6 +1,7 @@
{% load url from future %} {% load url from future %}
{% load urlize_quoted_links %} {% load urlize_quoted_links %}
{% load add_query_param %} {% load add_query_param %}
{% load add_class %}
{% load optional_login %} {% load optional_login %}
{% load static %} {% load static %}
<!DOCTYPE html> <!DOCTYPE html>
@ -9,7 +10,8 @@
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
{% block bootstrap_theme %} {% block bootstrap_theme %}
<link rel="stylesheet" type="text/css" href='{% get_static_prefix %}djangorestframework/css/bootstrap.min.css'/> <link rel="stylesheet" type="text/css" href="{% get_static_prefix %}djangorestframework/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="{% get_static_prefix %}djangorestframework/css/bootstrap-tweaks.css"/>
{% endblock %} {% endblock %}
<link rel="stylesheet" type="text/css" href='{% get_static_prefix %}djangorestframework/css/style.css'/> <link rel="stylesheet" type="text/css" href='{% get_static_prefix %}djangorestframework/css/style.css'/>
{% block extrastyle %}{% endblock %} {% block extrastyle %}{% endblock %}
@ -116,69 +118,71 @@
{{ content|urlize_quoted_links }}</pre>{% endautoescape %} {{ content|urlize_quoted_links }}</pre>{% endautoescape %}
</div> </div>
{% comment %}
{# These are disabled since the forms don't work with 2.0.0 yet #}
{% if response.status_code != 403 %} {% if response.status_code != 403 %}
{% if 'POST' in allowed_methods %} {% if 'POST' in allowed_methods %}
<form action="{{ request.get_full_path }}" method="POST" {% if post_form.is_multipart %}enctype="multipart/form-data"{% endif %}> <form action="{{ request.get_full_path }}" method="POST" {% if post_form.is_multipart %}enctype="multipart/form-data"{% endif %} class="form-horizontal">
<fieldset class='module aligned'> <fieldset>
<h2>POST: {{ name }}</h2> <h2>POST: {{ name }}</h2>
{% csrf_token %} {% csrf_token %}
{{ post_form.non_field_errors }} {{ post_form.non_field_errors }}
{% for field in post_form %} {% for field in post_form %}
<div class='form-row'> <div class="control-group {% if field.errors %}error{% endif %}">
{{ field.label_tag }} {{ field.label_tag|add_class:"control-label" }}
{{ field }} <div class="controls">
<span class='help'>{{ field.help_text }}</span> {{ field }}
{{ field.errors }} <span class="help-inline">{{ field.help_text }}</span>
</div> {{ field.errors|add_class:"help-block" }}
</div>
</div>
{% endfor %} {% endfor %}
<div class="form-actions">
<button class="btn btn-primary" title="Do a POST request on the {{ name }} resource">POST</button> <button class="btn btn-primary" title="Do a POST request on the {{ name }} resource">POST</button>
</div>
</fieldset> </fieldset>
</form> </form>
{% endif %} {% endif %}
{% if 'PUT' in allowed_methods and api_settings.FORM_METHOD_OVERRIDE %} {% if 'PUT' in allowed_methods and api_settings.FORM_METHOD_OVERRIDE %}
<form action="{{ request.get_full_path }}" method="POST" {% if put_form.is_multipart %}enctype="multipart/form-data"{% endif %}> <form action="{{ request.get_full_path }}" method="POST" {% if put_form.is_multipart %}enctype="multipart/form-data"{% endif %} class="form-horizontal">
<fieldset class='module aligned'> <fieldset>
<h2>PUT: {{ name }}</h2> <h2>PUT: {{ name }}</h2>
<input type="hidden" name="{{ api_settings.FORM_METHOD_OVERRIDE }}" value="PUT" /> <input type="hidden" name="{{ api_settings.FORM_METHOD_OVERRIDE }}" value="PUT" />
{% csrf_token %} {% csrf_token %}
{{ put_form.non_field_errors }} {{ put_form.non_field_errors }}
{% for field in put_form %} {% for field in put_form %}
<div class='form-row'> <div class="control-group {% if field.errors %}error{% endif %}">
{{ field.label_tag }} {{ field.label_tag|add_class:"control-label" }}
{{ field }} <div class="controls">
<span class='help'>{{ field.help_text }}</span> {{ field }}
{{ field.errors }} <span class='help-inline'>{{ field.help_text }}</span>
</div> {{ field.errors|add_class:"help-block" }}
</div>
</div>
{% endfor %} {% endfor %}
<div class="form-actions">
<button class="btn btn-primary js-tooltip" title="Do a PUT request on the {{ name }} resource">PUT</button> <button class="btn btn-primary js-tooltip" title="Do a PUT request on the {{ name }} resource">PUT</button>
</div>
</fieldset> </fieldset>
</form> </form>
{% endif %} {% endif %}
{% if 'DELETE' in allowed_methods and api_settings.FORM_METHOD_OVERRIDE %} {% if 'DELETE' in allowed_methods and api_settings.FORM_METHOD_OVERRIDE %}
<form action="{{ request.get_full_path }}" method="POST"> <form action="{{ request.get_full_path }}" method="POST" class="form-horizontal">
<fieldset class='module aligned'> <fieldset>
<h2>DELETE: {{ name }}</h2> <h2>DELETE: {{ name }}</h2>
{% csrf_token %} {% csrf_token %}
<input type="hidden" name="{{ api_settings.FORM_METHOD_OVERRIDE }}" value="DELETE" /> <input type="hidden" name="{{ api_settings.FORM_METHOD_OVERRIDE }}" value="DELETE" />
<button class="btn btn-danger js-tooltip" title="Do a DELETE request on the {{ name }} resource">DELETE</button> <div class="form-actions">
<button class="btn btn-danger js-tooltip" title="Do a DELETE request on the {{ name }} resource">DELETE</button>
</div>
</fieldset> </fieldset>
</form> </form>
{% endif %} {% endif %}
{% endif %} {% endif %}
{% endcomment %}
</div> </div>
<!-- END content-main --> <!-- END content-main -->

40
djangorestframework/templatetags/add_class.py Normal file
View File

@ -0,0 +1,40 @@
"""
From http://stackoverflow.com/questions/4124220/django-adding-css-classes-when-rendering-form-fields-in-a-template
The add_class filter allows for inserting classes into template variables that
contain HTML tags, useful for modifying forms without needing to change the
Form objects.
To use:
{{ field.label_tag|add_class:"control-label" }}
will insert the class `controls-label` into the label tag generated by a form.
In the case of Django REST Framework, the filter is used to add Bootstrap-specific
classes to the forms, while still allowing non-Bootstrap customization of the
browsable API.
"""
import re
from django.utils.safestring import mark_safe
from django import template
register = template.Library()
class_re = re.compile(r'(?<=class=["\'])(.*)(?=["\'])')
@register.filter
def add_class(value, css_class):
string = unicode(value)
match = class_re.search(string)
if match:
m = re.search(r'^%s$|^%s\s|\s%s\s|\s%s$' % (css_class, css_class,
css_class, css_class),
match.group(1))
print match.group(1)
if not m:
return mark_safe(class_re.sub(match.group(1) + " " + css_class,
string))
else:
return mark_safe(string.replace('>', ' class="%s">' % css_class, 1))
return value