better css class concat

wagtail/wagtailadmin/edit_handlers.py

@@ -193,10 +193,15 @@ class EditHandler(object):
         Subclasses of EditHandler should override this, invoking super(B, self).classes() to
         append more classes specific to the situation.
         """
+
+        classes = []
+
         try:
-            return self.classname
+            classes.append(self.classname)
         except AttributeError:
-            return ""
+            pass
+
+        return classes
 
     def field_type(self):
         """
@@ -343,12 +348,8 @@ class BaseMultiFieldPanel(BaseCompositeEditHandler):
 
     def classes(self):
         classes = super(BaseMultiFieldPanel, self).classes()
-
-        try:
-            classes += " multi-field " 
-        except (AttributeError, TypeError):
-            pass
-
+        classes.append("multi-field")
+   
         return classes
 
 def MultiFieldPanel(children, heading="", classname=""):
@@ -371,12 +372,13 @@ class BaseFieldPanel(EditHandler):
         classes = super(BaseFieldPanel, self).classes();
 
         if self.bound_field.field.required:
-            classes += " required "
+            classes.append("required")
         if self.bound_field.errors:
-            classes += " error "
+            classes.append("error")
+        
+        classes.append(self.field_type())
+        classes.append("single-field")
         
-        classes += self.field_type() + " single-field "
-
         return classes
 
     def field_type(self):
@@ -616,7 +618,7 @@ def PublishingPanel():
         FieldRowPanel([
             FieldPanel('go_live_at'),
             FieldPanel('expire_at'),
-        ], classname="labels-above"),   
+        ], classname="label-above"),   
     ], ugettext_lazy('Scheduled publishing'), classname="publishing")
 
 

wagtail/wagtailadmin/static/wagtailadmin/scss/components/forms.scss

@@ -507,12 +507,19 @@ li.focused > .help{
     }
 }
 
-.fields > li{
+.fields > li,
+.field-col{
     @include clearfix();
     padding-top:0.5em;
     padding-bottom:1.2em;
 }
 
+.field-row{
+    @include clearfix();
+    /* negative margin the bottom so it doesn't add too much space */
+    margin-bottom:-1.2em;
+}
+
 .input{
     clear:both;
 }
@@ -526,15 +533,6 @@ li.focused > .help{
     }
 }
 
-.field-col{
-    float:left;
-}
-
-.labels-above{
-    
-}
-
-
 .field{
     &.col1,
     &.col2,
@@ -746,6 +744,15 @@ input[type=submit], input[type=reset], input[type=button], .button, button{
         }
     }
 
+    .label-above{
+        .field > label{
+            display:block;
+            padding:0 0 0.8em 0;
+            float:none;
+            width:auto;
+        }
+    }
+
     input[type=submit], input[type=reset], input[type=button], .button, button{
         font-size:0.95em;
         padding:0.75em 1.4em;
@@ -771,8 +778,14 @@ input[type=submit], input[type=reset], input[type=button], .button, button{
         @include row();
     }
 
+    .field-col{
+        float:left;
+        padding-left:0 !important;
+    }
+
     .field-content{
         @include column(10);
         padding-right:0;
+        padding-left:0;
     }   
 }

wagtail/wagtailadmin/templates/wagtailadmin/edit_handlers/field_row_panel.html

@@ -1,6 +1,6 @@
-<ul class="field-row {{ self.classes }}">
+<ul class="field-row {{ self.classes|join:" " }}">
     {% for child in self.children %}
-       <li class="field-col">
+       <li class="field-col {{ child.classes|join:" " }}">
            {{ child.render_as_field }}
        </li>
     {% endfor %}

wagtail/wagtailadmin/templates/wagtailadmin/edit_handlers/multi_field_panel.html

@@ -2,7 +2,7 @@
     <legend>{{ self.heading }}</legend>
     <ul class="fields">
         {% for child in self.children %}
-            <li>{{ child.render_as_field }}</li>
+            <li class="{{ child.classes|join:" " }}">{{ child.render_as_field }}</li>
         {% endfor %}
     </ul>
 </fieldset>

wagtail/wagtailadmin/templates/wagtailadmin/edit_handlers/object_list.html

@@ -1,6 +1,6 @@
 <ul class="objects">
     {% for child in self.children %}
-        <li class="object {{ child.classes }}">
+        <li class="object {{ child.classes|join:" " }}">
             {% if child.heading %}
                 <h2>{{ child.heading }}</h2>
             {% endif %}

wagtail/wagtailadmin/templates/wagtailadmin/edit_handlers/tabbed_interface.html

@@ -1,12 +1,12 @@
 <ul class="tab-nav merged">
     {% for child in self.children %}
-        <li class="{{ child.classes }} {% if forloop.first %}active{% endif %}"><a href="#{{ child.heading|slugify }}" class="{% if forloop.first %}active{% endif %}">{{ child.heading }}</a></li>
+        <li class="{{ child.classes|join:" " }} {% if forloop.first %}active{% endif %}"><a href="#{{ child.heading|slugify }}" class="{% if forloop.first %}active{% endif %}">{{ child.heading }}</a></li>
     {% endfor %}
 </ul>
 
 <div class="tab-content">
     {% for child in self.children %}
-        <section id="{{ child.heading|slugify }}" class="{{ child.classes }} {% if forloop.first %}active{% endif %}">
+        <section id="{{ child.heading|slugify }}" class="{{ child.classes|join:" " }} {% if forloop.first %}active{% endif %}">
             {{ child.render_as_object }}
         </section>
     {% endfor %}