fix contributors display button

Author: haarg

root/inc/contributors.tx

@@ -1,32 +1,32 @@
 %% if $contributors.size() {
-<div id="metacpan_contributors">
-  <div>
-    <button class="btn-link"
-      onclick="$(this).hide(); $('#metacpan_contributors ul').slideDown(); return false;"
-    >and [% $contributors.size() %] contributors</button>
-  </div>
-  <ul style="display: none">
-  %%  for $contributors -> $contributor {
-    <li class="contributor"
-      %%  if $contributor.pauseid {
-      data-cpan-author="[% $contributor.pauseid %]"
-      %%  }
-      %%  if $contributor.email.size() {
-      data-contrib-email="[% $contributor.email.join(' ') %]"
+<div>
+  <button class="contributors-show-button btn-link">and [% $contributors.size() %] contributors</button>
+  <div id="metacpan_contributors" class="slide-out slide-out-hidden">
+    <div>
+      <ul>
+      %%  for $contributors -> $contributor {
+        <li class="contributor"
+          %%  if $contributor.pauseid {
+          data-cpan-author="[% $contributor.pauseid %]"
+          %%  }
+          %%  if $contributor.email.size() {
+          data-contrib-email="[% $contributor.email.join(' ') %]"
+          %%  }
+        >
+        %%  if $contributor.pauseid {
+          <a href="/author/[% $contributor.pauseid %]" class="cpan-author">
+        %%  }
+        %%  if $contributor.pauseid || $contributor.email.size() {
+          <img class="gravatar" width="20" height="20" src="[% gravatar_image($contributor, 20) %]" />
+        %%  }
+          [% $contributor.name %]
+        %%  if $contributor.pauseid {
+          </a>
+        %%  }
+        </li>
       %%  }
-    >
-    %%  if $contributor.pauseid {
-      <a href="/author/[% $contributor.pauseid %]" class="cpan-author">
-    %%  }
-    %%  if $contributor.pauseid || $contributor.email.size() {
-      <img class="gravatar" width="20" height="20" src="[% gravatar_image($contributor, 20) %]" />
-    %%  }
-      [% $contributor.name %]
-    %%  if $contributor.pauseid {
-      </a>
-    %%  }
-    </li>
-  %%  }
-  </ul>
+      </ul>
+    </div>
+  </div>
 </div>
 %%  }

root/static/js/cpan.js

@@ -307,6 +307,17 @@ $(document).ready(function() {
             sel.selectedIndex = 0;
         });
     }
+
+    const contribs = document.querySelector('#metacpan_contributors');
+    if (contribs) {
+        const contrib_button = document.querySelector('.contributors-show-button');
+        contrib_button.addEventListener('click', e => {
+            e.preventDefault();
+            contrib_button.style.display = 'none';
+            contribs.classList.remove('slide-out-hidden');
+            contribs.classList.add('slide-down');
+        });
+    }
 });
 
 function set_page_size(selector, storage_name) {

root/static/less/global.less

@@ -225,7 +225,7 @@ a.ellipsis:hover * {
 * see /release/Plack for example
 */
 #metacpan_contributors {
-    > ul {
+    ul {
         padding: 10px 0;
     }