[enh] improved layout of index and submission form

bt/forms.py

@@ -20,16 +20,16 @@ class AddViolation(forms.Form):
    country = forms.ChoiceField(required=True, choices=(('',''),)+tuple(sorted(COUNTRIES,key=itemgetter(1))), help_text=_('EU member state where the restriction is reported.'))
    operator = forms.CharField(required=True, max_length=256, help_text=_('The ISP or operator providing the Internet service.'))
    contract = forms.CharField(required=True, max_length=256, help_text=_('The specific contract at the ISP provider. (please be as specific as possible)'))
-   comment = forms.CharField(required=True, widget=AdvancedEditor(), help_text=_('Please describe the symptoms you are experiencing. What service or site, or person is unavailable or seems artificially slowed down.'))
+   comment = forms.CharField(required=True, widget=AdvancedEditor(), label=_('Please describe the symptoms you are experiencing. What service or site, or person is unavailable or seems artificially slowed down.'))
    email = forms.EmailField(required=True, help_text=_("We need your email to validate your report. We're not storing the email later on."))
    nick = forms.CharField(required=False, help_text=_("We need your some name to identify you later on."))
-   attachments = MultiFileField(required=False, help_text=_("Attach screenshot, document or any other relevant information."))
-   resource = forms.ChoiceField(required=False, choices=(('',''),)+tuple(sorted(RESOURCES,key=itemgetter(1))), help_text=_('The what is the affected resource.'))
-   resource_name = forms.CharField(required=False, max_length=4096, help_text=_('Please specify the name of the affected resource.'))
-   type = forms.ChoiceField(required=False, choices=(('',''),)+tuple(sorted(TYPES,key=itemgetter(1))), help_text=_('Is the Resource Blocked or otherwise discrimated?'))
-   media = forms.ChoiceField(required=False, choices=(('',''),)+tuple(sorted(MEDIA,key=itemgetter(1))), help_text=_('Is the Internet connection over mobile or fixed line?'))
-   temporary = forms.BooleanField(required=False, help_text=_('Is the restriction only temporary, e.g. due to network overload?'))
-   loophole = forms.BooleanField(required=False, help_text=_('Is there another offer provided by this Operator which removes this restriction?'))
-   contractual = forms.BooleanField(required=False, help_text=_('Is the restriction described in the users contract?'))
-   contract_excerpt = forms.CharField(required=False, widget=AdvancedEditor(), help_text=_('Please copy the relevant section describing the restriction from the user contract.'))
-   captcha = CaptchaField(help_text=_("Unfortunately we must protect against automatic attack, please forgive us this inconvenience."))
+   attachments = MultiFileField(required=False, label=_("Attach screenshot, document or any other relevant information."))
+   resource = forms.ChoiceField(required=False, choices=(('',''),)+tuple(sorted(RESOURCES,key=itemgetter(1))), label=_('What is the affected resource.'))
+   resource_name = forms.CharField(required=False, max_length=4096, label=_('Please specify the name of the affected resource.'))
+   type = forms.ChoiceField(required=False, choices=(('',''),)+tuple(sorted(TYPES,key=itemgetter(1))), label=_('Is the Resource Blocked or otherwise discrimated?'))
+   media = forms.ChoiceField(required=False, choices=(('',''),)+tuple(sorted(MEDIA,key=itemgetter(1))), label=_('Is the Internet connection over mobile or fixed line?'))
+   temporary = forms.BooleanField(required=False, label=_('Is the restriction only temporary, e.g. due to network overload?'))
+   loophole = forms.BooleanField(required=False, label=_('Is there another offer provided by this Operator which removes this restriction?'))
+   contractual = forms.BooleanField(required=False, label=_('Is the restriction described in the users contract?'))
+   contract_excerpt = forms.CharField(required=False, widget=AdvancedEditor(), label=_('Please copy the relevant section describing the restriction from the user contract.'))
+   captcha = CaptchaField(label=_("Unfortunately we must protect against automatic attacks, please forgive us this inconvenience."))

bt/multifile.py

@@ -58,7 +58,7 @@ class MultiFileInput(FileInput):
         """
         Renders a link to add more file input boxes.
         """
-        return u"<a id='add_attach' onclick=\"javascript:new_%(name)s()\">+</a>" % {'name':name}
+        return u"<div><a id='add_attach' onclick=\"javascript:new_%(name)s()\">Add more attachments</a></div>" % {'name':name}
 
     def js(self, name, value, count, attrs=None):
         """
@@ -72,7 +72,7 @@ class MultiFileInput(FileInput):
             b=document.getElementById('%(id)s0');
             c=b.cloneNode(false);
             c.id='%(id)s'+(%(id)s_counter++);
-            b.parentNode.insertBefore(c,b.parentNode.lastChild.nextSibling);
+            b.parentNode.insertBefore(c,b);
         }
         -->
         </script>

media/css/style.css

 body { border: 0; padding: 0; font-family: Verdana,Arial,Helvetica,sans-serif; }
-img { border: 0; }
+img { border: 0; vertical-align: middle; }
 h1, h2, h3, h4, div, ul { padding: 0; margin: 0; }
 li { list-style: none; }
 
-
-.fieldWrapper { margin: 1em; width: 100%; }
-.fieldWrapper label { width: 200px; display: inline-block; }
-.help_text { font-size: 0.7em; left: 30px; width: 20%; position: absolute; }
-.attachments { float: right; margin-top: 0.4em; margin-bottom: 1em; display: block; clear: both; }
+.fieldWrapper { margin: 1.6em; width: 100%; }
+.fieldWrapper label { display: inline-block; }
+.help_text { font-size: 0.7em; left: 30px; width: 20%; position: absolute; margin-right: 1em; }
+.attachments { margin-top: 0.4em; margin-bottom: 1em; display: block; clear: both; }
 .report-node { margin: 1em; padding-bottom: 0.4em; border-bottom: 1px solid black; width: 500px;}
 .report { margin: 1em; }
 .atttachsg { margin: 1em; }
 
-#addForm { margin: auto; width: 50%; }
 #add_attach { cursor: pointer; }
 #show_optionals { text-decoration: underline; color: blue; cursor: pointer; clear: both; }
 #optional { clear: both; }
-#report dt { display: inline-block; width: 14em; }
+#report dt { display: inline-block; }
 #report dd { display: inline; }
 #auth { float: right; clear: both; }
 
-#addForm.index { min-height: 700px; width: 300px; padding: 0; margin: 0; margin-right: 170px; float: left; }
-#addForm .fieldWrapper label { width: 6em; display: inline-block; }
-#addForm.index .help_text { font-size: 0.7em; left: 320px; width: 10%; position: absolute; }
-.index #add_attach { cursor: pointer; position: absolute; left: 9em; }
+#container { margin: 2em; }
+#addForm.index { min-height: 700px; width: 40%; padding: 0; margin: 1em; float: right; }
+#addForm .fieldWrapper label { display: inline-block; min-width: 6em; }
+#addForm.index .help_text { font-size: 0.7em; width: 30%; position: relative; float: right; left: 0; }
+.index #add_attach { cursor: pointer; }
+#id_captcha_1 { width: 2em; }
+.innerfield { display: inline-block; width: 65%; }
+.align-right { text-align: right;}
 
-#content { margin-right: 2em; margin-left: 2em; }
 #content ol li { list-style: decimal; }
-#latest3 { float: right; width: 12em; min-height:700px; margin-left: 1em; }
 
 .confirm { display: inline; position: relative; }
 .confirm:hover > div { display: block; }
-.confirm_popup { display: none; position: absolute; right: 0; border: 2px solid #454545; padding: 10px; background: #F7F7F7; z-index: 20; }
+.confirm_popup { display: none; position: absolute; left: 1.7em; border: 2px solid #454545; padding: 10px; background: #F7F7F7; z-index: 20; }
 .confirm_thanks { width: 17.2em; height: 6.7em; }
 
 table.listing, .pagination { width: 90%; margin: auto; }

media/js/form.js

@@ -4,17 +4,17 @@ function init_form() {
   $(".fieldWrapper").focusout(function(event) {$(this).find('.help_text').hide();});
   $("#show_optionals").hide();
   $("#id_contractual").click(function(event) {
-                               $("#id_contract_excerpt_parent").parent().toggle();
+                               $("#id_contract_excerpt_parent").parent().parent().toggle();
                              });
   $("#show_optionals").click(function(event) {
                                $(this).hide();
                                $("#optional .fieldWrapper").show();
-                               $("#id_contract_excerpt_parent").parent().hide();
+                               $("#id_contract_excerpt_parent").parent().parent().hide();
                              });
   $('#id_country').change(function() {
                             var country=$(this).attr('value');
                             if(country.length>0) {
-                              $('#id_operator').parent().show();
+                              $('#id_operator').parent().parent().show();
                               $.getJSON('/ajax/'+country, function(data) {
                                           $("#id_operator").autocomplete(data, { minChars: 0, autoFill: true });
                                           $('#id_operator').focus();
@@ -25,7 +25,7 @@ function init_form() {
                              var country=$('#id_country').attr('value');
                              var operator=$(this).val();
                              if(operator.length>0) {
-                               $('#id_contract').parent().show();
+                               $('#id_contract').parent().parent().show();
                                $.getJSON('/ajax/'+country+'/'+operator, function(data) {
                                            $("#id_contract").autocomplete(data,{ minChars: 0 });
                                            $('#id_contract').focus();
@@ -34,15 +34,15 @@ function init_form() {
                            });
   $('#id_contract').change(function() {
                              if($(this).val().length>0) {
-                               $('#id_comment').parent().show();
-                               $('#id_email').parent().show();
-                               $('#id_nick').parent().show();
-                               $('#id_attachments0').parent().show();
+                               $('#id_comment').parent().parent().show();
+                               $('#id_email').parent().parent().show();
+                               $('#id_nick').parent().parent().show();
+                               $('#id_attachments0').parent().parent().show();
                              }
                            });
   $('#id_email').change(function() {
                              if($(this).val().length>0) {
-                               $('#id_captcha_0').parent().show();
+                               $('#id_captcha_0').parent().parent().show();
                                $('#save_button').show();
                                $("#show_optionals").show();
                              }

templates/index.html

@@ -18,7 +18,7 @@ function focushandlers(ed) {
         if($(realID)) {
             console.log(realID);
             realID.parents('.fieldWrapper').find('.help_text').show();
-        }            
+        }
     });
     tinymce.dom.Event.add(ed.getWin(), 'blur', function(e) {
         if($(realID)) {
@@ -31,11 +31,11 @@ $(document).ready(function(){
   init_form();
   {% if not form.is_bound %}
   $(".fieldWrapper").hide();
-  $("#id_country").parent().show();
+  $("#id_country").parent().parent().show();
   $("#save_button").hide();
   {% else %}
   if($("#id_contractual").attr('checked')==false) {
-    $("#id_contract_excerpt").parent().hide();
+    $("#id_contract_excerpt").parent().parent().hide();
   }
   {% endif %}
   $("#sortedlist").tablesorter();
@@ -71,44 +71,24 @@ $(document).ready(function(){
 {% endblock %}
 
 {%block content%}
-<div id='latest3'>
-   <h2>Latest Infringements</h2>
-<ul>
-{% for violation in violations %}
-<li>
-    <a href="/view/{{violation.pk}}">{{ violation.operator }} ({{ violation.country }}) {{ violation.contract }}</a>
-    {{ violation.confirmations }} confirmations.<div class="confirm"><a>+1</a>
-          <div class="hidden confirm_popup">
-             <h3>Confirmation</h3>
-             <p>
-             <form method="get" class="confirm_form" id="{{ violation.pk }}">
-                E-mail: <input type="text" name="email" /><br />
-                //required<br />
-                <input type="hidden" value="{{ violation.pk }}" />
-                <input type="submit" value="confirm" />
-             </form>
-             </p>
-          </div>
-       </div>
-</li>
-{% endfor %}
-</ul>
-</div>
-<div id='addForm' class='index'>
-  <h2>{% trans "Add New Violation" %}</h2>
-<form name="addForm" enctype="multipart/form-data" action="{% root_url %}/add/" method="post">
-  {% for field in form %}
-      {% if field.label = 'Resource' %}<div id="show_optionals">{% trans "Provide optional details" %}</div><div id="optional">{%endif%}
+<div id='container'>
+  <div id='addForm' class='index'>
+    <h2>{% trans "Add New Infringement" %}</h2>
+    <form name="addForm" enctype="multipart/form-data" action="{% root_url %}/add/" method="post">
+      {% for field in form %}
+      {% if field.html_name = 'resource' %}<div id="show_optionals">{% trans "Provide optional details" %}</div><div id="optional">{%endif%}
       <div class="fieldWrapper">
+        <span class="help_text">{{ field.help_text }}</span>
+        <span class="innerfield"
           {{ field.errors }}
-          <div class="help_text">{{ field.help_text }}</div>
           {{ field.label_tag }} {{ field }}
+        </span>
       </div>
-  {% endfor %}
-  </div>
-  {% csrf_token %}
-  <input id="save_button" type="submit" value="{% trans "save" %}" />
-</form>
+      {% endfor %}
+    </div>
+    {% csrf_token %}
+    <input id="save_button" type="submit" value="{% trans "save" %}" />
+    </form>
 </div>
 <div id='content'>
    <h2>How is this working?</h2>
@@ -119,4 +99,39 @@ $(document).ready(function(){
       <li>in 6 months from the start we submit a complete list to Commissioner Kroes.</li>
    </ol>
 </div>
+<div id='latest3'>
+   <h2>Latest Infringements</h2>
+<table>
+  <thead>
+    <tr>
+      <th>Infringing offering</th>
+      <th>Confirmed</th>
+      <th>I Confirm</th>
+    </tr>
+  </thead>
+  {% for violation in violations %}
+  <tbody>
+    <tr>
+      <td><a href="/view/{{violation.pk}}">{{ violation.operator }} ({{ violation.country }}) {{ violation.contract }}</a></td>
+      <td class='align-right'>{{ violation.confirmations }}</td>
+      <td class='align-right'><div class="confirm"><a>+1</a>
+      <div class="hidden confirm_popup">
+        <h3>Confirmation</h3>
+        <p>
+          <form method="get" class="confirm_form" id="{{ violation.pk }}">
+            E-mail: <input type="text" name="email" /><br />
+            //required<br />
+            <input type="hidden" value="{{ violation.pk }}" />
+            <input type="submit" value="confirm" />
+          </form>
+        </p>
+      </div>
+    </div>
+      </td>
+    </tr>
+    {% endfor %}
+  </tbody>
+</table>
+</div>
+</div>
 {%endblock%}