Styles for the submit layers form

Improve styling and layout

Signed-off-by: Belen Barros <belen.barros.pena@intel.com>
Signed-off-by: Paul Eggleton <paul.eggleton@linux.intel.com>

TODO

@@ -10,7 +10,6 @@ TODO:
 * Need an admin contact in footer
 * Show recipes from non-software/base layers differently in recipes list
 * Submit layer form fixes:
- * Layout for maintainers (js collapse?)
  * Captcha
 
 Later:

layerindex/editlayer.html

@@ -17,23 +17,39 @@
 {% block content %}
 {% autoescape on %}
 
+<div class="container-fluid">
+    <div class="row-fluid">
+        {% block heading %}
+        <div class="page-header">
+            <h1>Edit layer</h1>
+        </div>
+        {% endblock %}
+
 {% block formtag %}
 {% if form.was_saved %}
     <div class="alert alert-success">
         Changes saved successfully.
     </div>
 {% endif %}
-<form action="{% url edit_layer form.instance.name %}" method="post">
+<form id="edit_layer_form" action="{% url edit_layer form.instance.name %}" method="post">
 {% endblock %}
 {% csrf_token %}
     {% for hidden in form.hidden_fields %}
         {{ hidden }}
     {% endfor %}
 
+    <div class="formfields">
         {% for field in form.visible_fields %}
-        <div class="fieldWrapper">
+            {% if field.errors %}
+            <div class="control-group alert alert-error">
             {{ field.errors }}
+            {% else %}
+            <div class="control-group">
+            {% endif %}
+                <div class="control-label">
                     {{ field.label_tag }}
+                </div>
+                <div class="controls">
                     {% if field.name = 'deps' %}
                         <div class="scrolling">
                             <table><tbody>
@@ -66,35 +82,54 @@
                     {% else %}
                         {{ field }}
                     {% endif %}
+                    <span class="help-inline custom-help">
                         {{ field.help_text }}
+                    </span>
+                </div>
             </div>
         {% endfor %}
-    <h3>Maintainers</h3>
+    </div>
+    <h3 id="maintainers">Maintainers</h3>
     {{ maintainerformset.non_form_errors }}
     {{ maintainerformset.management_form }}
     {% for maintainerform in maintainerformset %}
         <div class="maintainerform" id="maintainerform-{{forloop.counter0}}">
             <h4>Maintainer {{forloop.counter}}</h4>
+            <div class="maintainerformfields">
                 {% for hidden in maintainerform.hidden_fields %}
                     {{ hidden }}
                 {% endfor %}
 
                 {% for field in maintainerform.visible_fields %}
-            <div class="fieldWrapper">
+                    {% if field.errors %}
+                    <div class="control-group alert alert-error">
                     {{ field.errors }}
+                    {% else %}
+                    <div class="control-group">
+                    {% endif %}
+                        <div class="control-label">
                             {{ field.label_tag }}
+                        </div>
                         {{ field }}
+                        <span class="help-inline custom-help">
                             {{ field.help_text }}
+                        </span>
                     </div>
                 {% endfor %}
             </div>
+        </div>
     {% endfor %}
-    <p><a href="#" class="btn" id="addanothermaintainer">Add another maintainer</a><p>
+    <p><a href="#" class="btn btn-small" id="addanothermaintainer"><i class="icon-plus"></i>Add maintainer</a><p>
+<div class="submitbuttons">
 {% block submitbuttons %}
-<input type="submit" value="Save" class="btn btn-primary" />
+<input type="submit" value="Save layer" class="btn btn-primary btn-large" />
 {% endblock %}
+</div>
 </form>
 
+    </div>
+</div>
+
 {% endautoescape %}
 
 {% endblock %}

layerindex/static/css/additional.css

@@ -59,9 +59,60 @@ h1 .btn {
 height: auto;
 max-height: 120px;
 overflow: auto;
+width: 40.1709%;
+border: 1px solid #DDDDDD;
+padding: 8px;
+}
+
+.scrolling td {
+    padding: 4px;
+}
+
+.scrolling checkbox, label {
+    margin: 0px;
+}
+
+.formfields input {
+    width: 50%;
+}
+
+.formfields textarea {
+    width: 50%;
+}
+
+#maintainers {
+    padding-top: 0.75em;
+}
+
+.maintainerform {
+    /* Fix slight jumping at end of expand in Firefox */
+    padding-top: 1px;
+}
+
+.maintainerformfields input {
+    width: 25em;
+}
+
+.custom-help {
+    margin-left: 10px;
+    max-width: 40%;
+    color: #999;
+    vertical-align:top;
+}
+
+.errorlist {
+    color: #b94a48;
+    list-style-type: none;
+    margin-left: 0px;
 }
 
 .copyable {
     padding-left: 5px;
     padding-right: 3px;
 }
+
+.submitbuttons {
+    margin-top: 2em;
+    padding-top: 1em;
+    border-top: 1px solid rgb(238, 238, 238);
+}

layerindex/submitlayer.html

@@ -14,16 +14,22 @@
 {% block title %}OpenEmbedded metadata index - submit layer{% endblock %}
 -->
 
+        {% block heading %}
+        <div class="page-header">
+            <h1>Submit layer</h1>
+        </div>
+        {% endblock %}
+
+
 {% block submitlink %}
 <!-- Disable submit link, otherwise clicking it will blank the form! -->
 <li><a href="#">Submit layer</a></li>
 {% endblock %}
 
-
 {% block formtag %}
-<form action="{% url submit_layer %}" method="post">
+<form id="edit_layer_form" action="{% url submit_layer %}" method="post">
 {% endblock %}
 
 {% block submitbuttons %}
-<input type="submit" value="Submit" class="btn btn-primary" />
+<input type="submit" value="Submit layer" class="btn btn-primary btn-large" />
 {% endblock %}