svn commit: r236740 - in user/des/fbce/root: static vote

[Dag-Erling Smorgrav]

Author: des
Date: Fri Jun  8 08:26:52 2012
New Revision: 236740
URL: http://svn.freebsd.org/changeset/base/236740

Log:
  Move info and error messages out of the form (and table) and into their
  own div, with appropriate styling.
  
  Clean up the JavaScript code a little; most importantly, use global
  variables to avoid unnecessary getElementById() calls.
  
  Disable the submit button if too many boxes are checked.
  
  Remove the cancel button; it is useless and confusing.

Modified:
  user/des/fbce/root/static/fbce.css
  user/des/fbce/root/vote/index.tt

Modified: user/des/fbce/root/static/fbce.css
==============================================================================
--- user/des/fbce/root/static/fbce.css	Fri Jun  8 08:23:55 2012	(r236739)
+++ user/des/fbce/root/static/fbce.css	Fri Jun  8 08:26:52 2012	(r236740)
@@ -101,6 +101,16 @@ th {
     overflow: auto;
 }
 
+.info {
+    color: green;
+    font-weight: bold;
+}
+
+.error {
+    color: red;
+    font-weight: bold;
+}
+
 /*
  * Footer
  */
@@ -131,6 +141,14 @@ th {
 }
 
 /*
+ * Voting
+ */
+.vote .votebox {
+    width: 2ex;
+    text-align: center;
+}
+
+/*
  * Login page
  */
 .loginform {

Modified: user/des/fbce/root/vote/index.tt
==============================================================================
--- user/des/fbce/root/vote/index.tt	Fri Jun  8 08:23:55 2012	(r236739)
+++ user/des/fbce/root/vote/index.tt	Fri Jun  8 08:26:52 2012	(r236740)
@@ -1,28 +1,36 @@
 [% WRAPPER lib/html_top %]
 <script type="text/javascript">
+  var total;
+  var votebutton;
+
   function setTotal(n) {
-    var total = document.getElementById("total");
     total.innerHTML = new Number(n).toString();
-    if (n > [% max_votes ? max_votes : 0 %])
+    if (n > [% max_votes ? max_votes : 0 %]) {
       total.style.color = "red";
-    else if (n == [% max_votes ? max_votes : 0 %])
-      total.style.color = "green";
-    else
-      total.style.color = "orange";
+      votebutton.disabled = true;
+    } else {
+      if (n == [% max_votes ? max_votes : 0 %])
+        total.style.color = "green";
+      else
+        total.style.color = "orange";
+      votebutton.disabled = false;
+    }
   }
 
   function updateTotal() {
     var inputs = document.getElementsByTagName("input");
-    var total = 0;
+    var n = 0;
     for (var i = 0; i < inputs.length; i++) {
-	  if (inputs[i].checked == true)
-	    total++;
-	}
-	setTotal(total);
+      if (inputs[i].checked == true)
+	n++;
+    }
+    setTotal(n);
   }
 
   function initTotal() {
-    setTotal([% voted_for.keys.size %]);
+    total = document.getElementById("total");
+    votebutton = document.getElementById("votebutton");
+    updateTotal();
     document.getElementById("totalrow").style.visibility = "visible";
   }
 </script>
@@ -39,40 +47,35 @@
   <p>There are no candidates to vote for.</p>
   [% ELSE %]
   <p>You may vote for up to [% max_votes %] candidates from the list below.  You can modify your vote at any time until voting closes (see the <a href="[% c.uri_for('/') | html %]#schedule">schedule</a> on the front page).</p>
+  [% IF vote_ok.defined %]
+  <div class="info">
+    <p class="message">Your vote was registered.  You may change it at any time until voting closes.</p>
+  </div>
+  [% END %]
+  [% IF error.defined %]
+  <div class="error">
+    <p class="error">[% error | html %]</p>
+  </div>
+  [% END %]
   <form method="POST" action="" onreset="setTotal([% voted_for.keys.size %])">
     <table class="vote">
-      [% IF vote_ok.defined %]
-      <tr>
-	<td colspan="3">
-	  <p class="message">Your vote was registered.  You may change it at any time until voting closes.</p>
-	</td>
-      </tr>
-      [% END %]
-      [% IF error.defined %]
-      <tr>
-	<td colspan="3">
-	  <p class="error">[% error | html %]</p>
-	</td>
-      </tr>
-      [% END %]
       [% WHILE (candidate = candidates.next) %]
       [% login = candidate.login %]
       <tr>
-	<td><input type="checkbox" name="vote_for_[% login %]" id="vote_for_[% login %]"[% IF voted_for.$login %] checked="checked"[% END %] onclick="updateTotal()"/></td>
+	<td class="votebox"><input type="checkbox" name="vote_for_[% login %]" id="vote_for_[% login %]"[% IF voted_for.$login %] checked="checked"[% END %] onclick="updateTotal()"/></td>
 	<td><label for="vote_for_[% login %]">[% candidate.name | html %][% IF candidate.incumbent %] (incumbent)[% END %]:</label></td>
 	<td><a href="[% c.uri_for('/see/candidate', login) | html %]">[% candidate.statement.short | html %]</a></td>
       </tr>
       [% END %]
       <tr id="totalrow" style="visibility: collapse">
-	<td style="text-align: center;" id="total">X</td>
+	<td style="text-align: center;" class="votebox" id="total">X</td>
 	<td colspan="2">votes cast</td>
       </tr>
       <tr>
 	<td colspan="3">
 	  <p>
 	    <input type="reset" name="reset" value="Reset"/>
-	    <input type="submit" name="vote" value="Vote!"/>
-	    <input type="submit" name="cancel" value="[% IF voted_for.size == 0 %]Not yet.[% ELSE %]Don't change.[% END %]"/>
+	    <input type="submit" name="vote" id="votebutton" value="Vote!"/>
 	  </p>
 	</td>
       </tr>