diff --git a/elections2021/migrations/0048_elections2021goingtovotepage_header_text.py b/elections2021/migrations/0048_elections2021goingtovotepage_header_text.py
new file mode 100644
index 0000000000000000000000000000000000000000..cf7b9929c7b4ee28a230abbbc540621715ea38ca
--- /dev/null
+++ b/elections2021/migrations/0048_elections2021goingtovotepage_header_text.py
@@ -0,0 +1,21 @@
+# Generated by Django 3.2.6 on 2021-09-02 22:34
+
+import wagtail.core.fields
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+ dependencies = [
+ ("elections2021", "0047_auto_20210902_2033"),
+ ]
+
+ operations = [
+ migrations.AddField(
+ model_name="elections2021goingtovotepage",
+ name="header_text",
+ field=wagtail.core.fields.RichTextField(
+ blank=True, null=True, verbose_name="text v hlavičce"
+ ),
+ ),
+ ]
diff --git a/elections2021/models.py b/elections2021/models.py
index 18d214898af63b488d2162eb80561b64d5a949ec..46654b9b0103daf89e82e0792639c09138816299 100644
--- a/elections2021/models.py
+++ b/elections2021/models.py
@@ -383,6 +383,10 @@ class Elections2021HomePage(MetadataPageMixin, RoutablePageMixin, Page):
def government_team_page_url(self):
return get_subpage_url(self, Elections2021GovernmentTeamPage)
+ @cached_property
+ def going_to_vote_page_url(self):
+ return get_subpage_url(self, Elections2021GoingToVotePage)
+
@cached_property
def has_calendar(self):
try:
@@ -2863,6 +2867,9 @@ class Elections2021GoingToVotePage(SubpageMixin, MetadataPageMixin, Page):
### FIELDS
subtitle = models.CharField("podnadpis", blank=True, null=True, max_length=255)
+ header_text = RichTextField(
+ "text v hlavičce", blank=True, null=True, features=ARTICLE_RICH_TEXT_FEATURES
+ )
video = models.URLField("video na youtube", blank=True, null=True)
bottom_title = models.CharField(
"spodní nadpis", blank=True, null=True, max_length=255
@@ -2972,6 +2979,7 @@ class Elections2021GoingToVotePage(SubpageMixin, MetadataPageMixin, Page):
content_panels = Page.content_panels + [
FieldPanel("subtitle"),
+ FieldPanel("header_text"),
FieldPanel("video"),
MultiFieldPanel(
[FieldPanel("bottom_title"), FieldPanel("bottom_text")], "spodní obsah"
diff --git a/elections2021/static/elections2021/images/heads-active.png b/elections2021/static/elections2021/images/heads-active.png
index b788305c530bb8c47a75abd40938ef7c9385e71c..e4d8013624508c2ac1149df357b98ac08d56c804 100644
Binary files a/elections2021/static/elections2021/images/heads-active.png and b/elections2021/static/elections2021/images/heads-active.png differ
diff --git a/elections2021/static/elections2021/images/heads.png b/elections2021/static/elections2021/images/heads.png
index 48230ca7604e8ce41cb4af059fb11c5343e39a63..07cf888bbf6ba498005ae7c988d9ac81bdc44a52 100644
Binary files a/elections2021/static/elections2021/images/heads.png and b/elections2021/static/elections2021/images/heads.png differ
diff --git a/elections2021/templates/elections2021/_going_to_vote_section.html b/elections2021/templates/elections2021/_going_to_vote_section.html
index 01cfce561d123c3cbaa594bf1c52e880049f7ad2..31ad92d8ac7dd17e01702c0fb1bd4af43ce679fa 100644
--- a/elections2021/templates/elections2021/_going_to_vote_section.html
+++ b/elections2021/templates/elections2021/_going_to_vote_section.html
@@ -10,7 +10,7 @@
<h3 class="accordeon-row-heading head-alt-xs">{{ title }}</h3>
{% endif %}
</label>
- <div class="accordeon-row-body text-left pl-11">
+ <div class="accordeon-row-body text-left pl-11 pr-12">
<div class="content-block">
<h3 class="head-alt-md pt-2">{{ title|default:"" }}</h3>
{{ text|richtext }}
diff --git a/elections2021/templates/elections2021/base.html b/elections2021/templates/elections2021/base.html
index fcd47364d8e600885b6f07af02c12b8e0d502aa0..6ebf6ec445a269a3a387279f652f38519fb711da 100644
--- a/elections2021/templates/elections2021/base.html
+++ b/elections2021/templates/elections2021/base.html
@@ -38,6 +38,12 @@
padding-left: 0.5em !important;
margin-left: 1.5em;
}
+ .text-white li::before {
+ color: white !important;
+ }
+ .navbar-menu__submenu {
+ line-height: 200%;
+ }
</style>
{% block head %}{% endblock %}
@@ -102,6 +108,7 @@
<li><a href="{{ page.root_page.program_page_url }}" class="navbar-menu__link">Úplný program</a></li>
<li><a href="{{ page.root_page.program_strategic_page_url }}" class="navbar-menu__link">Program v 5 minutách</a></li>
<li><a href="{{ page.root_page.program_silver_page_url }}" class="navbar-menu__link">Stříbrný program pro seniory</a></li>
+ <li><a href="{{ page.root_page.going_to_vote_page_url }}" class="navbar-menu__link">Program pro mladé</a></li>
</ul>
</ui-navbar-subtitem>
</li>
@@ -133,10 +140,12 @@
</nav>
{% block content_header %}{% endblock %}
- <div class="relative">
- {% include "elections2021/_side_panel.html" %}
- {% block content %}{% endblock %}
- </div>
+ {% block content_full %}
+ <div class="relative">
+ {% include "elections2021/_side_panel.html" %}
+ {% block content %}{% endblock %}
+ </div>
+ {% endblock %}
<footer class="footer footer-pirati-stan bg-black text-white __js-root">
<ui-app inline-template>
diff --git a/elections2021/templates/elections2021/elections2021_going_to_vote_page.html b/elections2021/templates/elections2021/elections2021_going_to_vote_page.html
index c312c5c3b85825c211351a692c01891edba0b2d4..5dd561cf6af8e3dab173f786d50b782f451bb9ac 100644
--- a/elections2021/templates/elections2021/elections2021_going_to_vote_page.html
+++ b/elections2021/templates/elections2021/elections2021_going_to_vote_page.html
@@ -16,8 +16,13 @@
max-height: 2000px !important;
}
+ #young_voters .accordeon-row {
+ color: black;
+ }
+
#young_voters .accordeon-row-body {
background: white;
+ color: white;
}
#young_voters .accordeon-row:nth-of-type(1),
@@ -28,7 +33,7 @@
#young_voters .accordeon-row:nth-of-type(2),
#young_voters .accordeon-row:nth-of-type(6),
#young_voters .accordeon-row:nth-of-type(7) {
- background: var(--color-yellow-100);
+ background: #FFFF00;
}
#young_voters .accordeon-row:nth-of-type(3),
@@ -37,11 +42,11 @@
}
#young_voters .accordeon-row:nth-of-type(4) {
- background: var(--color-darkacidgreen);
+ background: #CFFF04;
}
#young_voters .accordeon-row:nth-of-type(5) {
- background: var(--color-white);
+ background: black;
}
ul.actions {
@@ -92,7 +97,7 @@
@media (min-width: 1366px) {
#young_voters .accordeon-row {
- border-left: 4px solid var(--color-white);
+ border-left: 8px solid black;
text-align: center;
}
@@ -108,8 +113,8 @@
#young_voters .accordeon-row:nth-of-type(5) img {
position: absolute;
- max-width: 150px;
- max-height: 150px;
+ max-width: 153px;
+ max-height: 153px;
top: 0;
overflow: hidden;
}
@@ -131,7 +136,7 @@
}
#young_voters .accordeon-row:nth-of-type(1) .accordeon-row-heading {
- background: var(--color-yellow-100);
+ background: #FFFF00;
}
#young_voters .accordeon-row:nth-of-type(2) .accordeon-row-heading,
@@ -158,7 +163,7 @@
}
.accordeon-row-body .content-block {
- padding: 0.2rem;
+ padding: 8px;
}
.container--default {
@@ -198,130 +203,137 @@
{% endblock %}
{% block content_header %}
- <article class=" relative bg-lemon md:bg-split-color px-4 md:pl-8 md:pr-0 2xl:px-8 hero py-0 w-full ">
- <div class="2xl:container w-auto bg-lemon md:pl-20 pr-0 grid lg:grid-rows-1 h-40 sm:h-56 md:h-64 lg:grid-cols-7 items-center 2xl:mx-auto">
- <div class="lg:row-span-1 lg:col-span-4 order-1 md:pr-20">
- <h1 class="head-alt-md sm:head-alt-lg pt-1 max-w-xl">{{ page.title }}</h1>
- <h2 class="head-alt-sm sm:head-alt-md pt-1 max-w-xl">{{ page.subtitle }}</h2>
+ <article class="relative bg-lemon md:bg-split-color px-4 md:pl-8 md:pr-0 2xl:px-8 hero py-0 w-full ">
+ <div class="2xl:container w-auto bg-lemon md:pl-8 lg:pl-20 pr-0 grid grid-rows-1 md:grid-cols-3 md:h-64 items-center 2xl:mx-auto">
+ <div class="md:row-span-1 md:col-span-1 order-1 md:pr-16">
+ <h1 class="head-alt-md sm:head-alt-lg pt-1 mt-4 mb-2">{{ page.title }}</h1>
+ <h2 class="head-alt-sm sm:head-alt-md pt-1 my-2">{{ page.subtitle }}</h2>
+ </div>
+ <div class="md:row-span-1 md:col-span-2 order-2 my-4 content-block">
+ {{ page.header_text|richtext }}
</div>
</div>
</article>
{% endblock %}
-{% block content %}
-
-<article class="2xl:container w-auto container--default pt-8 pb-20">
- <section id="young_voters" class="space-y-1 faq-accordeon">
-
- {% include "elections2021/_going_to_vote_section.html" with id=1 section_image=page.section1_image title=page.section1_title text=page.section1_text %}
- {% include "elections2021/_going_to_vote_section.html" with id=2 section_image=page.section2_image title=page.section2_title text=page.section2_text %}
- {% include "elections2021/_going_to_vote_section.html" with id=3 section_image=page.section3_image title=page.section3_title text=page.section3_text %}
- {% include "elections2021/_going_to_vote_section.html" with id=4 section_image=page.section4_image title=page.section4_title text=page.section4_text %}
-
- <input type="radio" name="voters-status" id="voters-status-5" hidden checked>
- <div class="accordeon-row">
- <label for="voters-status-5" class="accordeon-row-head">
- <img src="{% static "elections2021/images/heads.png" %}" alt="Není nám to ukradený">
- <img src="{% static "elections2021/images/heads-active.png" %}" alt="Půjdem k volbám" hidden>
- <i class="ico--chevron-down"></i>
- </label>
- <div class="accordeon-row-body">
- <div class="content-block">
- {% if page.video %}
- <iframe width="640" height="440" src="{{ page.video }}" title="" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
- {% endif %}
- <!-- <ul class="actions"> -->
- <!-- <li><a href="#" title="další informace" class="hover:elevation-1 text-2xl"><i class="ico--search"></i></a></li> -->
- <!-- <li><a href="#" title="další videa" class="hover:elevation-1 text-2xl"><i class="ico--chevron-right"></i></a></li> -->
- <!-- <li><a href="#" title="sdílet video" class="hover:elevation-1 text-2xl"><i class="ico--link"></i></a></li> -->
- <!-- <li><a href="#" title="celý program s výběrem věku" class="hover:elevation-1 text-2xl"><i class="ico--menu"></i></a></li> -->
- <!-- </ul> -->
+{% block content_full %}
+<div class="relative bg-black text-white">
+ {% include "elections2021/_side_panel.html" %}
+
+ <article class="2xl:container w-auto container--default pt-8 pb-20">
+
+ <section id="young_voters" class="space-y-2 faq-accordeon">
+
+ {% include "elections2021/_going_to_vote_section.html" with id=1 section_image=page.section1_image title=page.section1_title text=page.section1_text %}
+ {% include "elections2021/_going_to_vote_section.html" with id=2 section_image=page.section2_image title=page.section2_title text=page.section2_text %}
+ {% include "elections2021/_going_to_vote_section.html" with id=3 section_image=page.section3_image title=page.section3_title text=page.section3_text %}
+ {% include "elections2021/_going_to_vote_section.html" with id=4 section_image=page.section4_image title=page.section4_title text=page.section4_text %}
+
+ <input type="radio" name="voters-status" id="voters-status-5" hidden checked>
+ <div class="accordeon-row">
+ <label for="voters-status-5" class="accordeon-row-head">
+ <img src="{% static "elections2021/images/heads.png" %}" alt="Není nám to ukradený">
+ <img src="{% static "elections2021/images/heads-active.png" %}" alt="Půjdem k volbám" hidden>
+ <i class="ico--chevron-down"></i>
+ </label>
+ <div class="accordeon-row-body">
+ <div class="content-block">
+ {% if page.video %}
+ <iframe width="640" height="446" src="{{ page.video }}" title="" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+ {% endif %}
+ <!-- <ul class="actions"> -->
+ <!-- <li><a href="#" title="další informace" class="hover:elevation-1 text-2xl"><i class="ico--search"></i></a></li> -->
+ <!-- <li><a href="#" title="další videa" class="hover:elevation-1 text-2xl"><i class="ico--chevron-right"></i></a></li> -->
+ <!-- <li><a href="#" title="sdílet video" class="hover:elevation-1 text-2xl"><i class="ico--link"></i></a></li> -->
+ <!-- <li><a href="#" title="celý program s výběrem věku" class="hover:elevation-1 text-2xl"><i class="ico--menu"></i></a></li> -->
+ <!-- </ul> -->
+ </div>
+ <div class="content-block"></div>
</div>
- <div class="content-block"></div>
</div>
- </div>
- {% include "elections2021/_going_to_vote_section.html" with id=6 section_image=page.section6_image title=page.section6_title text=page.section6_text %}
- {% include "elections2021/_going_to_vote_section.html" with id=7 section_image=page.section7_image title=page.section7_title text=page.section7_text %}
- {% include "elections2021/_going_to_vote_section.html" with id=8 section_image=page.section8_image title=page.section8_title text=page.section8_text %}
- {% include "elections2021/_going_to_vote_section.html" with id=9 section_image=page.section9_image title=page.section9_title text=page.section9_text %}
+ {% include "elections2021/_going_to_vote_section.html" with id=6 section_image=page.section6_image title=page.section6_title text=page.section6_text %}
+ {% include "elections2021/_going_to_vote_section.html" with id=7 section_image=page.section7_image title=page.section7_title text=page.section7_text %}
+ {% include "elections2021/_going_to_vote_section.html" with id=8 section_image=page.section8_image title=page.section8_title text=page.section8_text %}
+ {% include "elections2021/_going_to_vote_section.html" with id=9 section_image=page.section9_image title=page.section9_title text=page.section9_text %}
- </section>
+ </section>
- <section>
- <div class="flex justify-center">
- <div class="lg:w-2/3 pt-8">
- <h2 class="head-alt-lg py-8">{{ page.bottom_title }}</h2>
- <div class="content-block">
- {{ page.bottom_text|richtext }}
+ <section>
+ <div class="flex justify-center">
+ <div class="lg:w-2/3 pt-8">
+ <h2 class="head-alt-lg py-8">{{ page.bottom_title }}</h2>
+ <div class="content-block">
+ {{ page.bottom_text|richtext }}
+ </div>
</div>
</div>
- </div>
- </section>
-
- <section id="transport-result"></section>
-
- <script type="module">
- const STATUS_SELECTOR = '[name="voters-status"]';
- const ROW_CLASS_NAME_SELECTOR = '.accordeon-row-body';
- const SECOND_CONTENT_BLOCK_SELECTOR = '.content-block:last-child';
- const TRANSPORT_RESULT_ID = 'transport-result';
- const ID_TEXT_PREFIX = 'voters-status-';
- const CHANGE_EVENT_NAME = 'change';
- const MEDIA_SELECTOR = '(min-width: 1366px)';
+ </section>
- /** @type {MediaQueryList} */
- const mediaQuery = window.matchMedia( MEDIA_SELECTOR );
+ <section id="transport-result"></section>
- if ( mediaQuery.matches )
- {
- /** @type {HTMLElement} */
- const trensportResultElement = document.getElementById( TRANSPORT_RESULT_ID );
+ <script type="module">
+ const STATUS_SELECTOR = '[name="voters-status"]';
+ const ROW_CLASS_NAME_SELECTOR = '.accordeon-row-body';
+ const SECOND_CONTENT_BLOCK_SELECTOR = '.content-block:last-child';
+ const TRANSPORT_RESULT_ID = 'transport-result';
+ const ID_TEXT_PREFIX = 'voters-status-';
+ const CHANGE_EVENT_NAME = 'change';
+ const MEDIA_SELECTOR = '(min-width: 1366px)';
- document.querySelectorAll( STATUS_SELECTOR ).forEach( function ( /** @type {HTMLInputElement} */ inputRadio ) {
+ /** @type {MediaQueryList} */
+ const mediaQuery = window.matchMedia( MEDIA_SELECTOR );
+ if ( mediaQuery.matches )
+ {
/** @type {HTMLElement} */
- const correspondingRow = inputRadio.nextElementSibling.querySelector( ROW_CLASS_NAME_SELECTOR );
+ const trensportResultElement = document.getElementById( TRANSPORT_RESULT_ID );
- /** @type {HTMLElement} */
- const secondContentBlock = correspondingRow.querySelector( SECOND_CONTENT_BLOCK_SELECTOR );
+ document.querySelectorAll( STATUS_SELECTOR ).forEach( function ( /** @type {HTMLInputElement} */ inputRadio ) {
- inputRadio.addEventListener( CHANGE_EVENT_NAME, function ( /** @type {Event} */ event ) {
- if ( trensportResultElement.lastElementChild )
- {
- trensportResultElement.lastElementChild.classList.forEach( function ( /** @type {String} */ singleClass ) {
- if ( singleClass.startsWith( ID_TEXT_PREFIX ) )
- {
+ /** @type {HTMLElement} */
+ const correspondingRow = inputRadio.nextElementSibling.querySelector( ROW_CLASS_NAME_SELECTOR );
- /** @type {HTMLInputElement} */
- const inputRadio = document.getElementById( singleClass );
+ /** @type {HTMLElement} */
+ const secondContentBlock = correspondingRow.querySelector( SECOND_CONTENT_BLOCK_SELECTOR );
- if ( inputRadio && inputRadio.nextElementSibling )
+ inputRadio.addEventListener( CHANGE_EVENT_NAME, function ( /** @type {Event} */ event ) {
+ if ( trensportResultElement.lastElementChild )
+ {
+ trensportResultElement.lastElementChild.classList.forEach( function ( /** @type {String} */ singleClass ) {
+ if ( singleClass.startsWith( ID_TEXT_PREFIX ) )
{
- /** @type {HTMLElement} */
- const correspondingRow = inputRadio.nextElementSibling.querySelector( ROW_CLASS_NAME_SELECTOR );
+ /** @type {HTMLInputElement} */
+ const inputRadio = document.getElementById( singleClass );
+
+ if ( inputRadio && inputRadio.nextElementSibling )
+ {
+
+ /** @type {HTMLElement} */
+ const correspondingRow = inputRadio.nextElementSibling.querySelector( ROW_CLASS_NAME_SELECTOR );
- correspondingRow.appendChild( trensportResultElement.lastElementChild );
+ correspondingRow.appendChild( trensportResultElement.lastElementChild );
+ }
}
- }
- } );
- }
+ } );
+ }
- /** @type {HTMLInputElement} */
- const inputRadio = event.target;
+ /** @type {HTMLInputElement} */
+ const inputRadio = event.target;
- /** @type {HTMLElement} */
- const secondContentBlock = inputRadio.nextElementSibling.querySelector( SECOND_CONTENT_BLOCK_SELECTOR );
+ /** @type {HTMLElement} */
+ const secondContentBlock = inputRadio.nextElementSibling.querySelector( SECOND_CONTENT_BLOCK_SELECTOR );
- secondContentBlock.classList.add( inputRadio.id );
- trensportResultElement.appendChild( secondContentBlock );
- }, { capture: false, once: false, passive: true } );
- } );
- document.querySelector( STATUS_SELECTOR ).dispatchEvent( new Event( CHANGE_EVENT_NAME ) );
- }
- </script>
+ secondContentBlock.classList.add( inputRadio.id );
+ trensportResultElement.appendChild( secondContentBlock );
+ }, { capture: false, once: false, passive: true } );
+ } );
+ document.querySelector( STATUS_SELECTOR ).dispatchEvent( new Event( CHANGE_EVENT_NAME ) );
+ }
+ </script>
-</article>
+ </article>
+</div>
{% endblock %}