Commits

Luke Plant committed ee3c5f3

Changed HTML for rendering forms to be a bit simpler

Corresponding changes to js in various places.

Comments (0)

Files changed (4)

cciw/cciwmain/forms.py

     """Form mixin that provides the rendering methods used on the CCIW site"""
 
     # These constants are also used by the cciwfield template tag
-    normal_row_template = '<div id="%(divid)s" class="%(class)s">%(label)s %(field)s%(help_text)s</div>'
-    error_row_template = u'<div class="validationErrorTop">%s</div>'
+    normal_row_template = \
+        '<div id="%(divid)s" class="%(class)s">%(errors_html)s' + \
+        '<div class="field">%(label)s %(field)s%(help_text)s</div></div>'
+    error_row_template = u'<div class="userError">%s</div>'
+    errors_template = u'<div class="fieldMessages">%s</div>'
+
 
     help_text_html_template = u' %s'
 
     div_normal_class = u'formrow'
-    div_error_class = u'formrow validationErrorBottom'
+    div_error_class = u'formrow validationErrors'
 
     start_template = u'<div class="form">'
     end_template = u'</div>'
             hidden_fields.append(unicode(bf))
         else:
             if bf_errors:
-                output.append(self.error_row_template % force_unicode(bf_errors))
+                errors_html = self.errors_template % force_unicode(bf_errors)
                 cssclass = self.div_error_class
             else:
+                errors_html = ''
                 cssclass = self.div_normal_class
             if label_text is None and bf.label:
                 label_text = escape(force_unicode(bf.label))
             else:
                 help_text = u''
             output.append(self.normal_row_template % {
-                    'errors': force_unicode(bf_errors),
+                    'errors_html': errors_html,
                     'label': force_unicode(label),
                     'field': unicode(bf),
                     'help_text': help_text,

cciw/cciwmain/static/css/style.css

 }
 
 div.userError,
-div.validationErrorTop,
-div.validationErrorBottom {
+div.validationErrors {
     background-color: #ffbe73;
-}
-
-div.userError
-{
     border-top: 1px solid #ff8900;
     border-bottom: 1px solid #ff8900;
 }
 
-div.validationErrorTop
-{
-    border-top: 1px solid #ff8900;
-}
-div.validationErrorBottom
-{
-    border-bottom: 1px solid #ff8900;
-}
-
 .successMessage
 {
     border: 1px solid #007633;
 }
 
 /* LHS of form */
-div.formrow label
+div.formrow .field label
 {
     display: block;
     float: left;
 }
 
 /* RHS of form */
-div.formrow ul,
-div.formrow ul li
+div.formrow .field ul,
+div.formrow .field ul li
 {
     list-style-type: none;
     margin-left: 0px;
     padding-left: 0px;
 }
 
-div.formrow ul
+div.formrow .field ul
 {
     margin-left: 16em;
 }
 
-div.formrow ul label
+div.formrow .field ul label
 {
     // Override what we set before under div.formrow label
     float: none;

cciw/cciwmain/static/js/cciwutils.js

         if (row.size() == 0) {
             return;
         }
-        if (!row.hasClass("validationErrorBottom")) {
-            // insert <ul> before it
-            var content = $("<div class='validationErrorTop'><ul class='errorlist'></ul</div>");
+        if (!row.hasClass("validationErrors")) {
+            // insert <ul> inside it
+            var content = $("<div class='fieldMessages'><ul class='errorlist'></ul></div>");
             $.each(errors, function(i, val) {
-                       content.find("ul").append("<li>").html(val);
+                       content.find("ul").append($('<li></li>').html(val));
+
                    });
-            row.before(content);
-            row.addClass("validationErrorBottom");
+            row.prepend(content);
+            row.addClass("validationErrors");
         }
     };
 
         if (row.size() == 0) {
             return;
         }
-        if (row.hasClass("validationErrorBottom")) {
-            row.removeClass("validationErrorBottom");
-            // there will be a previous sibling
-            // which holds the error message
-            row.prev().remove();
+        if (row.hasClass("validationErrors")) {
+            row.removeClass("validationErrors");
+            // there will be a child which holds the error message
+            row.find('.fieldMessages').remove();
         }
     };
 

templates/cciw/bookings/add_place.html

            userData['account'] = account;
            /* Easiest way to get them where we want is to move it using javascript */
            var btn1 = $('#id_use_account_1_btn');
-           btn1.appendTo(btn1.prev('div.form').find('div.formrow'));
+           btn1.prependTo(btn1.prev('div.form').find('div.formrow'));
            btn1.css({'float':'right'}).show();
 
            var btn2 = $('#id_use_account_2_btn');
-           btn2.appendTo(btn2.prev('div.form').find('div.formrow'));
+           btn2.prependTo(btn2.prev('div.form').find('div.formrow'));
            btn2.css({'float':'right'}).show();
 
        }
Tip: Filter by directory path e.g. /media app.js to search for public/media/app.js.
Tip: Use camelCasing e.g. ProjME to search for ProjectModifiedEvent.java.
Tip: Filter by extension type e.g. /repo .js to search for all .js files in the /repo directory.
Tip: Separate your search with spaces e.g. /ssh pom.xml to search for src/ssh/pom.xml.
Tip: Use ↑ and ↓ arrow keys to navigate and return to view the file.
Tip: You can also navigate files with Ctrl+j (next) and Ctrl+k (previous) and view the file with Ctrl+o.
Tip: You can also navigate files with Alt+j (next) and Alt+k (previous) and view the file with Alt+o.