From 8c0bd39f126ddd82136b708aa0ba6339bfeedcd4 Mon Sep 17 00:00:00 2001 From: Alec Perkins Date: Sun, 9 Sep 2012 15:17:44 -0400 Subject: Styling of POST, PUT forms. Add add_class filter. --- .../djangorestframework/css/bootstrap-tweaks.css | 13 ++++ .../static/djangorestframework/css/style.css | 6 +- .../templates/djangorestframework/base.html | 70 ++++++++++++---------- djangorestframework/templatetags/add_class.py | 40 +++++++++++++ 4 files changed, 95 insertions(+), 34 deletions(-) create mode 100644 djangorestframework/static/djangorestframework/css/bootstrap-tweaks.css create mode 100644 djangorestframework/templatetags/add_class.py diff --git a/djangorestframework/static/djangorestframework/css/bootstrap-tweaks.css b/djangorestframework/static/djangorestframework/css/bootstrap-tweaks.css new file mode 100644 index 00000000..f80b312a --- /dev/null +++ b/djangorestframework/static/djangorestframework/css/bootstrap-tweaks.css @@ -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; +} \ No newline at end of file diff --git a/djangorestframework/static/djangorestframework/css/style.css b/djangorestframework/static/djangorestframework/css/style.css index fbc4a008..5c44e93f 100644 --- a/djangorestframework/static/djangorestframework/css/style.css +++ b/djangorestframework/static/djangorestframework/css/style.css @@ -51,4 +51,8 @@ h2, h3 { #options-form { margin-right: 1em; -} \ No newline at end of file +} + +.errorlist { + margin-top: 0.5em; +} diff --git a/djangorestframework/templates/djangorestframework/base.html b/djangorestframework/templates/djangorestframework/base.html index a8ac83a8..ddf96adc 100644 --- a/djangorestframework/templates/djangorestframework/base.html +++ b/djangorestframework/templates/djangorestframework/base.html @@ -1,6 +1,7 @@ {% load url from future %} {% load urlize_quoted_links %} {% load add_query_param %} +{% load add_class %} {% load optional_login %} {% load static %} @@ -9,7 +10,8 @@ {% block bootstrap_theme %} - + + {% endblock %} {% block extrastyle %}{% endblock %} @@ -116,69 +118,71 @@ {{ content|urlize_quoted_links }}{% endautoescape %} - - {% comment %} - {# These are disabled since the forms don't work with 2.0.0 yet #} - {% if response.status_code != 403 %} {% if 'POST' in allowed_methods %} -
-
+ +

POST: {{ name }}

{% csrf_token %} {{ post_form.non_field_errors }} {% for field in post_form %} -
- {{ field.label_tag }} - {{ field }} - {{ field.help_text }} - {{ field.errors }} -
+
+ {{ field.label_tag|add_class:"control-label" }} +
+ {{ field }} + {{ field.help_text }} + {{ field.errors|add_class:"help-block" }} +
+
{% endfor %} - - +
+ +
- + {% endif %} {% if 'PUT' in allowed_methods and api_settings.FORM_METHOD_OVERRIDE %} -
-
+ +

PUT: {{ name }}

{% csrf_token %} {{ put_form.non_field_errors }} {% for field in put_form %} -
- {{ field.label_tag }} - {{ field }} - {{ field.help_text }} - {{ field.errors }} -
+
+ {{ field.label_tag|add_class:"control-label" }} +
+ {{ field }} + {{ field.help_text }} + {{ field.errors|add_class:"help-block" }} +
+
{% endfor %} - - +
+ +
- + {% endif %} {% if 'DELETE' in allowed_methods and api_settings.FORM_METHOD_OVERRIDE %} -
-
+ +

DELETE: {{ name }}

{% csrf_token %} - +
+ +
- + {% endif %} {% endif %} - - {% endcomment %} diff --git a/djangorestframework/templatetags/add_class.py b/djangorestframework/templatetags/add_class.py new file mode 100644 index 00000000..49929fc5 --- /dev/null +++ b/djangorestframework/templatetags/add_class.py @@ -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 \ No newline at end of file -- cgit v1.2.3