Added uni_form to example site.

REQUIREMENTS

@@ -2,3 +2,4 @@ pip==0.3.1
 -e hg+http://bitbucket.org/ned/coveragepy/@483a54854358#egg=coverage
 -e svn+http://code.djangoproject.com/svn/django/tags/releases/1.1#egg=django
 -e hg+http://bitbucket.org/birkenfeld/sphinx#egg=sphinx
+-e git://github.com/pydanny/django-uni-form.git#egg=uni_form

examples/complaints/templates/complaints/edit.html

@@ -1,8 +1,10 @@
 {% extends base_template %}
 
+{% load uni_form %}
+
 {% block pluggable_content %}
-<form method="post" action=".">
-    {{ form.as_p }}
+<form method="post" action="." class="uniForm">
+    {{ form|as_uni_form }}
     <input type="submit" value="Complain" />
 </form>
 {% endblock %}

examples/complaints/templates/complaints/index.html

@@ -1,6 +1,7 @@
 {% extends base_template %}
 
 {% load pluggables %}
+{% load uni_form %}
 
 {% block pluggable_content %}
 
@@ -17,9 +18,9 @@ <h3>Complaints</h3>
 {% endfor %}
 </ul>
 
-<form action="{% pluggable_url complaints_create %}" method="post">
+<form action="{% pluggable_url complaints_create %}" method="post" class="uniForm">
     <h4> Create a Complaint</h4>
-    {{ form.as_p }}
+    {{ form|as_uni_form }}
     <input type="submit" value="Complain" />
 </form>
 {% endblock %}

examples/media/uni_form/uni-form-generic.css

@@ -0,0 +1,136 @@
+/* Uni-Form by Dragan Babic [Superawesome Industries]  - http: //sprawsm.com/uni-form/ */ 
+/* Some rights reserved - http: //creativecommons.org/licenses/by-sa/2.5/ */
+/* Do not edit this file directly, make your changes to uni-form.css in the same folder */
+
+/* ------------------------------------------------------------------------------ */
+
+.uniForm{ margin: 0; padding: 0; position: relative; z-index: 1; } /* reset stuff */
+
+  /* Some generals and more resets */
+  .uniForm fieldset{ border: none; margin: 0; padding: 0; position: relative; }
+    .uniForm fieldset legend{ margin: 0; padding: 0; }
+
+    /* This is the main unit that contains our form elements */
+    .uniForm .ctrlHolder,
+    .uniForm .buttonHolder{ margin: 0; padding: 0; clear: both; }
+
+    /* Clear all floats */ 
+    .uniForm:after,
+      .uniForm .buttonHolder:after, 
+      .uniForm .ctrlHolder:after, 
+        .uniForm .ctrlHolder .multiField:after,
+          .uniForm .inlineLabel:after{ content: "."; display: block; height: 0; line-height: 0; font-size: 0; clear: both; min-height: 0; visibility: hidden; }
+
+    /* A class to be used on a label that contains a checkbox or a radio button */
+    .uniForm .inlineLabel,
+    .uniForm .inlineLabels .inlineLabel,
+    .uniForm .blockLabels .inlineLabel{ width: auto; float: none; margin: 0; display: block; }
+      /* IE shows borders & padding on checkboxes and radio buttons if they are declared on an input element, remove them */
+      /* Legacy/Inheritance fix */
+      .uniForm .inlineLabel input,
+      .uniForm .inlineLabels .inlineLabel input,
+      .uniForm .blockLabels .inlineLabel input{ border: none; padding: 0; margin: 0; }
+
+/* ------------------------------------------------------------------------------ */
+
+    /* Styles for form controls where labels are above the input elements */
+    /* Set the class of the parent (preferably to a fieldset) to .blockLabels */
+
+      .uniForm label,
+      .uniForm .label,
+      .uniForm .blockLabels label,
+      .uniForm .blockLabels .label{ display: block; float: none; padding: 0; line-height: 100%; width: auto; }
+
+      /* Float the input elements */
+      .uniForm .textInput,
+      .uniForm .blockLabels .textInput,
+      .uniForm .blockLabels .fileUpload,
+      .uniForm .selectInput,
+      .uniForm .blockLabels .selectInput,
+      .uniForm .blockLabels select,
+      .uniForm textarea,
+      .uniForm .blockLabels textarea{ float: left; }
+
+      /* Postition the hints */
+      .uniForm .formHint,
+      .uniForm .blockLabels .formHint{ float: right; margin: 0; clear: none; }
+
+      /* Position the elements inside combo boxes (multiple selects/checkboxes/radio buttons per unit) */
+      .uniForm .multiField,
+      .uniForm .blockLabels .multiField{ width: auto; float: left; }
+        .uniForm .multiField .inlineLabel,
+        .uniForm .blockLabels .multiField .inlineLabel{ display: block; margin: 0 0 .5em 0; }
+        .uniForm .multiField .blockLabel,
+        .uniForm .blockLabels .multiField .blockLabel{ float: left; width: auto; margin: 0; }
+        .uniForm .multiField .blockLabel .textInput,
+        .uniForm .multiField .blockLabel .selectInput,
+        .uniForm .multiField .blockLabel select,
+        .uniForm .blockLabels .multiField .blockLabel .textInput,
+        .uniForm .blockLabels .multiField .blockLabel .selectInput,
+        .uniForm .blockLabels .multiField .blockLabel select{ width: 100%; margin: 0; }
+
+/* ------------------------------------------------------------------------------ */
+
+    /* Styles for form controls where labels are in line with the input elements */
+    /* Set the class of the parent (preferably to a fieldset) to .inlineLabels */
+        .uniForm .inlineLabels label,
+        .uniForm .inlineLabels .label{ float: left; margin: 0; padding: 0; line-height: 100%; position: relative; }
+
+        /* Float the input elements */
+        .uniForm .inlineLabels .textInput,
+        .uniForm .inlineLabels .fileUpload,        
+        .uniForm .inlineLabels .selectInput,
+        .uniForm .inlineLabels select,
+        .uniForm .inlineLabels textarea{ float: left; }
+
+      /* Postition the hints */
+      .uniForm .inlineLabels .formHint{ clear: both; float: none; }
+      .uniForm .inlineLabels .multiField{ float: left; }
+      .uniForm .inlineLabels .multiField .inlineLabel{}
+      .uniForm .inlineLabels .multiField .blockLabel{}
+        .uniForm .inlineLabels .multiField .blockLabel .textInput,
+        .uniForm .inlineLabels .multiField .blockLabel .selectInput,
+        .uniForm .inlineLabels .multiField .blockLabel select{ display: block; width: 100%; float: none; }
+        .uniForm .inlineLabels .multiField select{ float: left; }
+
+/* ------------------------------------------------------------------------------ */
+
+    /* Required fields asterisk styling for .blockLabels */
+    .uniForm label em,
+    .uniForm .label em,
+    .uniForm .blockLabels label em,
+    .uniForm .blockLabels .label em{ position: absolute; left: -7px; }
+
+    /* Required fields asterisk styling for .inlineLabels */
+    .uniForm .inlineLabels label em,
+    .uniForm .inlineLabels .label em{ display: block; position: absolute; left: auto; right: 0; font-style: normal; font-weight: bold; }
+    .uniForm .inlineLabel em{ position: absolute; left: 7px; }
+
+/* ------------------------------------------------------------------------------ */
+
+    /* Messages */
+    .uniForm #errorMsg,
+    .uniForm .error{
+    }
+      .uniForm #errorMsg dt,
+      .uniForm #errorMsg h3{
+      }
+      .uniForm #errorMsg dd{
+      }
+        .uniForm #errorMsg ol{
+        }
+          .uniForm #errorMsg ol li{
+          }
+      .uniForm .errorField{
+      }
+
+    .uniForm #OKMsg{
+    }
+
+/* ------------------------------------------------------------------------------ */
+
+    /* Columns */
+
+    .uniForm .col{ float: left; }
+    .uniForm .col.first{}
+    .uniForm .col.last{}

examples/media/uni_form/uni-form.css

@@ -0,0 +1,118 @@
+@import "uni-form-generic.css";
+/* Keep in mind that wherever you see 'Required property' it means that the property must exist */
+
+/* ------------------------------------------------------------------------------ */
+
+  /* Generals */
+  .uniForm fieldset{}
+    .uniForm fieldset legend{ color: #333; font-weight: bold; font-size: 100%; margin: 0; padding: 1.5em 0; }
+
+    /* This is the main unit that contains our form elements */
+    .uniForm .ctrlHolder{ padding: 7px; border-bottom: 1px solid #dfdfdf; }
+
+    .uniForm .buttonHolder{ text-align: right; }
+      .uniForm .resetButton{ float: left; }
+      .uniForm .primaryAction{ font-weight: bold; }
+
+    /* This class gets added to div.ctrlHolder to highlight the row */
+    .uniForm .focused{ background: #fffcdf; }
+
+      /* .inlineLabel is used for inputs within labels - checkboxes and radio buttons */
+      .uniForm .inlineLabel input,
+      .uniForm .inlineLabels .inlineLabel input,
+      .uniForm .blockLabels .inlineLabel input{ float: left; margin: 0 .4em 0 0; }
+        .uniForm .inlineLabel span{ float: left; width: 90%; }
+
+/* ------------------------------------------------------------------------------ */
+
+    /* .blockLabels (default style, will be applied even if you don't class the parent element) */
+    .uniForm .blockLabels .ctrlHolder{}
+
+      .uniForm label,
+      .uniForm .blockLabels label,
+      .uniForm .blockLabels .label{ margin: 0 0 .5em 0; }
+
+      .uniForm .textInput,
+      .uniForm .blockLabels .textInput,
+      .uniForm .blockLabels .fileUpload{ width: 53%; /* <- Required property */ }
+
+      .uniForm .selectInput,
+      .uniForm select,
+      .uniForm .blockLabels .selectInput,
+      .uniForm .blockLabels select{ width: 53.5%; /* <- Required property */ }
+      .uniForm textarea,
+      .uniForm .blockLabels textarea{ width: 53%; /* <- Required property */ height: 12em; }
+
+      .uniForm .formHint,
+      .uniForm .blockLabels .formHint{ width: 45%; /* <- Required property */ font-size: .9em; color: #777; position: relative; top: -.5em; }
+
+      .uniForm .multiField,
+      .uniForm .blockLabels .multiField{ width: 53%; }
+        .uniForm .multiField .inlineLabel,
+        .uniForm .blockLabels .multiField .inlineLabel{ display: block; margin: 0 0 .5em 0; }
+        .uniForm .multiField .blockLabel,
+        .uniForm .blockLabels .multiField .blockLabel{ width: 30%; margin: 0 10px 0 0; }
+        .uniForm .multiField .blockLabel .textInput,
+        .uniForm .multiField .blockLabel .selectInput,
+        .uniForm .multiField .blockLabel select,
+        .uniForm .blockLabels .multiField .blockLabel .textInput,
+        .uniForm .blockLabels .multiField .blockLabel .selectInput,
+        .uniForm .blockLabels .multiField .blockLabel select{ width: 100%; margin: .3em 0 0 0; }
+
+/* ------------------------------------------------------------------------------ */
+
+    /* .inlineLabels */
+    .uniForm .inlineLabels .ctrlHolder{}
+
+    .uniForm .inlineLabels label,
+    .uniForm .inlineLabels .label{ width: 45%; /* <- Required property */ margin: .3em 2% 0 0; /* <- Required property */ }
+
+    .uniForm .inlineLabels .textInput,
+    .uniForm .inlineLabels .fileUpload{ width: 45%; /* <- Required property */ }
+
+    .uniForm .inlineLabels .selectInput,
+    .uniForm .inlineLabels select{ width: 45%; /* <- Required property */ }
+
+    .uniForm .inlineLabels textarea{  width: 45%; /* <- Required property */ height: 12em; }
+
+    .uniForm .inlineLabels .formHint{ margin-top: 0; margin-left: 47%; font-size: .9em; color: #777; position: static; }
+
+    .uniForm .inlineLabels .multiField{ width: 45%; /* <- Required property */ margin: 0 0 .3em 0; }
+      .uniForm .inlineLabels .multiField .inlineLabel{ display: block; margin: 0 0 .5em 0; }
+      .uniForm .inlineLabels .multiField .blockLabel{ float: left; width: 26%; margin: 0 3% 0 0; }
+      .uniForm .inlineLabels .multiField .blockLabel .textInput,
+      .uniForm .inlineLabels .multiField .blockLabel .selectInput,
+      .uniForm .inlineLabels .multiField .blockLabel select{ width: 100%; margin: .3em 0 0 0; }
+
+/* Focus pseudoclasses */
+.uniForm .ctrlHolder .textInput:focus{ outline: none; /* Get rid of the 'glow' effect in WebKit, optional */ }
+.uniForm .ctrlHolder textarea:focus{ outline: none; /* Get rid of the 'glow' effect in WebKit, optional */ }
+.uniForm div.focused .formHint{ color: #333; }
+
+/* Columns (they are floated left by default) */
+.uniForm .col{ width: 47.9%; /* <- Required property */ margin: 0 2% 20px 0; }
+/* Use .first and .last classes to control the layout/spacing of your columns */
+.uniForm .col.first{ width: 49%; /* <- Required property */ float: left; clear: none; }
+.uniForm .col.last{ width: 49%; /* <- Required property */ float: right; clear: none; margin-right: 0; }
+
+/* Messages */
+.uniForm #errorMsg{ background: #ffdfdf; border: 1px solid #df7d7d; border-width: 1px 0; margin: 0 0 1.5em 0; padding: 7px; }
+.uniForm .error{ background: #ffdfdf; border: 1px solid #df7d7d; border-width: 1px 0; }
+
+  .uniForm #errorMsg dt, .uniForm #errorMsg h3{ margin: 0 0 .5em 0; font-size: 100%; line-height: 100%; font-weight: bold; }
+  .uniForm #errorMsg dd{ margin: 0; padding: 0; }
+    .uniForm #errorMsg ol{ margin: 0; padding: 0; }
+      .uniForm #errorMsg ol li{ margin: 0; padding: 2px; list-style-position: inside; border-bottom: 1px dotted #df7d7d; position: relative; }
+    .uniForm .errorField{ color: #af4c4c; margin: 0 0 6px 0; padding: 4px; background: #ffbfbf; }
+
+.uniForm #OKMsg{ background: #C8FFBF; border: 1px solid #A2EF95; border-width: 1px 0; margin: 0 0 1.5em 0; padding: 7px; }
+  .uniForm #OKMsg p{ margin: 0; }
+
+/*
+IT IS STRONGLY ADVISED TO MAKE YOUR CHANGES AFTER THIS COMMENT BY REPEATING (COPYING) THE SELECTOR FROM ABOVE, 
+AND MODIFYING IT WITH YOUR OWN PROPERTIES/VALUES. THIS IS RECOMMENDED BECAUSE IF YOU HAPPEN TO RUN INTO TROUBLE, 
+YOU CAN VERY EASILY REVERT TO A GENERIC STYLE OF UNI-FORM. BEST OF LUCK... 
+*/
+
+/* ------------------------------------------------------------------------------ */
+

examples/media/uni_form/uni-form.jquery.js

@@ -0,0 +1,30 @@
+jQuery.fn.uniform = function(settings) {
+  settings = jQuery.extend({
+    valid_class    : 'valid',
+    invalid_class  : 'invalid',
+    focused_class  : 'focused',
+    holder_class   : 'ctrlHolder',
+    field_selector : 'input, select, textarea'
+  }, settings);
+
+  return this.each(function() {
+    var form = jQuery(this);
+
+    // Select form fields and attach them higlighter functionality
+    form.find(settings.field_selector).focus(function() {
+      form.find('.' + settings.focused_class).removeClass(settings.focused_class);
+      jQuery(this).parents("." + settings.holder_class).addClass(settings.focused_class)
+    }).blur(function() {
+      form.find('.' + settings.focused_class).removeClass(settings.focused_class);
+    });
+  });
+};
+
+// Auto set on page load...
+$(document).ready(function() {
+  q = jQuery('form.uniForm');
+  if(q.length) {
+    q.uniform();
+  }
+  $(document.activeElement).focus() //safari doesn't support this and has no alternative
+});

examples/sillywalks/settings.py

@@ -8,6 +8,7 @@
     'django.contrib.admin',
     'django.contrib.sessions',
     'django.contrib.contenttypes',
+    'uni_form',
 )
 
 import os

examples/sillywalks/templates/base.html

@@ -22,6 +22,8 @@
 
         {% block css %}
             <link rel="stylesheet" href="{{ MEDIA_URL }}css/base.css" type="text/css" />
+            <link rel="stylesheet" href="{{ MEDIA_URL }}uni_form/uni-form-generic.css" />
+            <link rel="stylesheet" href="{{ MEDIA_URL }}uni_form/uni-form.css" />
         {% endblock css%}
     </head>
 {% endblock head %}
@@ -42,6 +44,8 @@
     </center>
 
     {% block js %}
+    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
+    <script type="text/javascript" src="{{ MEDIA_URL }}uni_form/uni-form.jquery.js"></script>
     {% endblock js%}
 </body>
 </html>