Skip to content

GitLab

Commit a5e4e3fc authored by stef's avatar stef
Browse files

[enh] confirmation popups now improved

parent 045b7a3b
Hide whitespace changes
Inline Side-by-side
media/css/style.css
View file @ a5e4e3fc
......@@ -33,18 +33,31 @@ p label { width: 7em; display: inline-block; }
#content ol li { list-style: decimal; }
.confirm { display: inline; position: relative; }
.confirm:hover > div { display: block; }
.confirm_popup { display: none; position: absolute; border: 2px solid #454545; padding: 10px; background: #F7F7F7; z-index: 20; }
/*.confirm:hover > div { display: block; }*/
.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; }
#footer { text-align: center; }
.hidden { display: none; }
table.listing, .pagination { width: 90%; margin: auto; }
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; }
.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 */
table.tablesorter {
font-family:arial;
......
templates/index.html
View file @ a5e4e3fc
......@@ -67,6 +67,12 @@ $(document).ready(function(){
+ "-h6,hr[size|noshade],dd,dl,dt,cite,abbr,acronym,"
+ "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>
{% endblock %}
......@@ -119,19 +125,22 @@ $(document).ready(function(){
<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 class="button">+1</a>
<div class="hidden confirm_popup">
<h3>{% trans "Confirmation" %}</h3>
<p>
<small>{% trans "I attest the existence of this infringement" %}</small>
<form method="get" class="confirm_form" id="{{ violation.pk }}">
{% trans "E-mail" %}: <input type="text" name="email" /><br />
//{% trans "required" %}<br />
<input type="hidden" value="{{ violation.pk }}" />
<input type="submit" value="confirm" />
</form>
</p>
<div class="hidden confirm_popup alpha60">
<div>
<h3>{% trans "Confirmation" %}</h3>
<div>
<small>{% trans "I attest the existence of this infringement" %}<br />
<a href="/view/{{violation.pk}}">{{ violation.operator }} ({{ violation.country }}) {{ violation.contract }}</a></small>
<form method="get" class="confirm_form" id="{{ violation.pk }}">
{% trans "E-mail" %}: <input type="text" name="email" /><br />
//{% trans "required" %}<br />
<input type="hidden" value="{{ violation.pk }}" />
<input type="submit" value="confirm" />
<input class="cancel-button" type="button" value="{% trans "cancel" %}" />
</form>
</div>
</div>
</div>
</div>
</td>
</tr>
{% endfor %}
......
templates/list.html
View file @ a5e4e3fc
......@@ -13,9 +13,20 @@
$('#sortedlist').tableFilter();
$('.confirm_form').submit(function() {
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;
});
$(".confirm > .button").click(function(){
$(this).next().toggleClass('hidden');
});
$(".cancel-button").click(function(){
$(this).parent().parent().parent().parent().addClass('hidden');
});
});
</script>
{% endblock %}
......@@ -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.type }}</a></td>
<td><a class="cell-link" href="/view/{{violation.pk}}">{{ violation.media }}</a></td>
<td>{{ violation.confirmations }} <div class="confirm"><a>confirm</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>{{ violation.confirmations }} <div class="confirm"><a class="button">+1</a>
<div class="hidden confirm_popup alpha60">
<div>
<h3>{% trans "Confirmation" %}</h3>
<div>
<small>{% trans "I attest the existence of this infringement" %}<br />
<a href="/view/{{violation.pk}}">{{ violation.operator }} ({{ violation.country }}) {{ violation.contract }}</a></small>
<form method="get" class="confirm_form" id="{{ violation.pk }}">
<div class="email-box">{% trans "E-mail" %}: <input type="text" name="email" /></div>
//{% trans "required" %}<br />
<input type="hidden" value="{{ violation.pk }}" />
<input type="submit" value="confirm" />
<input class="cancel-button" type="button" value="{% trans "cancel" %}" />
</form>
</div>
</div>
</div>
</td>
</tr>
{% 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