Merge lp:~ronnie.vd.c/ubuntu-community-webthemes/django-forms into lp:ubuntu-community-webthemes/light-django-theme

[Ronnie]

Added form styling conform web design guidelines

[lp:~ronnie.vd.c/ubuntu-community-webthemes/django-forms]

33. By Ronnie on 2011-03-18

Readded some django css

=== modified file 'media/css/default.css'
--- media/css/default.css	2011-03-14 19:11:05 +0000
+++ media/css/default.css	2011-03-18 15:26:20 +0000
@@ -205,6 +205,32 @@
     /* 16x0.75 =12 */
 }
 
+/* Form typography */
+form .smalltext {
+    font-size:0.625em; 
+    line-height: 1.4em;
+}
+
+legend span.supporting, label, form .error {
+    font-size: 0.75em;
+    line-height: 1.2em;
+}
+
+legend {
+    font-size: 1em;
+    line-height: 1em;
+}
+
+input[type="text"], input[type="password"], select {
+    font-size: 0.75em;
+}
+
+input[type="submit"] {
+    font-size: 1em;
+    line-height: 1.25em;
+}
+/* END Form typography */
+
 .showcase-text {
     font-size: 0.875em;
     /* 16x0.875=14 */
@@ -360,6 +386,100 @@
     width: auto;
 }
 
+/* Form Layout */
+form {
+    width: 542px;
+    margin: 0 auto;
+}
+
+form ul.errorlist { 
+    display: inline-block;
+    line-height: 1em;
+    vertical-align: top;
+}
+
+form .error {
+    width: 184px; /* 224 - 30 */
+    height: 20px;
+    display: inline-block;
+    padding-left: 30px;
+    line-height: 1em;
+    vertical-align: top;
+    padding-top: 4px;
+}
+
+form .help {
+    position: absolute;
+    z-index: 10;
+    right: 16px;
+    width: 20px;
+}
+
+label {
+    display: block;
+    margin-bottom: 4px;
+}
+
+label.inline {
+    display: inline-block;
+    vertical-align: middle;
+}
+
+legend {
+    width: 100%;
+    position: relative;
+    padding: 8px;
+    margin: 0 -8px;
+}
+
+legend span.supporting {
+    position: absolute;
+    right: 8px;
+}
+
+fieldset {
+    position: relative;
+    margin-bottom: 16px;
+    padding: 8px;
+}
+
+input[type="text"], input[type="password"], select, textarea {
+    width: 286px;
+    height: 20px;
+    margin-right: 16px;
+    margin-bottom: 8px;
+}
+
+textarea, select[multiple="multiple"] {
+    min-width: 286px;
+    max-width: 286px;
+    min-height: 20px;
+    height: 100px;
+}
+
+input[type="checkbox"], input[type="radio"] {
+    margin-top: 0px;
+    margin-bottom: 8px;
+}
+
+input[type="text"]:focus, input[type="password"]:focus {
+    width: 284px;
+    height: 18px;
+}
+
+input[type="text"].small, input[type="password"].small, select.small {
+    width: 134px;
+}
+
+input[type="text"].small:focus, input[type="password"].small:focus, select.small:focus {
+    width: 132px;
+}
+
+input[type="submit"] {
+    padding: 10px 8px;
+}
+/* END Form Layout */
+
 .showcase-item {
     float: left;
     margin: 5px 10px;
@@ -699,6 +819,96 @@
     color: #333
 }
 
+/* Form decoration */
+form ul {
+    list-style-type: none;
+}
+
+form .error {
+    background-image: url('../images/error.png');
+    background-repeat: no-repeat;
+}
+
+form .help {
+    background-image: url('../images/help.png');
+    background-repeat: no-repeat;
+}
+
+form .smalltext {
+    color: #333333;
+}
+
+label {
+    color: #333333;
+}
+
+label.required:after {
+    color: #DD4814;
+    content: " *";
+}
+
+legend {
+    background-color: #aea79f;
+    color: #ffffff;
+}
+
+legend span.supporting {
+    color: #ffffff;
+}
+
+legend span.supporting:before {
+    color: #DD4814;
+    content: "* ";
+}
+
+fieldset {
+    background-color: #dfdcd9;
+}
+
+input[type="text"], input[type="password"], select, textarea {
+    color: #333333;
+    border: 1px solid #ccc1c1;
+    background-color: white;
+}
+
+input[type="submit"][disabled="disabled"], input[type="submit"][disabled="disabled"]:hover { 
+    background-color:#AEA79F;
+    text-shadow: none;
+}
+
+input[type="text"]:focus, input[type="password"]:focus {
+    border: 2px solid #dd4814;
+    color: #333333;
+}
+
+select:focus {
+    border: 2px solid #dd4814;
+    color: #333333;
+}
+
+input[type="text"].error, input[type="password"].error, select.error {
+    border: 2px solid #dd4814;
+    color: #dd4814;
+}
+
+input[type="submit"] {
+    border-radius: 4px;
+    background: #dd4814 url('../images/gradient.png') repeat-x;
+    color: #ffffff;
+    border: none;
+    text-shadow: black 0px 1px 2px;
+}
+
+input[type="submit"]:hover {
+    background-color: #b83a0f;
+}
+
+input[type="submit"]:active {
+    background-color: #962d0c;
+}
+/* END Form decoration */
+
+
 FORM.search_form INPUT, #searchbox {
     background-color: #f0f0f0;
     border: 1px solid #CCCCCC;

=== modified file 'media/css/django_extras.css'
--- media/css/django_extras.css	2010-09-30 16:24:11 +0000
+++ media/css/django_extras.css	2011-03-18 15:26:20 +0000
@@ -1,21 +1,19 @@
-/* -  Form Decoration [Django]
---------------------------------------------------------------------------------------------------------
-*/
-
-FORM TH, .form-item-label {
+.form-item-label {
     font-size: 0.75em;
     font-weight: bold;
     text-align: left;
     padding-right: 10px;
+    text-align: left;
+    white-space: nowrap;
 }
 
-FORM TD, .form-item-value {
+.form-item-value {
     font-size: 0.75em;
     font-weight: normal;
     text-align: left;
 }
 
-FORM INPUT[type=text], .form-item-field {
+.form-item-field {
     background-color: #f0f0f0;
     border: 1px solid #CCCCCC;
     height: 16px;
@@ -24,7 +22,7 @@
     width: 180px;
 }
 
-FORM INPUT[type=text]:focus, .form-item-field:focus {
+.form-item-field:focus {
     background-color: #f7f7f7;
     border: 1px solid #DD4814;
 }

=== added file 'media/images/error.png'
Binary files media/images/error.png	1970-01-01 00:00:00 +0000 and media/images/error.png	2011-03-18 15:26:20 +0000 differ
=== added file 'media/images/gradient.png'
Binary files media/images/gradient.png	1970-01-01 00:00:00 +0000 and media/images/gradient.png	2011-03-18 15:26:20 +0000 differ
=== added file 'media/images/help.png'
Binary files media/images/help.png	1970-01-01 00:00:00 +0000 and media/images/help.png	2011-03-18 15:26:20 +0000 differ
=== added file 'templates/form.html'
--- templates/form.html	1970-01-01 00:00:00 +0000
+++ templates/form.html	2011-03-18 15:26:20 +0000
@@ -0,0 +1,18 @@
+{% load i18n %}
+{% for field in form.visible_fields %}
+	<div>
+		{% if field.field.label %}<label for="id_{{ field.name }}"{% if field.field.required %} class="required"{% endif %}>{{ field.label }}</label>{% endif %}
+		{{ field }}
+		{% if field.help_text %}<span class="help" rel="help" title="{{ field.help_text }} {% if field.field.required %}({% trans "Required" %}){% endif %}">&nbsp;</span>{% endif %}
+		{% if field.errors %}
+		    <ul class="errorlist">
+		    {% for error in field.errors %}
+		        <li class="error">{{ error }}</li>
+		    {% endfor %}
+		    </ul>
+	    {% endif %}
+	</div>
+{% endfor %}
+{% for field in form.hidden_fields %}
+	    <div class="hidden">{{ field }}</div>
+{% endfor %}