Apply form styles

See #913
 - Legacy-Id: 5153

ietf/nomcom/forms.py

@@ -27,6 +27,22 @@ def get_group_or_404(year):
                              nomcom__isnull=False)
 
 
+class BaseNomcomForm(forms.ModelForm):
+    def get_fieldsets(self):
+        if not self.fieldsets:
+            yield dict(name=None, fields=self)
+        else:
+            for fieldset, fields in self.fieldsets:
+                fieldset_dict = dict(name=fieldset, fields=[])
+                for field_name in fields:
+                    if field_name in self.fields.keyOrder:
+                        fieldset_dict['fields'].append(self[field_name])
+                    if not fieldset_dict['fields']:
+                        # if there is no fields in this fieldset, we continue to next fieldset
+                        continue
+                yield fieldset_dict
+
+
 class EditMembersForm(forms.Form):
 
     members = custom_fields.MultiEmailField(label="Members email", required=False)
@@ -154,9 +170,11 @@ class EditPublicKeyForm(forms.ModelForm):
         fields = ('public_key',)
 
 
-class NominateForm(forms.ModelForm):
+class NominateForm(BaseNomcomForm):
     comments = forms.CharField(label='Comments', widget=forms.Textarea())
 
+    fieldsets = [('Candidate Nomination', ('position', 'candidate_name', 'candidate_email', 'candidate_phone', 'comments'))]
+
     def __init__(self, *args, **kwargs):
         self.nomcom = kwargs.pop('nomcom', None)
         self.user = kwargs.pop('user', None)

ietf/templates/nomcom/nominate.html

@@ -3,8 +3,6 @@
 {% block subtitle %} - Nominate{% endblock %}
 
 {% block nomcom_content %}
-<h2>Nominate</h2>
-
 {% if message %}
 <div class="info-message-{{ message.0 }}">{{ message.1 }}</div>
 {% endif %}
@@ -12,10 +10,43 @@
 {% if form.errors %}<div class="info-message-error">Please correct the following errors</div>{% endif %}
 
 <form action="" method="post">{% csrf_token %}
-<table>
-{{ form }}
-</table>
-<p><input type="submit" value="Save" /></p>
+
+    <div class="baseform">
+
+      {% for fieldset in form.get_fieldsets %}
+        {% if fieldset.name %}
+          <div class="fieldset">
+          <h2>{{ fieldset.name }}</h2>
+        {% endif %}
+
+        {% for field in fieldset.fields %}
+          <div id="baseform-fieldname-{{ field.html_name }}"
+              class="{% if field.errors %}fieldError {% endif %}field BaseFormStringWidget{% if field.field.column_style %} {{ field.field.column_style }}{% endif %}">
+            <label for="id_{{ field.html_name }}">{{ field.label }}
+            {% if field.field.required %}
+              <span class="fieldRequired" title="Required">*</span>
+            {% endif %}
+            </label>
+            <div class="fieldWidget">
+            <div id="{{ field.html_name }}_help" class="formHelp"> {{ field.help_text }}</div>
+            {{ field }}
+            {{ field.errors }}
+            </div>
+            <div class="endfield"></div>
+          </div>
+        {% endfor %}
+
+        {% if fieldset.name %}
+          </div>
+        {% endif %}
+      {% endfor %}
+
+      <div class="submitrow">
+        <input type="submit" value="Save" name="save" />
+      </div>
+
+    </div>
 </form>
 
+
 {% endblock %}

static/css/base2.css

@@ -208,3 +208,71 @@ form table .help {
 div.info-message-success { border: 1px solid green; background-color: #eeffbb; padding: 5px 10px; margin: 1em 0px; color: green; }
 div.info-message-warning { border: 1px dashed red; background-color: #ffeeaa; padding: 1em 2em; margin: 1em 0px; }
 div.info-message-error { border: 1px solid red; background-color: #ffeebb; padding: 5px 10px; margin: 1em 0px; color: red; }
+
+
+/* Form styles */
+.baseform {
+    font-size: 12px;
+}
+
+.baseform .fieldset {
+    margin: 1em 0px;
+    border: none;
+    border: 1px solid #8899dd;
+    background-color: #edf5ff;
+}
+
+.baseform .fieldset h2 {
+    background-color: #2647a0;
+    color: white;
+    font-size: 14px;
+    padding: 5px 10px;
+    margin: 0px;
+}
+
+.baseform .field {
+    padding: 0.5em 10px;
+}
+
+.baseform .field label {
+    display: block;
+    width: 150px;
+    float: left;
+    clear: left;
+}
+
+.baseform .field .endfield {
+    clear: left;
+}
+
+.baseform .fieldWidget {
+    margin-left: 150px;
+}
+
+.baseform select,
+.baseform textarea,
+.baseform input {
+    border: 1px solid #cccccc;
+}
+
+.baseform input {
+    font-size: 12px;
+}
+
+span.fieldRequired {
+    color: red;
+}
+
+.fieldError {
+    background-color: #ffcc66;
+}
+
+.errorlist li,
+.errorlist {
+    padding: 0px;
+    margin: 0px;
+    list-style: none;
+    color: red;
+}
+
+