elections2021: Program point show related

elections2021/templates/elections2021/elections2021_program_point_page.html

@@ -22,6 +22,9 @@
             {% endif %}
             <li><a href="#co-pro-to-uz-delame">Co pro to už děláme</a></li>
             <li><a href="#na-co-se-nas-casto-ptate">Na co se nás často ptáte</a></li>
+            {% if page.related_points %}
+              <li><a href="#souvisejici-body">Související body</a></li>
+            {% endif %}
             <li><a href="#zdroje">Klidně si to ověřte</a></li>
           </ul>
         </div>
@@ -218,58 +221,43 @@
         {% endfor %}
       </div>
 
-      {% comment %}
       {% if page.related_points %}
-        <h3 id="relatedpoints" class="head-alt-base mb-8 mt-20">Související body</h3>
-        <div class="">
-          <div class="__js-root">
-            <div>
-              <div class="VueCarousel article-card-list pb-8">
-                <div class="VueCarousel-wrapper">
-                  <div class="VueCarousel-inner" style="transform: translate(0px, 0px); transition: transform 0.5s ease 0s; flex-basis: 868px; visibility: visible; height: auto;">
-                    <div tabindex="-1" role="tabpanel" class="VueCarousel-slide VueCarousel-slide-active VueCarousel-slide-center">
+        <h3 id="souvisejici-body" class="head-alt-base mb-8 mt-20">Související body:</h3>
+
+        <div class="carousel-card-list __js-root">
+          <ui-app inline-template>
+            <ui-carousel>
+              <!--<carousel :perPage="4" :perPageCustom="[ [200, 1], [768, 3], [1024, 4]]" :navigationEnabled="true" :navigationNextLabel="nextlabel" :navigationPrevLabel="prevlabel" class="article-card-list pt-12 pb-8">-->
+              <carousel :per-page=1 :navigation-enabled="true" class="article-card-list pb-8">
+
+                <slide>
                   <div class="grid grid-cols-1 md:grid-cols-2 gap-2 md:gap-8">
 
+                    {% for point in page.related_points %}
                       <div class="card shadow-none bg-grey-125 card--hoveractive">
                         <div class="card__body">
-                            <h1 class="card-headline mb-8">
-                              <a href="#">Otevřenost a zapojení občanů</a>
-                            </h1>
-                            <p class="card-body-text">Short description</p>
+                          <h1 class="card-headline mb-8"><a href="{% pageurl point.value %}">{{ point.value.title }}</a></h1>
+                          <div class="card-body-text"><a href="{% pageurl point.value %}">{{ point.value.annotation|richtext|strip_sup }}</a></div>
                         </div>
                       </div>
-
-                        <div class="card shadow-none bg-grey-125 card--hoveractive">
-                          <div class="card__body">
-                            <h1 class="card-headline mb-8">
-                              <a href="#">Otevřenost a zapojení občanů</a>
-                            </h1>
-                            <p class="card-body-text">Short description</p>
-                          </div>
+                      {% if forloop.counter|divisibleby:"4" and not forloop.last %}
                           </div>
+                        </slide>
+                        <slide>
+                          <div class="grid grid-cols-1 md:grid-cols-2 gap-2 md:gap-8">
+                      {% endif %}
+                    {% endfor %}
 
                   </div>
-                    </div>
-                  </div>
-                </div>
-                <div data-v-453ad8cd="" class="VueCarousel-navigation">
-                  <button data-v-453ad8cd="" type="button" aria-label="Previous page" tabindex="-1" class="VueCarousel-navigation-button VueCarousel-navigation-prev VueCarousel-navigation--disabled" style="padding: 8px; margin-right: -8px;">◀</button>
-                  <button data-v-453ad8cd="" type="button" aria-label="Next page" tabindex="0" class="VueCarousel-navigation-button VueCarousel-navigation-next" style="padding: 8px; margin-left: -8px;">▶</button>
-                </div>
-                <div data-v-438fd353="" class="VueCarousel-pagination" style="">
-                  <div data-v-438fd353="" role="tablist" class="VueCarousel-dot-container" style="margin-top: 20px;">
-                    <button data-v-438fd353="" aria-hidden="false" role="tab" title="Item 0" value="Item 0" aria-label="Item 0" aria-selected="true" class="VueCarousel-dot VueCarousel-dot--active" style="margin-top: 20px; padding: 10px; width: 10px; height: 10px; background-color: rgb(0, 0, 0);"></button>
-                    <button data-v-438fd353="" aria-hidden="false" role="tab" title="Item 1" value="Item 1" aria-label="Item 1" aria-selected="false" class="VueCarousel-dot" style="margin-top: 20px; padding: 10px; width: 10px; height: 10px; background-color: rgb(239, 239, 239);"></button>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
+                </slide>
+
+              </carousel>
+            </ui-carousel>
+          </ui-app>
         </div>
       {% endif %}
-      {% endcomment %}
 
-      <h3 id="zdroje" class="head-alt-base mb-8 mt-8">Klidně si to ověřte</h3>
+      <h3 id="zdroje" class="head-alt-base mb-8 mt-20">Klidně si to ověřte</h3>
       <div class="content-block">
         {{ page.sources|richtext|format_sources_block }}
       </div>