elections2021: Program page accordeon

elections2021/templates/elections2021/elections2021_program_point_page.html

@@ -110,24 +110,27 @@
             {{ page.problem|richtext|format_sources }}
           </p>
 
-          <div id="v-cem-je-problem" class="__js-root">
-            <div>
-              <div class="accordeon-row accordeon-row--preview">
-                <div onclick="if(this.parentElement.classList.contains('accordeon-row--open')) this.parentElement.classList.remove('accordeon-row--open'); else this.parentElement.classList.add('accordeon-row--open');" class="accordeon-row-head">
-                  <h3 class="accordeon-row-heading head-alt-xs mb-0">V čem je problém</h3>
-                  <i class="ico--chevron-down"></i>
+          <div id="v-cem-je-problem">
+            <div class="accordeon-row accordeon-row--fadeout h-full">
+              <div class="accordeon-row-head" v-on:click="toggleElement" onclick="if(this.parentElement.classList.contains('accordeon-row--open')) this.parentElement.classList.remove('accordeon-row--open'); else this.parentElement.classList.add('accordeon-row--open');">
+                <h3 class="accordeon-row-heading head-alt-xs mb-0">V čem je problém</h3>
+                <i class="ico--chevron-down"></i>
+              </div>
+              <div class="accordeon-row-body accordeon-row-body--fadeout" style="height: 220px; max-height: 560px;">
+                <div>
+                  {{ page.context|richtext|format_sources }}
                 </div>
-                <div class="accordeon-row-body accordeon-row-body--preview" style="max-height: 153px;">
-                  <div style="overflow: hidden;">
-                    <div class="clampedcontent content-block">
-                      {{ page.context|richtext|format_sources }}
-                    </div>
+              </div>
+              <button class="btn btn--icon absolute bottom-8 left-8" onclick="this.parentElement.classList.add('accordeon-row--open');">
+                <div class="btn__body-wrap">
+                  <div class="btn__body bg-acidgreen -bottom-20 text-black py-4">Zobrazit více</div>
+                  <div class="btn__icon bg-black">
+                    <i class="ico--chevron-right"></i>
                   </div>
                 </div>
-              </div>
+              </button>
             </div>
           </div>
-
         </div>
 
         <div id="nase-vize" class="ideal-check"><i class="ico--check text-xs sm:text-xl text-black"></i></div>
@@ -288,17 +291,18 @@
 </div>
 
 <script>
-  document.addEventListener("DOMContentLoaded", setMaxHeights);
-  window.addEventListener('resize', setMaxHeights);
+  /*should run once on any page accordeon rows with fadeouts are present*/
+  document.addEventListener("DOMContentLoaded", setMaxHeightsFadeouts);
+  window.addEventListener('resize', setMaxHeightsFadeouts);
 
-  function setMaxHeights() {
+  function setMaxHeightsFadeouts() {
     // set height for css transition
-    var accordeonRowBodies = document.getElementsByClassName('accordeon-row-body');
+    var accordeonRowBodies = document.getElementsByClassName('accordeon-row-body--fadeout');
 
     if (accordeonRowBodies !== null) {
       for (var i = 0; i < accordeonRowBodies.length; i++) {
-        accordeonRowBodies[i].style.maxHeight = accordeonRowBodies[i].scrollHeight + "px";
-      };
+        accordeonRowBodies[i].style.maxHeight = (parseInt(accordeonRowBodies[i].scrollHeight) + 32) + "px";
+      }; /*plus padding*/
     }
   }
 </script>