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

elections2021: Going to vote page

parent 5fdb7c22
Branches
No related tags found
2 merge requests!376release,!375Volby
Pipeline #5047 passed
# Generated by Django 3.2.6 on 2021-09-02 18:33
import django.db.models.deletion
import wagtail.core.blocks
import wagtail.core.fields
import wagtailmetadata.models
from django.db import migrations, models
import shared.models
class Migration(migrations.Migration):
dependencies = [
("wagtailimages", "0023_add_choose_permissions"),
("wagtailcore", "0062_comment_models_and_pagesubscription"),
("elections2021", "0046_elections2021downloadspage_text_downloads"),
]
operations = [
migrations.AlterField(
model_name="elections2021homepage",
name="footer_menu",
field=wagtail.core.fields.StreamField(
[
(
"item",
wagtail.core.blocks.StructBlock(
[
("name", wagtail.core.blocks.CharBlock(label="název")),
(
"page",
wagtail.core.blocks.PageChooserBlock(
label="stránka",
page_type=[
"elections2021.Elections2021ArticlesPage",
"elections2021.Elections2021CandidatesListPage",
"elections2021.Elections2021CandidatesMapPage",
"elections2021.Elections2021ProgramPage",
"elections2021.Elections2021QuestionsPage",
"elections2021.Elections2021ProgramAppPage",
"elections2021.Elections2021TextPage",
"elections2021.Elections2021StrategicListPage",
"elections2021.Elections2021StrategicPage",
"elections2021.Elections2021MythsPage",
"elections2021.Elections2021DownloadsPage",
"elections2021.Elections2021GovernmentTeamPage",
"elections2021.Elections2021CalendarPage",
"elections2021.Elections2021ProgramInNutshellPage",
"elections2021.Elections2021GoingToVotePage",
],
),
),
]
),
)
],
blank=True,
verbose_name="menu projděte si v zápatí",
),
),
migrations.CreateModel(
name="Elections2021GoingToVotePage",
fields=[
(
"page_ptr",
models.OneToOneField(
auto_created=True,
on_delete=django.db.models.deletion.CASCADE,
parent_link=True,
primary_key=True,
serialize=False,
to="wagtailcore.page",
),
),
(
"subtitle",
models.CharField(
blank=True, max_length=255, null=True, verbose_name="podnadpis"
),
),
(
"video",
models.URLField(
blank=True, null=True, verbose_name="video na youtube"
),
),
(
"bottom_title",
models.CharField(
blank=True,
max_length=255,
null=True,
verbose_name="spodní nadpis",
),
),
(
"bottom_text",
wagtail.core.fields.RichTextField(
blank=True, null=True, verbose_name="spodní obsah"
),
),
(
"section1_title",
models.CharField(
blank=True, max_length=255, null=True, verbose_name="titulek"
),
),
(
"section1_text",
wagtail.core.fields.RichTextField(
blank=True, null=True, verbose_name="program"
),
),
(
"section2_title",
models.CharField(
blank=True, max_length=255, null=True, verbose_name="titulek"
),
),
(
"section2_text",
wagtail.core.fields.RichTextField(
blank=True, null=True, verbose_name="program"
),
),
(
"section3_title",
models.CharField(
blank=True, max_length=255, null=True, verbose_name="titulek"
),
),
(
"section3_text",
wagtail.core.fields.RichTextField(
blank=True, null=True, verbose_name="program"
),
),
(
"section4_title",
models.CharField(
blank=True, max_length=255, null=True, verbose_name="titulek"
),
),
(
"section4_text",
wagtail.core.fields.RichTextField(
blank=True, null=True, verbose_name="program"
),
),
(
"section6_title",
models.CharField(
blank=True, max_length=255, null=True, verbose_name="titulek"
),
),
(
"section6_text",
wagtail.core.fields.RichTextField(
blank=True, null=True, verbose_name="program"
),
),
(
"section7_title",
models.CharField(
blank=True, max_length=255, null=True, verbose_name="titulek"
),
),
(
"section7_text",
wagtail.core.fields.RichTextField(
blank=True, null=True, verbose_name="program"
),
),
(
"section8_title",
models.CharField(
blank=True, max_length=255, null=True, verbose_name="titulek"
),
),
(
"section8_text",
wagtail.core.fields.RichTextField(
blank=True, null=True, verbose_name="program"
),
),
(
"section9_title",
models.CharField(
blank=True, max_length=255, null=True, verbose_name="titulek"
),
),
(
"section9_text",
wagtail.core.fields.RichTextField(
blank=True, null=True, verbose_name="program"
),
),
(
"search_image",
models.ForeignKey(
blank=True,
null=True,
on_delete=django.db.models.deletion.SET_NULL,
related_name="+",
to="wagtailimages.image",
verbose_name="Search image",
),
),
(
"section1_image",
models.ForeignKey(
blank=True,
null=True,
on_delete=django.db.models.deletion.SET_NULL,
related_name="+",
to="wagtailimages.image",
verbose_name="obrázek",
),
),
(
"section2_image",
models.ForeignKey(
blank=True,
null=True,
on_delete=django.db.models.deletion.SET_NULL,
related_name="+",
to="wagtailimages.image",
verbose_name="obrázek",
),
),
(
"section3_image",
models.ForeignKey(
blank=True,
null=True,
on_delete=django.db.models.deletion.SET_NULL,
related_name="+",
to="wagtailimages.image",
verbose_name="obrázek",
),
),
(
"section4_image",
models.ForeignKey(
blank=True,
null=True,
on_delete=django.db.models.deletion.SET_NULL,
related_name="+",
to="wagtailimages.image",
verbose_name="obrázek",
),
),
(
"section6_image",
models.ForeignKey(
blank=True,
null=True,
on_delete=django.db.models.deletion.SET_NULL,
related_name="+",
to="wagtailimages.image",
verbose_name="obrázek",
),
),
(
"section7_image",
models.ForeignKey(
blank=True,
null=True,
on_delete=django.db.models.deletion.SET_NULL,
related_name="+",
to="wagtailimages.image",
verbose_name="obrázek",
),
),
(
"section8_image",
models.ForeignKey(
blank=True,
null=True,
on_delete=django.db.models.deletion.SET_NULL,
related_name="+",
to="wagtailimages.image",
verbose_name="obrázek",
),
),
(
"section9_image",
models.ForeignKey(
blank=True,
null=True,
on_delete=django.db.models.deletion.SET_NULL,
related_name="+",
to="wagtailimages.image",
verbose_name="obrázek",
),
),
],
options={
"verbose_name": "Jdeme k volbám",
},
bases=(
shared.models.SubpageMixin,
wagtailmetadata.models.WagtailImageMetadataMixin,
"wagtailcore.page",
models.Model,
),
),
]
......@@ -146,6 +146,7 @@ class MenuItemBlock(blocks.StructBlock):
"elections2021.Elections2021GovernmentTeamPage",
"elections2021.Elections2021CalendarPage",
"elections2021.Elections2021ProgramInNutshellPage",
"elections2021.Elections2021GoingToVotePage",
],
)
......@@ -320,6 +321,7 @@ class Elections2021HomePage(MetadataPageMixin, RoutablePageMixin, Page):
"elections2021.Elections2021CalendarPage",
"elections2021.Elections2021MapPage",
"elections2021.Elections2021ProgramInNutshellPage",
"elections2021.Elections2021GoingToVotePage",
]
### OTHERS
......@@ -2855,3 +2857,213 @@ class Elections2021ProgramInNutshellPage(SubpageMixin, MetadataPageMixin, Page):
class Meta:
verbose_name = "Program v kostce"
class Elections2021GoingToVotePage(SubpageMixin, MetadataPageMixin, Page):
### FIELDS
subtitle = models.CharField("podnadpis", blank=True, null=True, max_length=255)
video = models.URLField("video na youtube", blank=True, null=True)
bottom_title = models.CharField(
"spodní nadpis", blank=True, null=True, max_length=255
)
bottom_text = RichTextField(
"spodní obsah", blank=True, null=True, features=ARTICLE_RICH_TEXT_FEATURES
)
section1_title = models.CharField("titulek", blank=True, null=True, max_length=255)
section1_text = RichTextField(
"program", blank=True, null=True, features=ARTICLE_RICH_TEXT_FEATURES
)
section1_image = models.ForeignKey(
"wagtailimages.Image",
verbose_name="obrázek",
null=True,
blank=True,
on_delete=models.SET_NULL,
related_name="+",
)
section2_title = models.CharField("titulek", blank=True, null=True, max_length=255)
section2_text = RichTextField(
"program", blank=True, null=True, features=ARTICLE_RICH_TEXT_FEATURES
)
section2_image = models.ForeignKey(
"wagtailimages.Image",
verbose_name="obrázek",
null=True,
blank=True,
on_delete=models.SET_NULL,
related_name="+",
)
section3_title = models.CharField("titulek", blank=True, null=True, max_length=255)
section3_text = RichTextField(
"program", blank=True, null=True, features=ARTICLE_RICH_TEXT_FEATURES
)
section3_image = models.ForeignKey(
"wagtailimages.Image",
verbose_name="obrázek",
null=True,
blank=True,
on_delete=models.SET_NULL,
related_name="+",
)
section4_title = models.CharField("titulek", blank=True, null=True, max_length=255)
section4_text = RichTextField(
"program", blank=True, null=True, features=ARTICLE_RICH_TEXT_FEATURES
)
section4_image = models.ForeignKey(
"wagtailimages.Image",
verbose_name="obrázek",
null=True,
blank=True,
on_delete=models.SET_NULL,
related_name="+",
)
section6_title = models.CharField("titulek", blank=True, null=True, max_length=255)
section6_text = RichTextField(
"program", blank=True, null=True, features=ARTICLE_RICH_TEXT_FEATURES
)
section6_image = models.ForeignKey(
"wagtailimages.Image",
verbose_name="obrázek",
null=True,
blank=True,
on_delete=models.SET_NULL,
related_name="+",
)
section7_title = models.CharField("titulek", blank=True, null=True, max_length=255)
section7_text = RichTextField(
"program", blank=True, null=True, features=ARTICLE_RICH_TEXT_FEATURES
)
section7_image = models.ForeignKey(
"wagtailimages.Image",
verbose_name="obrázek",
null=True,
blank=True,
on_delete=models.SET_NULL,
related_name="+",
)
section8_title = models.CharField("titulek", blank=True, null=True, max_length=255)
section8_text = RichTextField(
"program", blank=True, null=True, features=ARTICLE_RICH_TEXT_FEATURES
)
section8_image = models.ForeignKey(
"wagtailimages.Image",
verbose_name="obrázek",
null=True,
blank=True,
on_delete=models.SET_NULL,
related_name="+",
)
section9_title = models.CharField("titulek", blank=True, null=True, max_length=255)
section9_text = RichTextField(
"program", blank=True, null=True, features=ARTICLE_RICH_TEXT_FEATURES
)
section9_image = models.ForeignKey(
"wagtailimages.Image",
verbose_name="obrázek",
null=True,
blank=True,
on_delete=models.SET_NULL,
related_name="+",
)
### PANELS
content_panels = Page.content_panels + [
FieldPanel("subtitle"),
FieldPanel("video"),
MultiFieldPanel(
[FieldPanel("bottom_title"), FieldPanel("bottom_text")], "spodní obsah"
),
MultiFieldPanel(
[
FieldPanel("section1_title"),
FieldPanel("section1_text"),
ImageChooserPanel("section1_image"),
],
"sekce 1",
),
MultiFieldPanel(
[
FieldPanel("section2_title"),
FieldPanel("section2_text"),
ImageChooserPanel("section2_image"),
],
"sekce 2",
),
MultiFieldPanel(
[
FieldPanel("section3_title"),
FieldPanel("section3_text"),
ImageChooserPanel("section3_image"),
],
"sekce 3",
),
MultiFieldPanel(
[
FieldPanel("section4_title"),
FieldPanel("section4_text"),
ImageChooserPanel("section4_image"),
],
"sekce 4",
),
MultiFieldPanel(
[
FieldPanel("section6_title"),
FieldPanel("section6_text"),
ImageChooserPanel("section6_image"),
],
"sekce 6",
),
MultiFieldPanel(
[
FieldPanel("section7_title"),
FieldPanel("section7_text"),
ImageChooserPanel("section7_image"),
],
"sekce 7",
),
MultiFieldPanel(
[
FieldPanel("section8_title"),
FieldPanel("section8_text"),
ImageChooserPanel("section8_image"),
],
"sekce 8",
),
MultiFieldPanel(
[
FieldPanel("section9_title"),
FieldPanel("section9_text"),
ImageChooserPanel("section9_image"),
],
"sekce 9",
),
]
promote_panels = [
MultiFieldPanel(
[
FieldPanel("slug"),
FieldPanel("seo_title"),
FieldPanel("search_description"),
ImageChooserPanel("search_image"),
HelpPanel(help.build(help.NO_SEO_TITLE)),
],
gettext_lazy("Common page configuration"),
),
CommentPanel(),
]
settings_panels = []
### RELATIONS
parent_page_types = ["elections2021.Elections2021HomePage"]
subpage_types = []
### OTHERS
class Meta:
verbose_name = "Jdeme k volbám"
elections2021/static/elections2021/images/heads-active.png

26.6 KiB

elections2021/static/elections2021/images/heads.png

23.6 KiB

{% load wagtailcore_tags wagtailimages_tags %}
<input type="radio" name="voters-status" id="voters-status-{{ id }}" hidden>
<div class="accordeon-row">
<label for="voters-status-{{ id }}" class="accordeon-row-head">
{% if section_image %}
{% image section_image height-70 as img %}
<img src="{{ img.url }}" alt="{{ title|default:"" }}">
{% endif %}
{% if title %}
<h3 class="accordeon-row-heading head-alt-xs">{{ title }}</h3>
<i class="ico--chevron-down"></i>
{% endif %}
</label>
<div class="accordeon-row-body text-left pl-11 pt-2">
<div class="content-block">
<h4 class="head-alt-md">{{ title|default:"" }}</h4>
{{ text|richtext }}
</div>
<div class="content-block"></div>
</div>
</div>
{% extends "elections2021/base.html" %}
{% load static wagtailcore_tags wagtailimages_tags %}
{% block head %}
<style>
:root {
--layout-max-width: 1366px;
--snippet-height: 28rem;
}
.accordeon-row-head {
display: block;
}
input:checked+.accordeon-row:not(.accordeon-row--open):not(.accordeon-row--preview):not(.accordeon-row--fadeout) .accordeon-row-body {
max-height: 2000px !important;
}
#young_voters .accordeon-row-body {
background: white;
}
#young_voters .accordeon-row:nth-of-type(1),
#young_voters .accordeon-row:nth-of-type(9) {
background: var(--color-lemon);
}
#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);
}
#young_voters .accordeon-row:nth-of-type(3),
#young_voters .accordeon-row:nth-of-type(8) {
background: var(--color-fxactivecolor);
}
#young_voters .accordeon-row:nth-of-type(4) {
background: var(--color-darkacidgreen);
}
#young_voters .accordeon-row:nth-of-type(5) {
background: var(--color-white);
}
ul.actions {
position: relative;
display: inline;
font-size: 0;
bottom: 4.2rem;
left: 31%;
}
ul.actions li {
display: inline-block;
float: left;
font-size: 1rem;
padding-left: 0;
border-left: 1px solid var(--color-grey-100);
}
ul.actions li:first-child {
border-left: none;
}
ul.actions li::before {
content: none;
}
.actions a {
display: inline-block;
text-align: center;
width: 2em;
height: 2em;
padding: 0.5em;
background: var(--color-white);
text-decoration: none !important;
}
.actions :nth-child(1) a {
background: var(--color-yellow-100);
}
.actions :nth-child(2) a {
background: var(--color-lemon);
}
.actions :nth-child(3) a {
background: var(--color-fxactivecolor);
}
@media (min-width: 1366px) {
#young_voters .accordeon-row {
border-left: 4px solid var(--color-white);
text-align: center;
}
#young_voters .accordeon-row img {
max-width: 70px;
max-height: 80px;
margin: auto;
}
#young_voters .accordeon-row:nth-of-type(5) img[hidden] {
display: none;
}
#young_voters .accordeon-row:nth-of-type(5) img {
position: absolute;
max-width: 150px;
max-height: 150px;
top: 0;
overflow: hidden;
}
#young_voters .accordeon-row:nth-of-type(5):hover img[hidden] {
display: block;
}
#young_voters .accordeon-row-heading {
display: none;
position: absolute;
font-size: x-large;
bottom: 0.5em;
left: 1em;
margin-right: 1em;
padding: 0.5em 0.1em;
width: 80%;
background: var(--color-lemon);
}
#young_voters .accordeon-row:nth-of-type(1) .accordeon-row-heading {
background: var(--color-yellow-100);
}
#young_voters .accordeon-row:nth-of-type(2) .accordeon-row-heading,
#young_voters .accordeon-row:nth-of-type(6) .accordeon-row-heading,
#young_voters .accordeon-row:nth-of-type(7) .accordeon-row-heading,
#young_voters .accordeon-row:nth-of-type(9) .accordeon-row-heading {
background: var(--color-fxactivecolor);
}
#young_voters :hover .accordeon-row-heading {
display: block;
}
#young_voters .accordeon-row-body {
background: transparent;
}
#young_voters .ico--chevron-down {
display: none;
}
.accordeon-row-body {
transition: none;
}
.accordeon-row-body .content-block {
padding: 0.2rem;
}
.container--default {
position: relative;
}
#young_voters {
font-size: 0;
max-width: calc(var(--layout-max-width) / 2);
min-height: var(--snippet-height);
max-height: var(--snippet-height);
}
input:checked+.accordeon-row:not(.accordeon-row--open):not(.accordeon-row--preview):not(.accordeon-row--fadeout) .accordeon-row-body {
position: absolute;
top: 2rem;
left: calc(2rem + var(--layout-max-width) / 2);
width: calc(var(--layout-max-width) / 2);
}
#young_voters .accordeon-row {
display: inline-block;
overflow: hidden;
font-size: 1rem;
min-width: 33.3%;
max-width: 33.3%;
min-height: 9rem;
max-height: 33.3%;
}
#transport-result {
margin-top: 2rem;
}
}
</style>
{% 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>
</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> -->
</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 %}
</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 }}
</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)';
/** @type {MediaQueryList} */
const mediaQuery = window.matchMedia( MEDIA_SELECTOR );
if ( mediaQuery.matches )
{
/** @type {HTMLElement} */
const trensportResultElement = document.getElementById( TRANSPORT_RESULT_ID );
document.querySelectorAll( STATUS_SELECTOR ).forEach( function ( /** @type {HTMLInputElement} */ inputRadio ) {
/** @type {HTMLElement} */
const correspondingRow = inputRadio.nextElementSibling.querySelector( ROW_CLASS_NAME_SELECTOR );
/** @type {HTMLElement} */
const secondContentBlock = correspondingRow.querySelector( SECOND_CONTENT_BLOCK_SELECTOR );
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 {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 );
}
}
} );
}
/** @type {HTMLInputElement} */
const inputRadio = event.target;
/** @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>
</article>
{% endblock %}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please to comment