From 3aa655d758c5a39f38c33aec163422dc9b04d1ff Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jan=20Bedna=C5=99=C3=ADk?= <jan.bednarik@gmail.com>
Date: Thu, 13 May 2021 11:05:50 +0200
Subject: [PATCH] elections2021: Fix program point page
---
.../elections2021_program_point_page.html | 261 +++++++++---------
1 file changed, 133 insertions(+), 128 deletions(-)
diff --git a/elections2021/templates/elections2021/elections2021_program_point_page.html b/elections2021/templates/elections2021/elections2021_program_point_page.html
index 42bf08c1..8c5439ce 100644
--- a/elections2021/templates/elections2021/elections2021_program_point_page.html
+++ b/elections2021/templates/elections2021/elections2021_program_point_page.html
@@ -2,11 +2,9 @@
{% load wagtailcore_tags wagtailimages_tags elections2021_extras %}
{% block content %}
-<div class="container container-default container-collapsible pt-4 pb-20 container-collapsible-open">
+<div class="container container-default pt-4 pb-20">
+ <div class="w-full lg:w-4/6 relative container-collapsible">
- <div class="w-full lg:w-4/6 relative container-collapsible-content" style="max-height: 250vh;">
-
- {% 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">
@@ -21,7 +19,6 @@
</div>
</div>
</div>
- {% endcomment %}
<header class="w-full md:w-5/6">
<div class="mt-10 md:mt-12">
@@ -55,164 +52,172 @@
</section>
</div>
- <h3 class="head-alt-base mb-8">Navrhovaná opatření</h3>
- <div class="content-block">
- {{ page.proposal|richtext|format_sources }}
- </div>
+ {# <div class="container-collapsible-content" style="height: 50vh;"> #}
+ <div>
+
+ <h3 class="head-alt-base mb-8">Navrhovaná opatření</h3>
+ <div class="content-block">
+ {{ page.proposal|richtext|format_sources }}
+ </div>
- <div class="grid grid-cols-1 gap-8 my-20">
-
- {% 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>
- <div class="__js-root ">
- <div class="flip-clock">
- <span id="flip-card-years-87" class="flip-clock__piece flip">
- <span class="flip-clock__card flip-card">
- <b class="flip-card__top">{{ page.time_horizon_number }}</b>
- <b data-value="{{ page.time_horizon_number }}" class="flip-card__bottom"></b>
- <b data-value="{{ page.time_horizon_number }}" class="flip-card__back"></b>
- <b data-value="{{ page.time_horizon_number }}" class="flip-card__back-bottom"></b>
+ <div class="grid grid-cols-1 gap-8 my-20">
+
+ {% 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>
+ <div class="__js-root ">
+ <div class="flip-clock">
+ <span id="flip-card-years-87" class="flip-clock__piece flip">
+ <span class="flip-clock__card flip-card">
+ <b class="flip-card__top">{{ page.time_horizon_number }}</b>
+ <b data-value="{{ page.time_horizon_number }}" class="flip-card__bottom"></b>
+ <b data-value="{{ page.time_horizon_number }}" class="flip-card__back"></b>
+ <b data-value="{{ page.time_horizon_number }}" class="flip-card__back-bottom"></b>
+ </span>
+ <span class="flip-clock__slot font-alt text-2xl">{{ page.time_horizon_unit }}</span>
</span>
- <span class="flip-clock__slot font-alt text-2xl">{{ page.time_horizon_unit }}</span>
- </span>
+ </div>
</div>
</div>
+ </aside>
+ {% endif %}
+
+ {% 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>
+ <p class="card-body-text para">{{ page.time_horizon_text|richtext|format_sources }}</p>
+ </div>
</div>
- </aside>
- {% endif %}
+ {% endif %}
- {% 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>
- <p class="card-body-text para">{{ page.time_horizon_text|richtext|format_sources }}</p>
- </div>
+ </div>
+
+ {% if page.benefits_main or page.benefits %}
+ <h3 class="head-alt-base mb-8 mt-20">Benefity</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">
+ {% 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">
+ {% for block in page.benefits %}
+ {% include_block block %}
+ {% endfor %}
</div>
{% endif %}
- </div>
+ {% if page.benefit_for_all %}
+ <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 %}
- {% if page.benefits_main or page.benefits %}
- <h3 class="head-alt-base mb-8 mt-20">Benefity</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">
- {% for block in page.benefits_main %}
- {% include_block block %}
- {% endfor %}
+ <h3 class="head-alt-base mb-10">Co už jsme udělali</h3>
+ <div class="content-block">
+ {{ page.already_done|richtext|format_sources }}
</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">
- {% for block in page.benefits %}
+
+ <h3 class="head-alt-base mb-8 mt-20">FAQ</h3>
+ <div class="space-y-1">
+ {% for block in page.faq %}
{% include_block block %}
{% endfor %}
</div>
- {% endif %}
-
- {% if page.benefit_for_all %}
- <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>
- <div class="content-block">
- {{ page.already_done|richtext|format_sources }}
- </div>
-
- <h3 class="head-alt-base mb-8 mt-20">FAQ</h3>
- <div class="space-y-1">
+ <script>
+ document.addEventListener("DOMContentLoaded", setMaxHeights);
+ window.addEventListener('resize', setMaxHeights);
- {% for block in page.faq %}
- {% include_block block %}
- {% endfor %}
- </div>
+ function setMaxHeights() {
+ // set height for css transition
+ var accordeonRowBodies = document.getElementsByClassName('accordeon-row-body');
- <script>
- document.addEventListener("DOMContentLoaded", setMaxHeights);
- window.addEventListener('resize', setMaxHeights);
-
- function setMaxHeights() {
- // set height for css transition
- var accordeonRowBodies = document.getElementsByClassName('accordeon-row-body');
-
- if (accordeonRowBodies !== null) {
- for (var i = 0; i < accordeonRowBodies.length; i++) {
- accordeonRowBodies[i].style.maxHeight = accordeonRowBodies[i].scrollHeight + "px";
- };
+ if (accordeonRowBodies !== null) {
+ for (var i = 0; i < accordeonRowBodies.length; i++) {
+ accordeonRowBodies[i].style.maxHeight = accordeonRowBodies[i].scrollHeight + "px";
+ };
+ }
}
- }
- </script>
-
- {% 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">
- <div class="grid grid-cols-1 md:grid-cols-2 gap-2 md:gap-8">
-
- <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>
+ </script>
+
+ {% 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">
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-2 md:gap-8">
+
+ <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>
</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 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>
</div>
- </div>
+ </div>
</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 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>
</div>
- </div>
- {% endif %}
- {% endcomment %}
+ {% 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 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>
- {{ page.sources|richtext|format_sources_block }}
+ <h3 id="zdroje" class="head-alt-base mb-8 mt-8">Zdroje</h3>
+ <div class="content-block">
+ {{ page.sources|richtext|format_sources_block }}
+ </div>
- </div>
+ </div>
- <div class="container-collapsible-button-container w-full lg:w-4/6">
- <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">
- <div class="btn__body py-8 leading-4">Zobrazit více</div>
- <div class="btn__icon px-8 bg-grey-800 border-grey-500">
- <i class="ico--chevron-right"></i>
+ {% 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">
+ <div class="btn__body py-8 leading-4">Zobrazit více</div>
+ <div class="btn__icon px-8 bg-grey-800 border-grey-500">
+ <i class="ico--chevron-right"></i>
+ </div>
</div>
- </div>
- </button>
+ </button>
+ </div>
+ {% endcomment %}
+
</div>
</div>
{% endblock %}
--
GitLab