Skip to content
Snippets Groups Projects
Commit 3aa655d7 authored by jan.bednarik's avatar jan.bednarik
Browse files

elections2021: Fix program point page

parent ca3399cf
No related branches found
No related tags found
2 merge requests!228elections2021: Fix program point page,!227elections2021: Fix program point page
Pipeline #3565 passed
Stage: build
Hide whitespace changes
Inline Side-by-side
elections2021/templates/elections2021/elections2021_program_point_page.html
+ 133
− 128
View file @ 3aa655d7
...@@ -2,11 +2,9 @@ ...@@ -2,11 +2,9 @@
{% load wagtailcore_tags wagtailimages_tags elections2021_extras %} {% load wagtailcore_tags wagtailimages_tags elections2021_extras %}
{% block content %} {% 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-wrapper hidden lg:block" id="floatingNavBarWrapper">
<div class="floating-nav-panel " id="floatingNavBar"> <div class="floating-nav-panel " id="floatingNavBar">
<div class="opener py-6 pb-16 px-11 bg-acidgreen text-white font-alt"> <div class="opener py-6 pb-16 px-11 bg-acidgreen text-white font-alt">
...@@ -21,7 +19,6 @@ ...@@ -21,7 +19,6 @@
</div> </div>
</div> </div>
</div> </div>
{% endcomment %}
<header class="w-full md:w-5/6"> <header class="w-full md:w-5/6">
<div class="mt-10 md:mt-12"> <div class="mt-10 md:mt-12">
...@@ -55,164 +52,172 @@ ...@@ -55,164 +52,172 @@
</section> </section>
</div> </div>
<h3 class="head-alt-base mb-8">Navrhovaná opatření</h3> {# <div class="container-collapsible-content" style="height: 50vh;"> #}
<div class="content-block"> <div>
{{ page.proposal|richtext|format_sources }}
</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"> <div class="grid grid-cols-1 gap-8 my-20">
{% if page.time_horizon_number %} {% if page.time_horizon_number %}
<aside class="bg-grey-125 text-black px-4 py-10 lg:py-10 lg:px-10 countdown-small "> <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"> <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">Časový horizont</h1>
<div class="__js-root "> <div class="__js-root ">
<div class="flip-clock"> <div class="flip-clock">
<span id="flip-card-years-87" class="flip-clock__piece flip"> <span id="flip-card-years-87" class="flip-clock__piece flip">
<span class="flip-clock__card flip-card"> <span class="flip-clock__card flip-card">
<b class="flip-card__top">{{ page.time_horizon_number }}</b> <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__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"></b>
<b data-value="{{ page.time_horizon_number }}" class="flip-card__back-bottom"></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>
<span class="flip-clock__slot font-alt text-2xl">{{ page.time_horizon_unit }}</span> </div>
</span>
</div> </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> </div>
</aside> {% endif %}
{% endif %}
{% if page.time_horizon_text %} </div>
<div class="card shadow-none bg-grey-125">
<div class="card__body content-block"> {% if page.benefits_main or page.benefits %}
<h3 class="card-headline mb-8">Časový horizont</h3> <h3 class="head-alt-base mb-8 mt-20">Benefity</h3>
<p class="card-body-text para">{{ page.time_horizon_text|richtext|format_sources }}</p> {% endif %}
</div> {% 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> </div>
{% endif %} {% 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-10">Co už jsme udělali</h3>
<h3 class="head-alt-base mb-8 mt-20">Benefity</h3> <div class="content-block">
{% endif %} {{ page.already_done|richtext|format_sources }}
{% 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> </div>
{% endif %}
{% if page.benefits %} <h3 class="head-alt-base mb-8 mt-20">FAQ</h3>
<div class="program-detail-benefity my-8 grid grid-cols-1 sm:grid-cols-2 gap-4 lg:gap-8"> <div class="space-y-1">
{% for block in page.benefits %} {% for block in page.faq %}
{% include_block block %} {% include_block block %}
{% endfor %} {% endfor %}
</div> </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> <script>
<div class="content-block"> document.addEventListener("DOMContentLoaded", setMaxHeights);
{{ page.already_done|richtext|format_sources }} window.addEventListener('resize', setMaxHeights);
</div>
<h3 class="head-alt-base mb-8 mt-20">FAQ</h3>
<div class="space-y-1">
{% for block in page.faq %} function setMaxHeights() {
{% include_block block %} // set height for css transition
{% endfor %} var accordeonRowBodies = document.getElementsByClassName('accordeon-row-body');
</div>
<script> if (accordeonRowBodies !== null) {
document.addEventListener("DOMContentLoaded", setMaxHeights); for (var i = 0; i < accordeonRowBodies.length; i++) {
window.addEventListener('resize', setMaxHeights); accordeonRowBodies[i].style.maxHeight = accordeonRowBodies[i].scrollHeight + "px";
};
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";
};
} }
} </script>
</script>
{% comment %}
{% comment %} {% if page.related_points %}
{% if page.related_points %} <h3 id="relatedpoints" class="head-alt-base mb-8 mt-20">Související body:</h3>
<h3 id="relatedpoints" class="head-alt-base mb-8 mt-20">Související body:</h3> <div class="">
<div class=""> <div class="__js-root">
<div class="__js-root"> <div>
<div> <div class="VueCarousel article-card-list pb-8">
<div class="VueCarousel article-card-list pb-8"> <div class="VueCarousel-wrapper">
<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 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 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="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 shadow-none bg-grey-125 card--hoveractive"> <div class="card__body">
<div class="card__body"> <h1 class="card-headline mb-8">
<h1 class="card-headline mb-8"> <a href="#">Otevřenost a zapojení občanů</a>
<a href="#">Otevřenost a zapojení občanů</a> </h1>
</h1> <p class="card-body-text">Short description</p>
<p class="card-body-text">Short description</p> </div>
</div> </div>
</div>
<div class="card shadow-none bg-grey-125 card--hoveractive"> <div class="card shadow-none bg-grey-125 card--hoveractive">
<div class="card__body"> <div class="card__body">
<h1 class="card-headline mb-8"> <h1 class="card-headline mb-8">
<a href="#">Otevřenost a zapojení občanů</a> <a href="#">Otevřenost a zapojení občanů</a>
</h1> </h1>
<p class="card-body-text">Short description</p> <p class="card-body-text">Short description</p>
</div>
</div> </div>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> <div data-v-453ad8cd="" class="VueCarousel-navigation">
<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="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>
<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> <div data-v-438fd353="" class="VueCarousel-pagination" style="">
<div data-v-438fd353="" class="VueCarousel-pagination" style=""> <div data-v-438fd353="" role="tablist" class="VueCarousel-dot-container" style="margin-top: 20px;">
<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 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>
<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>
</div> </div>
</div> </div>
</div> {% endif %}
{% endif %} {% endcomment %}
{% endcomment %}
<h3 class="head-alt-base mb-3 mt-20">Které části jsou závazné</h3> <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> <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</h3>
{{ page.sources|richtext|format_sources_block }} <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"> {% comment %}
<button class="container-collapsible-button btn btn--icon text-lg block mx-auto" onclick="this.parentElement.parentElement.classList.add('container-collapsible-open');"> <div class="container-collapsible-button-container w-full">
<div class="btn__body-wrap"> <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 py-8 leading-4">Zobrazit více</div> <div class="btn__body-wrap">
<div class="btn__icon px-8 bg-grey-800 border-grey-500"> <div class="btn__body py-8 leading-4">Zobrazit více</div>
<i class="ico--chevron-right"></i> <div class="btn__icon px-8 bg-grey-800 border-grey-500">
<i class="ico--chevron-right"></i>
</div>
</div> </div>
</div> </button>
</button> </div>
{% endcomment %}
</div> </div>
</div> </div>
{% endblock %} {% endblock %}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment

Pirátský GitLab - Home of the CopyLeft