Issue 545 - Implement overflow for list of supporters

head.htm

Index: head.htm
===================================================================
--- a/head.htm
+++ b/head.htm
@@ -182,11 +182,6 @@
   border-bottom: 1px dashed #71695f;
 }
 
-#supporters
-{
-  margin-bottom: 20px;
-}
-
 .supporter
 {
   display: inline-block;
@@ -224,13 +219,55 @@
   margin-top: 6px;
 }
 
-#join-org strong
+#join-org strong,
+#supporters-overflow a
 {
   font-weight: normal;
+  font-size: 15px;
   color: #78b364;
   text-decoration: underline;
 }
 
+#supporters-overflow
+{
+  margin-bottom: 20px;
+}
+
+#supporters-overflow .sprite
+{
+  display: inline-block;
+  width: 9px;
+  height: 5px;
+  vertical-align: middle;
+  background-image: url(/images/manifesto/icon-arrow.png?a=show);
+  background-position: 0px -6px;
+}
+
+#supporters-overflow.collapsed .sprite
+{
+  background-position: 0px 0px;
+}
+
+#supporters-overflow .supporter
+{
+  width: auto;
+  font-size: 20px;
+  margin: 10px 10px 10px 0px;
+}
+
+#supporters-overflow.collapsed #supporters-overflow-less,
+#supporters-overflow #supporters-overflow-more,
+#supporters-overflow.collapsed .supporter
+{
+  display: none;
+}
+
+#supporters-overflow.collapsed #supporters-overflow-more,
+#supporters-overflow #supporters-overflow-less
+{
+  display: inline;
+}
+
 #social button
 {
   width: 100%;
@@ -509,6 +546,11 @@
 {
   fetchNumberOfSignees();
   
+  var showSupporters = document.getElementById("supporters-overflow-more");
+  var hideSupporters = document.getElementById("supporters-overflow-less");
+  addListener(showSupporters, "click", toggleSupporters, false);
+  addListener(hideSupporters, "click", toggleSupporters, false);
+  
   var readmore = document.getElementById("readmore");
   addListener(readmore, "click", function(ev)
   {
@@ -536,6 +578,20 @@
     + "&url=http%3A%2F%2Facceptableads.org%2F";
 }, false);
 
+function toggleSupporters(ev)
+{
+  var supportersOverflow = document.getElementById("supporters-overflow");
+  var classes = supportersOverflow.className.split(" ");
+  if (classes.indexOf("collapsed") > -1)
+    classes.splice(classes.indexOf("collapsed"), 1);
+  else
+    classes.push("collapsed");
+  supportersOverflow.className = classes.join(" ");
+  
+  ev.preventDefault();
+  ev.stopPropagation();
+}
+
 function checkCollapse()
 {
   if (document.documentElement.offsetWidth < 500)