diff --git a/elections2021/templates/elections2021/_benefit_block.html b/elections2021/templates/elections2021/_benefit_block.html
index 939ce9f6474cc06ca81313321bd4addef805dd48..8ee54b72a6e398bee02cbd27661a2e005dd2092f 100644
--- a/elections2021/templates/elections2021/_benefit_block.html
+++ b/elections2021/templates/elections2021/_benefit_block.html
@@ -1,7 +1,7 @@
{% load wagtailcore_tags elections2021_extras %}
-<div class="card shadow-none bg-acidgreen text-black card--hoveractive">
+<div class="card shadow-none bg-acidgreen text-black">
<div class="card__body">
- <h1 class="card-headline mb-8">{{ block.value.title }}</h1>
- <p class="card-body-text">{{ block.value.text|richtext|format_sources }}</p>
+ <h3 class="card-headline mb-8">{{ block.value.title }}</h3>
+ <div class="card-body-text">{{ block.value.text|richtext|format_sources }}</div>
</div>
</div>
diff --git a/elections2021/templates/elections2021/_floating_navigation.html b/elections2021/templates/elections2021/_floating_navigation.html
new file mode 100644
index 0000000000000000000000000000000000000000..df92cdf3381c9a919d2333048660ff7ede5cb02b
--- /dev/null
+++ b/elections2021/templates/elections2021/_floating_navigation.html
@@ -0,0 +1,77 @@
+<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">
+ RYCHLÁ NAVIGACE
+ </div>
+ <div class="inner float-panel-inner elevation-2">
+ <ul>
+ {% block navigation_links %}
+ {% for slug, title in navigation %}
+ <li><a href="#{{ slug }}">{{ title }}</a></li>
+ {% endfor %}
+ {% endblock %}
+ </ul>
+ </div>
+ </div>
+</div>
+<script>
+ window.addEventListener("load", onLoadFunction);
+ var anchorsArray = [];
+
+ function placeUponId(id, space) {
+ return document.getElementById(id).getBoundingClientRect().top + window.scrollY - space;
+ }
+
+ function onLoadFunction(e) {
+ var anchorElemsArray;
+ onResizeFunction();
+ for (const entry of anchorsArray) {
+ entry.menuitem.addEventListener("click", clickHandler);
+ }
+
+ function clickHandler(e) {
+ e.preventDefault();
+ var id = this.getAttribute("href").replace("#", "");
+ //console.log(placeUponId(id, 20));
+ scroll({
+ top: placeUponId(id, 20),
+ behavior: "smooth"
+ });
+ }
+
+
+ window.addEventListener("resize", onResizeFunction);
+ }
+
+ function onResizeFunction(e) {
+ var itemsProcessed = 0;
+ var anchorElemsArray = document.getElementsByClassName("float-panel-inner")[0].querySelectorAll("li a");
+ anchorsArray = [];
+ anchorElemsArray.forEach(function(entry) {
+ var id = entry.getAttribute("href").replace("#", "");
+ anchorsArray.push({
+ id: id,
+ top: placeUponId(id, 200),
+ menuitem: entry
+ });
+ itemsProcessed++;
+ if (itemsProcessed === anchorElemsArray.length) {
+ anchorsArray.reverse();
+ }
+ });
+ //console.log(anchorsArray);
+ }
+ window.onscroll = function() {
+ var top = window.pageYOffset || document.documentElement.scrollTop;
+ var activereached = false;
+ anchorsArray.forEach(function(entry) {
+ entry.menuitem.classList.remove("active");
+ entry.menuitem.classList.remove("passed");
+ if (top >= placeUponId(entry.id, 200)) {
+ if (activereached) entry.menuitem.classList.add("passed");
+ else entry.menuitem.classList.add("active");
+ activereached = true;
+ }
+ });
+ };
+</script>
diff --git a/elections2021/templates/elections2021/_main_benefit_block.html b/elections2021/templates/elections2021/_main_benefit_block.html
index fb8c938f0c8583b3f69bfdcc05cae6fd11513403..b6008f2e47e7c2d88484bb0b5fd92b2a24fdf251 100644
--- a/elections2021/templates/elections2021/_main_benefit_block.html
+++ b/elections2021/templates/elections2021/_main_benefit_block.html
@@ -2,7 +2,7 @@
<div class="benefit">
<img src="{% static photo %}">
<div class="benefit-detail bg-acidgreen">
- <p class="head-heavy-sm w-full pr-8">{{ title }}</p>
- <p class="text-sm">{{ block.value.text|richtext|format_sources }}</p>
+ <p class="head-heavy-sm w-full">{{ title }}</p>
+ <div class="text-sm">{{ block.value.text|richtext|format_sources }}</div>
</div>
</div>
diff --git a/elections2021/templates/elections2021/base.html b/elections2021/templates/elections2021/base.html
index eb90d995b5e4c9ab43cac23b0a4b63de8fcedd6b..40e1a275e29e83f0a7839eefea7d1edc3a047399 100644
--- a/elections2021/templates/elections2021/base.html
+++ b/elections2021/templates/elections2021/base.html
@@ -17,6 +17,11 @@
<!-- Styles -->
<link rel="stylesheet" href="{% static "elections2021/css/styleguide.min.css" %}">
<link rel="stylesheet" href="{% static "elections2021/css/styles.css" %}">
+ <style type="text/css">
+ sup {
+ white-space: nowrap;
+ }
+ </style>
{% if page.root_page.matomo_id %}
{% include "shared/matomo_snippet.html" with matomo_id=page.root_page.matomo_id %}
diff --git a/elections2021/templates/elections2021/elections2021_home_page.html b/elections2021/templates/elections2021/elections2021_home_page.html
index dc0b7c40cc9dc103905c23648f4a6bd3d3a30613..e28244d035df811c48a53353db4d1fcee1005228 100644
--- a/elections2021/templates/elections2021/elections2021_home_page.html
+++ b/elections2021/templates/elections2021/elections2021_home_page.html
@@ -70,7 +70,7 @@
</section>
{% if page.elections_date %}
- <section class="mb-16 lg:my-28 container-padding--zero lg:container-padding--auto">
+ <section class="my-16 lg:my-28 container-padding--zero lg:container-padding--auto">
<aside class="bg-black text-white px-4 py-12 lg:py-16 lg:px-24 ">
<div class="flex flex-col lg:flex-row items-center">
<h1 class="head-alt-md md:head-alt-xl flex-grow text-center lg:text-left mb-8 lg:mb-0">Do voleb<br>nám zbývá</h1>
diff --git a/elections2021/templates/elections2021/elections2021_program_page.html b/elections2021/templates/elections2021/elections2021_program_page.html
index d1d5e0b5ca30d6bb79a2b77a5fe096ca7979ca70..4fd334fb72133dad3c3ebded56d7bf59fbe93e3f 100644
--- a/elections2021/templates/elections2021/elections2021_program_page.html
+++ b/elections2021/templates/elections2021/elections2021_program_page.html
@@ -67,7 +67,7 @@
{% if not active_my_program %}
<div class="filters">
- <div class="select inline-flex w-auto {% if active_ministry %}text-black{% else %}text-white{% endif %}">
+ <div class="select inline-flex w-full md:w-auto my-2 {% if active_ministry %}text-black{% else %}text-white{% endif %}">
<select id="select_ministry" class="select__control form-field__control bg-black block filter-pirati-stan" data-chosen="{{ active_ministry }}">
<option value="x" {% if not active_ministry %}selected="selected"{% endif %}>Podle oblasti</option>
{% for val, name in ministry_choices %}
@@ -75,7 +75,7 @@
{% endfor %}
</select>
</div>
- <div class="select inline-flex w-auto {% if active_plan %}text-black{% else %}text-white{% endif %}">
+ <div class="select inline-flex w-full md:w-auto my-2 {% if active_plan %}text-black{% else %}text-white{% endif %}">
<select id="select_plan" class="select__control form-field__control bg-black block filter-pirati-stan" data-chosen="{{ active_plan }}">
<option value="x">Podle plánu</option>
{% for val, name in plan_choices %}
@@ -115,10 +115,10 @@
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 pt-8">
{% for point in points %}
- <div class="card icon-card shadow-none bg-grey-125 card--hoveractive" data-archetype="{% if show_archetype_icon %}{{ point.archetype }}{% endif %}">
+ <div class="card icon-card shadow-none bg-grey-125 card--hoveractive" data-archetype="{% if show_archetype_icon %}{{ point.archetype }}{% endif %}">
<div class="card__body">
- <h1 class="card-headline mb-8 pr-12"><a href="{% pageurl point %}">{{ point.title }}</a></h1>
- <p class="card-body-text content-block">{{ point.annotation|richtext }}</p>
+ <h1 class="card-headline mb-8"><a href="{% pageurl point %}">{{ point.title }}</a></h1>
+ <div class="card-body-text">{{ point.annotation|richtext }}</div>
</div>
</div>
diff --git a/elections2021/templates/elections2021/elections2021_program_point_page.html b/elections2021/templates/elections2021/elections2021_program_point_page.html
index 24c68ab8a3b6f2de14c956323654a4bf10bbcddc..99af8f3f59af3fabbc71cb8884ac4178e527c232 100644
--- a/elections2021/templates/elections2021/elections2021_program_point_page.html
+++ b/elections2021/templates/elections2021/elections2021_program_point_page.html
@@ -5,7 +5,6 @@
<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">
@@ -13,21 +12,83 @@
</div>
<div class="inner float-panel-inner elevation-2">
<ul>
- <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>
+ <li><a href="#takhle-to-dal-nejde">Takhle to dál nejde</a></li>
+ <li><a href="#v-cem-je-problem">V čem je problém</a></li>
+ <li><a href="#nase-vize">Naše vize</a></li>
+ <li><a href="#jak-to-chceme-udelat" class="active">Jak to chceme udělat?</a></li>
+ <li><a href="#kolik-na-to-chceme-casu">Kolik na to chceme času?</a></li>
+ {% if page.benefits_main or page.benefits %}
+ <li><a href="#pro-koho-to-chceme-hlavne">Pro koho to chceme hlavně</a></li>
+ {% 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át</a></li>
+ <li><a href="#zdroje">Klidně si to ověřte</a></li>
</ul>
</div>
</div>
</div>
- {% endcomment %}
+
+ <script>
+ window.addEventListener("load", onLoadFunction);
+ var anchorsArray = [];
+
+ function placeUponId(id, space) {
+ return document.getElementById(id).getBoundingClientRect().top + window.scrollY - space;
+ }
+
+ function onLoadFunction(e) {
+ var anchorElemsArray;
+ onResizeFunction();
+ for (const entry of anchorsArray) {
+ entry.menuitem.addEventListener("click", clickHandler);
+ }
+
+ function clickHandler(e) {
+ e.preventDefault();
+ var id = this.getAttribute("href").replace("#", "");
+ console.log(placeUponId(id, 20));
+ scroll({
+ top: placeUponId(id, 20),
+ behavior: "smooth"
+ });
+ }
+
+
+ window.addEventListener("resize", onResizeFunction);
+ }
+
+ function onResizeFunction(e) {
+ var itemsProcessed = 0;
+ var anchorElemsArray = document.getElementsByClassName("float-panel-inner")[0].querySelectorAll("li a");
+ anchorsArray = [];
+ anchorElemsArray.forEach(function(entry) {
+ var id = entry.getAttribute("href").replace("#", "");
+ anchorsArray.push({
+ id: id,
+ top: placeUponId(id, 200),
+ menuitem: entry
+ });
+ itemsProcessed++;
+ if (itemsProcessed === anchorElemsArray.length) {
+ anchorsArray.reverse();
+ }
+ });
+ console.log(anchorsArray);
+ }
+ window.onscroll = function() {
+ var top = window.pageYOffset || document.documentElement.scrollTop;
+ var activereached = false;
+ anchorsArray.forEach(function(entry) {
+ entry.menuitem.classList.remove("active");
+ entry.menuitem.classList.remove("passed");
+ if (top >= placeUponId(entry.id, 200)) {
+ if (activereached) entry.menuitem.classList.add("passed");
+ else entry.menuitem.classList.add("active");
+ activereached = true;
+ }
+ });
+ };
+ </script>
<header class="w-full md:w-5/6">
<div class="mt-10 md:mt-12">
@@ -39,7 +100,7 @@
</header>
<div class="problem-pack">
- <section class="program-detail-problem-solution mb-20">
+ <section id="takhle-to-dal-nejde" 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">
@@ -49,7 +110,7 @@
{{ page.problem|richtext|format_sources }}
</p>
- <div class="__js-root">
+ <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">
@@ -57,8 +118,10 @@
<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 style="overflow: hidden;">
+ <div class="clampedcontent content-block">
+ {{ page.context|richtext|format_sources }}
+ </div>
</div>
</div>
</div>
@@ -67,7 +130,7 @@
</div>
- <div class="ideal-check"><i class="ico--check text-xs sm:text-xl text-black"></i></div>
+ <div id="nase-vize" 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">Naše vize</h2>
<p class="text-base">
@@ -78,22 +141,21 @@
</section>
</div>
- <div class="container-collapsible-content" style="height: 50vh;">
+ <div id="jak-to-chceme-udelat" class="container-collapsible-content" style="height: 50vh;">
<h3 class="head-alt-base mb-8">Jak to chceme udělat?</h3>
<div class="content-block">
{{ page.proposal|richtext|format_sources }}
</div>
- <div class="grid grid-cols-1 gap-8 my-20">
-
+ <div id="kolik-na-to-chceme-casu" 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">Kolik na to chceme času?</h1>
<div class="__js-root ">
<div class="flip-clock">
- <span id="flip-card-years-87" class="flip-clock__piece flip">
+ <span 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>
@@ -107,20 +169,18 @@
</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">Kolik na to cheme času?</h3>
+ <h3 class="card-headline mb-8">Kolik na to chceme času?</h3>
<p class="card-body-text para">{{ page.time_horizon_text|richtext|format_sources }}</p>
</div>
</div>
{% endif %}
-
</div>
{% if page.benefits_main or page.benefits %}
- <h3 class="head-alt-base mb-8 mt-20">Pro koho to chceme hlavně</h3>
+ <h3 id="pro-koho-to-chceme-hlavne" class="head-alt-base mb-8 mt-20">Pro koho to chceme hlavně</h3>
{% endif %}
{% if page.benefits_main %}
@@ -143,34 +203,18 @@
<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 mt-20 mb-10">Co pro to už děláme</h3>
+ <h3 id="co-pro-to-uz-delame" class="head-alt-base mt-20 mb-10">Co pro to už děláme</h3>
<div class="content-block">
{{ page.already_done|richtext|format_sources }}
</div>
- <h3 class="head-alt-base mb-8 mt-20">Na co se nás často ptáte</h3>
+ <h3 id="na-co-se-nas-casto-ptate" class="head-alt-base mb-8 mt-20">Na co se nás často ptáte</h3>
<div class="space-y-1">
{% for block in page.faq %}
{% include_block block %}
{% endfor %}
</div>
- <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";
- };
- }
- }
- </script>
-
{% comment %}
{% if page.related_points %}
<h3 id="relatedpoints" class="head-alt-base mb-8 mt-20">Související body</h3>
@@ -242,4 +286,24 @@
</div>
</div>
+
+<script>
+ /*copied from molecules/accordeon-preview.mustache.*/
+ /*should run once on any page accordeon rows with previews are present*/
+ document.addEventListener("DOMContentLoaded", setMaxHeightsPreviews);
+ window.addEventListener('resize', setMaxHeightsPreviews);
+
+ function setMaxHeightsPreviews() {
+ // set height for css transition
+ var accordeonRowBodies = document.getElementsByClassName('accordeon-row-body--preview');
+
+ if (accordeonRowBodies !== null) {
+ for (var i = 0; i < accordeonRowBodies.length; i++) {
+ accordeonRowBodies[i].style.maxHeight = accordeonRowBodies[i].getElementsByClassName("clampedcontent")[0]
+ .scrollHeight + "px";
+ };
+ }
+ }
+</script>
+
{% endblock %}
diff --git a/elections2021/templates/elections2021/elections2021_strategic_page.html b/elections2021/templates/elections2021/elections2021_strategic_page.html
index d67f2b11d2eea727e51d5324200f0836853dd12e..9a206c6c3a8bc579f65a84e092e5334a5646df0a 100644
--- a/elections2021/templates/elections2021/elections2021_strategic_page.html
+++ b/elections2021/templates/elections2021/elections2021_strategic_page.html
@@ -12,80 +12,7 @@
<div class="lg:flex mt-20 justify-start">
<div class="lg:w-2/3 relative">
{% if navigation %}
- <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">
- RYCHLÁ NAVIGACE
- </div>
- <div class="inner float-panel-inner elevation-2">
- <ul>
- {% for slug, title in navigation %}
- <li><a href="#{{ slug }}">{{ title }}</a></li>
- {% endfor %}
- </ul>
- </div>
- </div>
- </div>
- <script>
- window.addEventListener("load", onLoadFunction);
- var anchorsArray = [];
-
- function placeUponId(id, space) {
- return document.getElementById(id).getBoundingClientRect().top + window.scrollY - space;
- }
-
- function onLoadFunction(e) {
- var anchorElemsArray;
- onResizeFunction();
- for (const entry of anchorsArray) {
- entry.menuitem.addEventListener("click", clickHandler);
- }
-
- function clickHandler(e) {
- e.preventDefault();
- var id = this.getAttribute("href").replace("#", "");
- //console.log(placeUponId(id, 20));
- scroll({
- top: placeUponId(id, 20),
- behavior: "smooth"
- });
- }
-
- window.addEventListener("resize", onResizeFunction);
- }
-
- function onResizeFunction(e) {
- var itemsProcessed = 0;
- var anchorElemsArray = document.getElementsByClassName("float-panel-inner")[0].querySelectorAll("li a");
- anchorsArray = [];
- anchorElemsArray.forEach(function(entry) {
- var id = entry.getAttribute("href").replace("#", "");
- anchorsArray.push({
- id: id,
- top: placeUponId(id, 200),
- menuitem: entry
- });
- itemsProcessed++;
- if (itemsProcessed === anchorElemsArray.length) {
- anchorsArray.reverse();
- }
- });
- //console.log(anchorsArray);
- }
- window.onscroll = function() {
- var top = window.pageYOffset || document.documentElement.scrollTop;
- var activereached = false;
- anchorsArray.forEach(function(entry) {
- entry.menuitem.classList.remove("active");
- entry.menuitem.classList.remove("passed");
- if (top >= placeUponId(entry.id, 200)) {
- if (activereached) entry.menuitem.classList.add("passed");
- else entry.menuitem.classList.add("active");
- activereached = true;
- }
- });
- };
- </script>
+ {% include "elections2021/_floating_navigation.html" %}
{% endif %}
<div class="content-block w-full">
diff --git a/elections2021/templatetags/elections2021_extras.py b/elections2021/templatetags/elections2021_extras.py
index 5c257f2e6e6fe1b15f1c0a255e160f495ae14049..9f510afd66d1b7075ba289d86683c0adb6db4aba 100644
--- a/elections2021/templatetags/elections2021_extras.py
+++ b/elections2021/templatetags/elections2021_extras.py
@@ -13,26 +13,39 @@ def format_sources_block(value):
soup = bs4.BeautifulSoup(value, "html.parser")
out = []
+ number = None
+ text = ""
for item in soup.children:
for a in item.find_all("a"):
a["class"] = "text-fxactivecolor underline"
- text = "".join(str(c) for c in item.contents)
- number = ""
-
- m = re.match(r"^\[(\d+)\]\s(.+)", text)
+ content = "".join(str(c) for c in item.contents)
+ m = re.match(r"^\[(\d+)\]\s(.+)", content)
if m:
+ if number:
+ out.append(
+ f"""
+ <div id="zdroj{number}" class="source leading-loose text-sm">
+ <div class="inline-block align-top w-9 text-fxactivecolor">[{number}]</div>
+ <div class="inline-block align-top max-w-2xl">{text}</div>
+ </div>
+ """
+ )
+
number = m.group(1)
text = m.group(2)
-
- out.append(
- f"""
- <div id="zdroj{number}" class="source leading-loose text-sm">
- <div class="inline-block align-top w-9 text-fxactivecolor">[{number}]</div>
- <div class="inline-block align-top max-w-2xl">{text}</div>
- </div>
- """
- )
+ else:
+ text = f"{text}<br>{content}"
+
+ # append last
+ out.append(
+ f"""
+ <div id="zdroj{number}" class="source leading-loose text-sm">
+ <div class="inline-block align-top w-9 text-fxactivecolor">[{number}]</div>
+ <div class="inline-block align-top max-w-2xl">{text}</div>
+ </div>
+ """
+ )
return "".join(out)