fix profile accept donations checkbox

Author: haarg

root/account/profile.tx

@@ -123,11 +123,11 @@
                     %%  my $donation = $author.donation.map(-> $d { $d.id }).grep.size();
                     <div class="col-sm-8 col-md-6">
                         <label class="checkbox">
-                            <input name="donations" type="checkbox"[% if $donation { %] checked="checked"[% } %] onchange="$('#metacpan_donations').slideToggle()" /> Accept donations
+                            <input name="donations" type="checkbox"[% if $donation { %] checked="checked"[% } %] /> Accept donations
                         </label>
                     </div>
                 </div>
-                <div id="metacpan_donations"[% if !$donation { %] style="display: none"[% } %]>
+                <div id="metacpan_donations" class="slide-out [% if !$donation { 'slide-out-hidden' } %]">
                     %%  my $user_donations = $author.donation.indexed_by('name');
                     %%  for ['PayPal', 'Wishlist', 'Flattr'] -> $system {
                     %%      my $found = $user_donations[$system];

root/static/js/profile.js

@@ -119,4 +119,15 @@ document.querySelector('.account-settings button.fill-location').addEventListene
     fillLocation();
 });
 
+const donation_box = document.querySelector('#metacpan_donations');
+document.querySelector('.profile-form input[name="donations"]').addEventListener('change', (e) => {
+    if (donation_box.classList.contains("slide-out-hidden")) {
+        donation_box.classList.toggle("slide-out-hidden");
+    }
+    else {
+        donation_box.classList.toggle("slide-up");
+    }
+    donation_box.classList.toggle("slide-down");
+});
+
 });

root/static/less/global.less

@@ -475,6 +475,9 @@ h1, .h1, h2, .h2, h3, .h3 {
     display: grid;
     grid-template-rows: 1fr;
 }
+.slide-out-hidden {
+    grid-template-rows: 0fr;
+}
 .slide-out.slide-down {
     animation: slide-down 0.4s;
 }