elections2021: Program point detail

elections2021/templates/elections2021/elections2021_program_point_page.html

@@ -5,6 +5,7 @@
 <div class="container container-default pt-4 pb-20">
   <div class="w-full lg:w-4/6 relative container-collapsible">
 
+    {% comment %}
     <div class="floating-nav-wrapper hidden lg:block" id="floatingNavBarWrapper">
       <div class="floating-nav-panel " id="floatingNavBar">
         <div class="opener py-6 pb-16 px-11 bg-acidgreen text-white font-alt">
@@ -12,13 +13,21 @@
         </div>
         <div class="inner float-panel-inner elevation-2">
           <ul>
-            <li class="active">Problém</li>
-            <li>Ideál</li>
-            <li>Benefity</li>
+            <li>Co nás štve?</li>
+            <li>Proč je to problém?</li>
+            <li>Naše vize</li>
+            <li>Jak toho chceme docílit?</li>
+            <li>Kolik potřebujeme času?</li>
+            <li>Co to přinese?</li>
+            <li>Co jsme už odpracovali?</li>
+            <li>Často kladené otázky</li>
+            <li>Související body</li>
+            <li>Zdroje a doplňující informace</li>
           </ul>
         </div>
       </div>
     </div>
+    {% endcomment %}
 
     <header class="w-full md:w-5/6">
       <div class="mt-10 md:mt-12">
@@ -31,31 +40,47 @@
 
     <div class="problem-pack">
       <section class="program-detail-problem-solution mb-20">
+
         <div class="problem-cross"><i class="ico--thincross text-xs sm:text-xl text-white"></i></div>
         <div class="problem-inner content-block">
-          <h2 class="head-alt-sm md:head-alt-md mb-9">Problém</h2>
+
+          <h2 class="head-alt-sm md:head-alt-md mb-9">Co nás štve?</h2>
           <p class="text-base mb-8 para">
             {{ page.problem|richtext|format_sources }}
           </p>
-          <h3 class="head-alt-xs md:head-alt-sm mb-9">Kontext problému</h3>
-          <p class="text-base mb-8 para">
-            {{ page.context|richtext|format_sources }}
-          </p>
+
+          <div 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">Proč je to problém?</h3>
+                  <i class="ico--chevron-down"></i>
+                </div>
+                <div class="accordeon-row-body accordeon-row-body--preview" style="max-height: 153px;">
+                  <div class="clampedcontent">
+                    {{ page.context|richtext|format_sources }}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
         </div>
+
         <div class="ideal-check"><i class="ico--check text-xs sm:text-xl text-black"></i></div>
         <div class="ideal-inner bg-lemon content-block">
-          <h2 class="head-alt-sm md:head-alt-md mb-9">Ideál</h2>
+          <h2 class="head-alt-sm md:head-alt-md mb-9">Naše vize</h2>
           <p class="text-base">
             {{ page.ideal|richtext|format_sources }}
           </p>
         </div>
+
       </section>
     </div>
 
-    {# <div class="container-collapsible-content" style="height: 50vh;"> #}
-    <div>
+    <div class="container-collapsible-content" style="height: 50vh;">
 
-      <h3 class="head-alt-base mb-8">Navrhovaná opatření</h3>
+      <h3 class="head-alt-base mb-8">Jak toho chceme docílit?</h3>
       <div class="content-block">
         {{ page.proposal|richtext|format_sources }}
       </div>
@@ -65,7 +90,7 @@
         {% if page.time_horizon_number %}
           <aside class="bg-grey-125 text-black px-4 py-10 lg:py-10 lg:px-10 countdown-small ">
             <div class="flex flex-col lg:flex-row items-center">
-              <h1 class="head-alt-sm flex-grow text-center lg:text-left mb-8 lg:mb-0 mt-1">Časový horizont</h1>
+              <h1 class="head-alt-sm flex-grow text-center lg:text-left mb-8 lg:mb-0 mt-1">Kolik potřebujeme času?</h1>
               <div class="__js-root ">
                 <div class="flip-clock">
                   <span id="flip-card-years-87" class="flip-clock__piece flip">
@@ -86,7 +111,7 @@
         {% if page.time_horizon_text %}
           <div class="card shadow-none bg-grey-125">
             <div class="card__body content-block">
-              <h3 class="card-headline mb-8">Časový horizont</h3>
+              <h3 class="card-headline mb-8">Kolik potřebujeme času?</h3>
               <p class="card-body-text para">{{ page.time_horizon_text|richtext|format_sources }}</p>
             </div>
           </div>
@@ -95,17 +120,19 @@
       </div>
 
       {% if page.benefits_main or page.benefits %}
-        <h3 class="head-alt-base mb-8 mt-20">Benefity</h3>
+        <h3 class="head-alt-base mb-8 mt-20">Co to přinese?</h3>
       {% endif %}
+
       {% if page.benefits_main %}
-        <div class="program-detail-benefity my-8 grid grid-cols-1 sm:grid-cols-2 gap-4 lg:gap-8">
+        <div class="program-detail-benefity grid grid-cols-1 sm:grid-cols-2 gap-4 lg:gap-8">
           {% for block in page.benefits_main %}
             {% include_block block %}
           {% endfor %}
         </div>
       {% endif %}
+
       {% if page.benefits %}
-        <div class="program-detail-benefity my-8 grid grid-cols-1 sm:grid-cols-2 gap-4 lg:gap-8">
+        <div class="program-detail-benefity mt-8 grid grid-cols-1 sm:grid-cols-2 gap-4 lg:gap-8">
           {% for block in page.benefits %}
             {% include_block block %}
           {% endfor %}
@@ -116,12 +143,12 @@
         <h3 class="head-alt-lg mb-20 text-3xl md:text-5xl leading-tight mt-24">{{ page.benefit_for_all|richtext|format_sources }}</h3>
       {% endif %}
 
-      <h3 class="head-alt-base mb-10">Co už jsme udělali</h3>
+      <h3 class="head-alt-base mb-10">Co jsme už odpracovali?</h3>
       <div class="content-block">
         {{ page.already_done|richtext|format_sources }}
       </div>
 
-      <h3 class="head-alt-base mb-8 mt-20">FAQ</h3>
+      <h3 class="head-alt-base mb-8 mt-20">Často kladené otázky</h3>
       <div class="space-y-1">
         {% for block in page.faq %}
           {% include_block block %}
@@ -144,6 +171,7 @@
         }
       </script>
 
+
       {% comment %}
       {% if page.related_points %}
         <h3 id="relatedpoints" class="head-alt-base mb-8 mt-20">Související body:</h3>
@@ -195,17 +223,13 @@
       {% endif %}
       {% endcomment %}
 
-      <h3 class="head-alt-base mb-3 mt-20">Které části jsou závazné</h3>
-      <p><a href="#" class="text-acidgreen underline">Zjistit více</a></p>
-
-      <h3 id="zdroje" class="head-alt-base mb-8 mt-8">Zdroje</h3>
+      <h3 id="zdroje" class="head-alt-base mb-8 mt-8">Zdroje a doplňující informace</h3>
       <div class="content-block">
         {{ page.sources|richtext|format_sources_block }}
       </div>
 
     </div>
 
-    {% comment %}
     <div class="container-collapsible-button-container w-full">
       <button class="container-collapsible-button btn btn--icon text-lg block mx-auto" onclick="this.parentElement.parentElement.classList.add('container-collapsible-open');">
         <div class="btn__body-wrap">
@@ -216,7 +240,6 @@
         </div>
       </button>
     </div>
-    {% endcomment %}
 
   </div>
 </div>