[enh] alcts confirmation

media/css/style.css

@@ -529,3 +529,83 @@ dl#comments {
 }
 
 /* Infrigement form */
+.info-validate {
+  margin-top: .7em; padding: 7px 15px;
+  background-color: #EEDC94;
+  background-image: -moz-linear-gradient(center top , #FCEEC1, #EEDC94);
+  background-repeat: repeat-x;
+  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+  border-radius: 4px;
+  border-style: solid;
+  border-width: 1px;
+  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset;
+  color: #404040;
+  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+}
+.info-validate input[type=text],
+.info-validate input[type=submit] {
+  width: 75%;
+  padding: 3px;
+  font-family: Helvetica, Arial, "Liberation Sans", FreeSans, sans-serif;
+  font-size: 14.4px;
+  background: #fff;
+  border: 1px solid #d9d9d9;
+  border-top-color: #c0c0c0;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  -o-border-radius: 2px;
+  border-radius: 2px;
+}
+.info-validate input[type=submit] {
+  width: 21%;
+  padding-top: 2px;
+  padding-bottom: 2px;
+}
+.info-validate input[type=submit] {
+  background-image: -webkit-gradient(
+    linear,
+    left bottom,
+    left top,
+    color-stop(0.43, rgb(227,227,227)),
+    color-stop(1, rgb(249,249,249))
+  );
+  background-image: -moz-linear-gradient(
+    center bottom,
+    rgb(227,227,227) 43%,
+    rgb(249,249,249) 100%
+  );
+  border-color: #bbbbbb;
+  border-bottom-color: #a0a0a0;
+}
+.info-validate input[type=submit]:hover {
+  border-color: #939393;
+}
+.info-validate input[type=submit]:active,
+.info-validate input[type=submit]:focus {
+  background-image: -webkit-gradient(
+    linear,
+    left bottom,
+    left top,
+    color-stop(0.2, rgb(249,249,249)),
+    color-stop(0.7, rgb(238,238,238))
+  );
+  background-image: -moz-linear-gradient(
+    center bottom,
+    rgb(249,249,249) 20%,
+    rgb(238,238,238) 70%
+  );
+  border-color: #444444;
+}
+.info-validate input:hover {
+  border-color: #b9b9b9;
+  border-top-color: #a0a0a0;
+}
+.info-validate input[type=text]:focus {
+  border-color: orange;
+}
+.info-validate {
+  display: none;
+}
+.info-validate:target {
+  display: block;
+}

templates/index.html

@@ -43,6 +43,11 @@ $(document).ready(function(){
   }
   $("#show_optionals").show();
   $("#optional .fieldWrapper").hide();
+  if ($('#id_email').val().length>0) {
+                               $('#id_captcha_0').parent().parent().show();
+                               $('#save_button').removeAttr('disabled');
+                               $("#show_optionals").show();
+                             }
   {% endif %}
   $("#sortedlist").tablesorter();
   $('.confirm_form').submit(function() {
@@ -73,10 +78,10 @@ $(document).ready(function(){
                                 + "del[datetime|cite],ins[datetime|cite]",
              });
    $(".confirm > .button").click(function(){
-            $(this).next().toggleClass('hidden');
+            $(this).parent().parent().parent().find('.info-validate').toggle();
          });
    $(".cancel-button").click(function(){
-            $(this).parent().parent().parent().parent().addClass('hidden');
+            $(this).parent().parent().hide();
          });
 });
 </script>
@@ -122,28 +127,22 @@ $(document).ready(function(){
         <th>{% trans "I Confirm" %}</th>
       </tr>
     </thead>
-  {% for violation in violations %}
   <tbody>
+  {% for violation in violations %}
     <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 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 }}">
-               {% 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>
+       <td><a href="/view/{{violation.pk}}">{{ violation.operator }} ({{ violation.country }}) {{ violation.contract }}</a>
+          <div class="info-validate">
+            <form method="get" id="{{ violation.pk }}" class="confirm_form" >
+                <label>{% trans "In order to <strong>validate your action</strong>, please fill this form" %}</label>
+                <input type="text" name="email" />
+                <input type="hidden" value="{{ violation.pk }}" />
+                <input type="submit" value="{% trans "confirm" %}" />
+                <input class="cancel-button" type="button" value="{% trans "cancel" %}" />
+              </form>
             </div>
-         </div>
-      </div>
+       </td>
+      <td class='align-right'>{{ violation.confirmations }}</td>
+      <td class='align-right'><div class="confirm"><a class="button">confirm</a></div>
       </td>
     </tr>
     {% endfor %}