From 354d4d66c87e7b027e4b486bc4500d95939e2ab5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jan=20Bedna=C5=99=C3=ADk?= <jan.bednarik@gmail.com>
Date: Sat, 15 May 2021 02:47:53 +0200
Subject: [PATCH] elections2021: Program point detail
---
.../elections2021_program_point_page.html | 73 ++++++++++++-------
1 file changed, 48 insertions(+), 25 deletions(-)
diff --git a/elections2021/templates/elections2021/elections2021_program_point_page.html b/elections2021/templates/elections2021/elections2021_program_point_page.html
index 8c5439ce..ccea7366 100644
--- a/elections2021/templates/elections2021/elections2021_program_point_page.html
+++ b/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>
--
GitLab