Commit db0995c2 authored by stef's avatar stef

[enh] improved layout of index and submission form

parent 3731c86e
...@@ -20,16 +20,16 @@ class AddViolation(forms.Form): ...@@ -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.')) 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.')) 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)')) 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.")) 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.")) 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.")) 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))), help_text=_('The what is the affected resource.')) 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, help_text=_('Please specify the name of 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))), help_text=_('Is the Resource Blocked or otherwise discrimated?')) 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))), help_text=_('Is the Internet connection over mobile or fixed line?')) 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, help_text=_('Is the restriction only temporary, e.g. due to network overload?')) temporary = forms.BooleanField(required=False, label=_('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?')) loophole = forms.BooleanField(required=False, label=_('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?')) contractual = forms.BooleanField(required=False, label=_('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.')) contract_excerpt = forms.CharField(required=False, widget=AdvancedEditor(), label=_('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.")) captcha = CaptchaField(label=_("Unfortunately we must protect against automatic attacks, please forgive us this inconvenience."))
...@@ -58,7 +58,7 @@ class MultiFileInput(FileInput): ...@@ -58,7 +58,7 @@ class MultiFileInput(FileInput):
""" """
Renders a link to add more file input boxes. 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): def js(self, name, value, count, attrs=None):
""" """
...@@ -72,7 +72,7 @@ class MultiFileInput(FileInput): ...@@ -72,7 +72,7 @@ class MultiFileInput(FileInput):
b=document.getElementById('%(id)s0'); b=document.getElementById('%(id)s0');
c=b.cloneNode(false); c=b.cloneNode(false);
c.id='%(id)s'+(%(id)s_counter++); c.id='%(id)s'+(%(id)s_counter++);
b.parentNode.insertBefore(c,b.parentNode.lastChild.nextSibling); b.parentNode.insertBefore(c,b);
} }
--> -->
</script> </script>
......
body { border: 0; padding: 0; font-family: Verdana,Arial,Helvetica,sans-serif; } 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; } h1, h2, h3, h4, div, ul { padding: 0; margin: 0; }
li { list-style: none; } li { list-style: none; }
.fieldWrapper { margin: 1.6em; width: 100%; }
.fieldWrapper { margin: 1em; width: 100%; } .fieldWrapper label { display: inline-block; }
.fieldWrapper label { width: 200px; display: inline-block; } .help_text { font-size: 0.7em; left: 30px; width: 20%; position: absolute; margin-right: 1em; }
.help_text { font-size: 0.7em; left: 30px; width: 20%; position: absolute; } .attachments { margin-top: 0.4em; margin-bottom: 1em; display: block; clear: both; }
.attachments { float: right; 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-node { margin: 1em; padding-bottom: 0.4em; border-bottom: 1px solid black; width: 500px;}
.report { margin: 1em; } .report { margin: 1em; }
.atttachsg { margin: 1em; } .atttachsg { margin: 1em; }
#addForm { margin: auto; width: 50%; }
#add_attach { cursor: pointer; } #add_attach { cursor: pointer; }
#show_optionals { text-decoration: underline; color: blue; cursor: pointer; clear: both; } #show_optionals { text-decoration: underline; color: blue; cursor: pointer; clear: both; }
#optional { clear: both; } #optional { clear: both; }
#report dt { display: inline-block; width: 14em; } #report dt { display: inline-block; }
#report dd { display: inline; } #report dd { display: inline; }
#auth { float: right; clear: both; } #auth { float: right; clear: both; }
#addForm.index { min-height: 700px; width: 300px; padding: 0; margin: 0; margin-right: 170px; float: left; } #container { margin: 2em; }
#addForm .fieldWrapper label { width: 6em; display: inline-block; } #addForm.index { min-height: 700px; width: 40%; padding: 0; margin: 1em; float: right; }
#addForm.index .help_text { font-size: 0.7em; left: 320px; width: 10%; position: absolute; } #addForm .fieldWrapper label { display: inline-block; min-width: 6em; }
.index #add_attach { cursor: pointer; position: absolute; left: 9em; } #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; } #content ol li { list-style: decimal; }
#latest3 { float: right; width: 12em; min-height:700px; margin-left: 1em; }
.confirm { display: inline; position: relative; } .confirm { display: inline; position: relative; }
.confirm:hover > div { display: block; } .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; } .confirm_thanks { width: 17.2em; height: 6.7em; }
table.listing, .pagination { width: 90%; margin: auto; } table.listing, .pagination { width: 90%; margin: auto; }
......
...@@ -4,17 +4,17 @@ function init_form() { ...@@ -4,17 +4,17 @@ function init_form() {
$(".fieldWrapper").focusout(function(event) {$(this).find('.help_text').hide();}); $(".fieldWrapper").focusout(function(event) {$(this).find('.help_text').hide();});
$("#show_optionals").hide(); $("#show_optionals").hide();
$("#id_contractual").click(function(event) { $("#id_contractual").click(function(event) {
$("#id_contract_excerpt_parent").parent().toggle(); $("#id_contract_excerpt_parent").parent().parent().toggle();
}); });
$("#show_optionals").click(function(event) { $("#show_optionals").click(function(event) {
$(this).hide(); $(this).hide();
$("#optional .fieldWrapper").show(); $("#optional .fieldWrapper").show();
$("#id_contract_excerpt_parent").parent().hide(); $("#id_contract_excerpt_parent").parent().parent().hide();
}); });
$('#id_country').change(function() { $('#id_country').change(function() {
var country=$(this).attr('value'); var country=$(this).attr('value');
if(country.length>0) { if(country.length>0) {
$('#id_operator').parent().show(); $('#id_operator').parent().parent().show();
$.getJSON('/ajax/'+country, function(data) { $.getJSON('/ajax/'+country, function(data) {
$("#id_operator").autocomplete(data, { minChars: 0, autoFill: true }); $("#id_operator").autocomplete(data, { minChars: 0, autoFill: true });
$('#id_operator').focus(); $('#id_operator').focus();
...@@ -25,7 +25,7 @@ function init_form() { ...@@ -25,7 +25,7 @@ function init_form() {
var country=$('#id_country').attr('value'); var country=$('#id_country').attr('value');
var operator=$(this).val(); var operator=$(this).val();
if(operator.length>0) { if(operator.length>0) {
$('#id_contract').parent().show(); $('#id_contract').parent().parent().show();
$.getJSON('/ajax/'+country+'/'+operator, function(data) { $.getJSON('/ajax/'+country+'/'+operator, function(data) {
$("#id_contract").autocomplete(data,{ minChars: 0 }); $("#id_contract").autocomplete(data,{ minChars: 0 });
$('#id_contract').focus(); $('#id_contract').focus();
...@@ -34,15 +34,15 @@ function init_form() { ...@@ -34,15 +34,15 @@ function init_form() {
}); });
$('#id_contract').change(function() { $('#id_contract').change(function() {
if($(this).val().length>0) { if($(this).val().length>0) {
$('#id_comment').parent().show(); $('#id_comment').parent().parent().show();
$('#id_email').parent().show(); $('#id_email').parent().parent().show();
$('#id_nick').parent().show(); $('#id_nick').parent().parent().show();
$('#id_attachments0').parent().show(); $('#id_attachments0').parent().parent().show();
} }
}); });
$('#id_email').change(function() { $('#id_email').change(function() {
if($(this).val().length>0) { if($(this).val().length>0) {
$('#id_captcha_0').parent().show(); $('#id_captcha_0').parent().parent().show();
$('#save_button').show(); $('#save_button').show();
$("#show_optionals").show(); $("#show_optionals").show();
} }
......
...@@ -18,7 +18,7 @@ function focushandlers(ed) { ...@@ -18,7 +18,7 @@ function focushandlers(ed) {
if($(realID)) { if($(realID)) {
console.log(realID); console.log(realID);
realID.parents('.fieldWrapper').find('.help_text').show(); realID.parents('.fieldWrapper').find('.help_text').show();
} }
}); });
tinymce.dom.Event.add(ed.getWin(), 'blur', function(e) { tinymce.dom.Event.add(ed.getWin(), 'blur', function(e) {
if($(realID)) { if($(realID)) {
...@@ -31,11 +31,11 @@ $(document).ready(function(){ ...@@ -31,11 +31,11 @@ $(document).ready(function(){
init_form(); init_form();
{% if not form.is_bound %} {% if not form.is_bound %}
$(".fieldWrapper").hide(); $(".fieldWrapper").hide();
$("#id_country").parent().show(); $("#id_country").parent().parent().show();
$("#save_button").hide(); $("#save_button").hide();
{% else %} {% else %}
if($("#id_contractual").attr('checked')==false) { if($("#id_contractual").attr('checked')==false) {
$("#id_contract_excerpt").parent().hide(); $("#id_contract_excerpt").parent().parent().hide();
} }
{% endif %} {% endif %}
$("#sortedlist").tablesorter(); $("#sortedlist").tablesorter();
...@@ -71,44 +71,24 @@ $(document).ready(function(){ ...@@ -71,44 +71,24 @@ $(document).ready(function(){
{% endblock %} {% endblock %}
{%block content%} {%block content%}
<div id='latest3'> <div id='container'>
<h2>Latest Infringements</h2> <div id='addForm' class='index'>
<ul> <h2>{% trans "Add New Infringement" %}</h2>
{% for violation in violations %} <form name="addForm" enctype="multipart/form-data" action="{% root_url %}/add/" method="post">
<li> {% for field in form %}
<a href="/view/{{violation.pk}}">{{ violation.operator }} ({{ violation.country }}) {{ violation.contract }}</a> {% if field.html_name = 'resource' %}<div id="show_optionals">{% trans "Provide optional details" %}</div><div id="optional">{%endif%}
{{ 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 class="fieldWrapper"> <div class="fieldWrapper">
<span class="help_text">{{ field.help_text }}</span>
<span class="innerfield"
{{ field.errors }} {{ field.errors }}
<div class="help_text">{{ field.help_text }}</div>
{{ field.label_tag }} {{ field }} {{ field.label_tag }} {{ field }}
</span>
</div> </div>
{% endfor %} {% endfor %}
</div> </div>
{% csrf_token %} {% csrf_token %}
<input id="save_button" type="submit" value="{% trans "save" %}" /> <input id="save_button" type="submit" value="{% trans "save" %}" />
</form> </form>
</div> </div>
<div id='content'> <div id='content'>
<h2>How is this working?</h2> <h2>How is this working?</h2>
...@@ -119,4 +99,39 @@ $(document).ready(function(){ ...@@ -119,4 +99,39 @@ $(document).ready(function(){
<li>in 6 months from the start we submit a complete list to Commissioner Kroes.</li> <li>in 6 months from the start we submit a complete list to Commissioner Kroes.</li>
</ol> </ol>
</div> </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%} {%endblock%}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment