Issue 545 - Implement overflow for list of supporters

head.htm

 <link rel="canonical" href="http://acceptableads.org/"/>
 <meta property="og:type" content="website"/>
 <meta property="og:image" content="http://acceptableads.org/images/manifesto/acceptable-ads-manifesto-share.png?a=show"/>
 <meta property="og:url" content="http://acceptableads.org"/>
 <meta name="google-site-verification" content="3deBAaPY4M2OuOe576R36TC28S5svlfRRsdaGS6WCXg"/>
 <meta charset="utf-8"/>
 <meta name="viewport" content="width=device-width, initial-scale=1"/>
 <style type="text/css">
 @font-face
 {
@@ skipping 164 matching lines @@
   display: none;
 }
 
 #content,
 #social
 {
   padding-bottom: 30px;
   border-bottom: 1px dashed #71695f;
 }
 
-#supporters
-{
-  margin-bottom: 20px;
-}
-
 .supporter
 {
   display: inline-block;
   width: 135px;
   margin: 10px;
   font-size: 15px;
   text-align: center;
   text-decoration: none;
   line-height: 1.2em;
   vertical-align: top;
@@ skipping 17 matching lines @@
   margin: 0px;
 }
 
 #join-org img
 {
   width: 19px;
   height: 19px;
   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%;
   margin: 0px;
   margin-bottom: 10px;
 }
 
 #facebook button
 {
   background-color: #45658a;
@@ skipping 258 matching lines @@
     {
       listener(event);
     });
   }
 }
 
 addListener(window, "DOMContentLoaded", function(ev)
 {
   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)
   {
     var fulltext = document.getElementById("fulltext");
     if (fulltext.hasAttribute("hidden"))
       fulltext.removeAttribute("hidden");
     else
       fulltext.hidden = "hidden";
     
     ev.preventDefault();
     ev.stopPropagation();
   }, false);
   
   var shareTitle = document.getElementById("share-text-title")[textAttr];
   var shareDescription = document.getElementById("share-text-description")[textAttr];
   var facebookButton = document.getElementById("facebook");
   facebookButton.href = "https://www.facebook.com/sharer/sharer.php?s=100&p%5Btitle%5D="
     + encodeURIComponent(shareTitle)
     + "&p%5Bsummary%5D="
     + encodeURIComponent(shareDescription)
     + "&p%5Burl%5D=http%3A%2F%2Facceptableads.org%2F";
   var twitterButton = document.getElementById("twitter");
   twitterButton.href = "https://twitter.com/intent/tweet?text="
     + encodeURIComponent(shareTitle)
     + "&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)
     return;
   
   var social = document.getElementById("sign");
   var placeholder = document.getElementById("sign-placeholder");
   var classes = social.className.split(" ");
   
   var scrollTop = document.body.scrollTop;
@@ skipping 13 matching lines @@
   {
     classes.splice(classes.indexOf("collapsed"), 1);
     placeholder.style.height = "0px";
     social.className = classes.join(" ");
   }
 }
 
 addListener(window, "scroll", checkCollapse);
 addListener(window, "resize", checkCollapse);
 --></script>