Skip to content

GitLab

R
Respect My Net
Commit db0995c2 authored by stef's avatar stef
Browse files
Options

[enh] improved layout of index and submission form

parent 3731c86e
Hide whitespace changes
Inline Side-by-side
Showing with 89 additions and 74 deletions
bt/forms.py
View file @ db0995c2
......@@ -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
View file @ db0995c2
......@@ -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
View file @ db0995c2
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
View file @ db0995c2
......@@ -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
View file @ db0995c2
......@@ -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%}
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