Commit a5e4e3fc authored by stef's avatar stef
Browse files

[enh] confirmation popups now improved

parent 045b7a3b
...@@ -33,18 +33,31 @@ p label { width: 7em; display: inline-block; } ...@@ -33,18 +33,31 @@ p label { width: 7em; display: inline-block; }
#content ol li { list-style: decimal; } #content ol li { list-style: decimal; }
.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; border: 2px solid #454545; padding: 10px; background: #F7F7F7; z-index: 20; } .confirm_popup { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 20; opacity: 30%; }
.confirm_popup > div { background: #F7F7F7; border: 2px solid #454545; height: 133px; left: 50%; margin-left: -130px; margin-top: -66px; padding: 10px; position: absolute; top: 50%; width: 260px; }
.confirm_thanks { width: 17.2em; height: 6.7em; } .confirm_thanks { width: 17.2em; height: 6.7em; }
#footer { text-align: center; } #footer { text-align: center; }
.hidden { display: none; }
table.listing, .pagination { width: 90%; margin: auto; } table.listing, .pagination { width: 90%; margin: auto; }
table.listing thead td { font-weight: bold; border-bottom: 1px solid black; } table.listing thead td { font-weight: bold; border-bottom: 1px solid black; }
table.listing div.confirm_popup { right: 0; } table.listing div.confirm_popup { right: 0; text-align: right; }
div#latest3 div.confirm_popup { left: 0; } div#latest3 div.confirm_popup { left: 0; }
.cell-link { display: block; text-decoration: none; color: #000; } .cell-link { display: block; text-decoration: none; color: #000; }
.alpha60 {
/* Fallback for web browsers that doesn't support RGBa */
background: rgb(0, 0, 0) transparent;
/* RGBa with 0.6 opacity */
background: rgba(0, 0, 0, 0.6);
/* For IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}
/* tables */ /* tables */
table.tablesorter { table.tablesorter {
font-family:arial; font-family:arial;
......
...@@ -67,6 +67,12 @@ $(document).ready(function(){ ...@@ -67,6 +67,12 @@ $(document).ready(function(){
+ "-h6,hr[size|noshade],dd,dl,dt,cite,abbr,acronym," + "-h6,hr[size|noshade],dd,dl,dt,cite,abbr,acronym,"
+ "del[datetime|cite],ins[datetime|cite]", + "del[datetime|cite],ins[datetime|cite]",
}); });
$(".confirm > .button").click(function(){
$(this).next().toggleClass('hidden');
});
$(".cancel-button").click(function(){
$(this).parent().parent().parent().parent().addClass('hidden');
});
}); });
</script> </script>
{% endblock %} {% endblock %}
...@@ -119,19 +125,22 @@ $(document).ready(function(){ ...@@ -119,19 +125,22 @@ $(document).ready(function(){
<td><a href="/view/{{violation.pk}}">{{ violation.operator }} ({{ violation.country }}) {{ violation.contract }}</a></td> <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'>{{ violation.confirmations }}</td>
<td class='align-right'><div class="confirm"><a class="button">+1</a> <td class='align-right'><div class="confirm"><a class="button">+1</a>
<div class="hidden confirm_popup"> <div class="hidden confirm_popup alpha60">
<h3>{% trans "Confirmation" %}</h3> <div>
<p> <h3>{% trans "Confirmation" %}</h3>
<small>{% trans "I attest the existence of this infringement" %}</small> <div>
<form method="get" class="confirm_form" id="{{ violation.pk }}"> <small>{% trans "I attest the existence of this infringement" %}<br />
{% trans "E-mail" %}: <input type="text" name="email" /><br /> <a href="/view/{{violation.pk}}">{{ violation.operator }} ({{ violation.country }}) {{ violation.contract }}</a></small>
//{% trans "required" %}<br /> <form method="get" class="confirm_form" id="{{ violation.pk }}">
<input type="hidden" value="{{ violation.pk }}" /> {% trans "E-mail" %}: <input type="text" name="email" /><br />
<input type="submit" value="confirm" /> //{% trans "required" %}<br />
</form> <input type="hidden" value="{{ violation.pk }}" />
</p> <input type="submit" value="confirm" />
<input class="cancel-button" type="button" value="{% trans "cancel" %}" />
</form>
</div>
</div>
</div> </div>
</div>
</td> </td>
</tr> </tr>
{% endfor %} {% endfor %}
......
...@@ -13,9 +13,20 @@ ...@@ -13,9 +13,20 @@
$('#sortedlist').tableFilter(); $('#sortedlist').tableFilter();
$('.confirm_form').submit(function() { $('.confirm_form').submit(function() {
var self=this; var self=this;
$.ajax({url: '/confirm/'+$(this).attr('id')+'/'+$(this).children('input:first').attr('value'), success: function(data) { $(self).html(data); }}); var email=$(this).find('input:first').attr('value');
if(email) {
$.ajax({url: '/confirm/'+$(this).attr('id')+'/'+email, success: function(data) { $(self).html(data); }});
} else {
$(this).parent().find('.email-box').css('color','red');
};
return false; return false;
}); });
$(".confirm > .button").click(function(){
$(this).next().toggleClass('hidden');
});
$(".cancel-button").click(function(){
$(this).parent().parent().parent().parent().addClass('hidden');
});
}); });
</script> </script>
{% endblock %} {% endblock %}
...@@ -51,19 +62,23 @@ ...@@ -51,19 +62,23 @@
<td><a class="cell-link" href="/view/{{violation.pk}}">{{ violation.resource }}</a></td> <td><a class="cell-link" href="/view/{{violation.pk}}">{{ violation.resource }}</a></td>
<td><a class="cell-link" href="/view/{{violation.pk}}">{{ violation.type }}</a></td> <td><a class="cell-link" href="/view/{{violation.pk}}">{{ violation.type }}</a></td>
<td><a class="cell-link" href="/view/{{violation.pk}}">{{ violation.media }}</a></td> <td><a class="cell-link" href="/view/{{violation.pk}}">{{ violation.media }}</a></td>
<td>{{ violation.confirmations }} <div class="confirm"><a>confirm</a> <td>{{ violation.confirmations }} <div class="confirm"><a class="button">+1</a>
<div class="hidden confirm_popup"> <div class="hidden confirm_popup alpha60">
<h3>Confirmation</h3> <div>
<p> <h3>{% trans "Confirmation" %}</h3>
<form method="get" class="confirm_form" id="{{ violation.pk }}"> <div>
E-mail: <input type="text" name="email" /><br /> <small>{% trans "I attest the existence of this infringement" %}<br />
//required<br /> <a href="/view/{{violation.pk}}">{{ violation.operator }} ({{ violation.country }}) {{ violation.contract }}</a></small>
<input type="hidden" value="{{ violation.pk }}" /> <form method="get" class="confirm_form" id="{{ violation.pk }}">
<input type="submit" value="confirm" /> <div class="email-box">{% trans "E-mail" %}: <input type="text" name="email" /></div>
</form> //{% trans "required" %}<br />
</p> <input type="hidden" value="{{ violation.pk }}" />
</div> <input type="submit" value="confirm" />
</div> <input class="cancel-button" type="button" value="{% trans "cancel" %}" />
</form>
</div>
</div>
</div>
</td> </td>
</tr> </tr>
{% endfor %} {% endfor %}
......
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