From 76c56150dc5600543151864aefb932db5f3ca628 Mon Sep 17 00:00:00 2001 From: Nowell Strite Date: Sun, 6 Sep 2009 08:52:01 -0400 Subject: [PATCH] Added uni_form to example site. --- REQUIREMENTS | 1 + .../complaints/templates/complaints/edit.html | 6 +- .../templates/complaints/index.html | 5 +- examples/media/uni_form/uni-form-generic.css | 136 ++++++++++++++++++ examples/media/uni_form/uni-form.css | 118 +++++++++++++++ examples/media/uni_form/uni-form.jquery.js | 30 ++++ examples/sillywalks/settings.py | 1 + examples/sillywalks/templates/base.html | 4 + 8 files changed, 297 insertions(+), 4 deletions(-) create mode 100644 examples/media/uni_form/uni-form-generic.css create mode 100755 examples/media/uni_form/uni-form.css create mode 100644 examples/media/uni_form/uni-form.jquery.js diff --git a/REQUIREMENTS b/REQUIREMENTS index 6ec0fd3..de06f01 100644 --- a/REQUIREMENTS +++ b/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 \ No newline at end of file diff --git a/examples/complaints/templates/complaints/edit.html b/examples/complaints/templates/complaints/edit.html index 27a803e..9ba77fb 100644 --- a/examples/complaints/templates/complaints/edit.html +++ b/examples/complaints/templates/complaints/edit.html @@ -1,8 +1,10 @@ {% extends base_template %} +{% load uni_form %} + {% block pluggable_content %} -
- {{ form.as_p }} + + {{ form|as_uni_form }}
{% endblock %} diff --git a/examples/complaints/templates/complaints/index.html b/examples/complaints/templates/complaints/index.html index 895e37b..88eca93 100644 --- a/examples/complaints/templates/complaints/index.html +++ b/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 @@

Complaints

{% endfor %} -
+

Create a Complaint

- {{ form.as_p }} + {{ form|as_uni_form }}
{% endblock %} diff --git a/examples/media/uni_form/uni-form-generic.css b/examples/media/uni_form/uni-form-generic.css new file mode 100644 index 0000000..b06036b --- /dev/null +++ b/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{} \ No newline at end of file diff --git a/examples/media/uni_form/uni-form.css b/examples/media/uni_form/uni-form.css new file mode 100755 index 0000000..53520ba --- /dev/null +++ b/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... +*/ + +/* ------------------------------------------------------------------------------ */ + diff --git a/examples/media/uni_form/uni-form.jquery.js b/examples/media/uni_form/uni-form.jquery.js new file mode 100644 index 0000000..7be3b2e --- /dev/null +++ b/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 +}); \ No newline at end of file diff --git a/examples/sillywalks/settings.py b/examples/sillywalks/settings.py index 9d034bc..e34ee8d 100644 --- a/examples/sillywalks/settings.py +++ b/examples/sillywalks/settings.py @@ -8,6 +8,7 @@ 'django.contrib.admin', 'django.contrib.sessions', 'django.contrib.contenttypes', + 'uni_form', ) import os diff --git a/examples/sillywalks/templates/base.html b/examples/sillywalks/templates/base.html index 33c68d8..d40df40 100644 --- a/examples/sillywalks/templates/base.html +++ b/examples/sillywalks/templates/base.html @@ -22,6 +22,8 @@ {% block css %} + + {% endblock css%} {% endblock head %} @@ -42,6 +44,8 @@ {% block js %} + + {% endblock js%}