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

elections2021: Going to vote page update

parent b3d8d1a7
No related branches found
No related tags found
2 merge requests!385elections2021: Going to vote page update,!384elections2021: Going to vote page update
Pipeline #5067 passed
Stage: build
Show whitespace changes
Inline Side-by-side
elections2021/templates/elections2021/_going_to_vote_section.html
+ 2
− 2
View file @ d4dc5a26
{% load wagtailcore_tags wagtailimages_tags %}
<input type="radio" name="voters-status" id="voters-status-{{ id }}" hidden>
<input type="radio" name="voters-status" id="{{ title|slugify }}" hidden>
<div class="accordeon-row">
<label for="voters-status-{{ id }}" class="accordeon-row-head">
<label for="{{ title|slugify }}" class="accordeon-row-head">
{% if section_image %}
{% image section_image height-70 as img %}
<img src="{{ img.url }}" alt="{{ title|default:"" }}">
......
elections2021/templates/elections2021/elections2021_going_to_vote_page.html
+ 92
− 75
View file @ d4dc5a26
......@@ -5,6 +5,7 @@
<style>
:root {
--layout-max-width: 1366px;
--layout-medium-width: 992px;
--snippet-height: 28rem;
}
......@@ -49,7 +50,7 @@
background: black;
}
ul.actions {
/* ul.actions {
position: relative;
display: inline;
font-size: 0;
......@@ -93,9 +94,19 @@
.actions :nth-child(3) a {
background: var(--color-fxactivecolor);
} */
#young_voters .accordeon-row:nth-of-type(5) img {
max-width: 153px;
max-height: 153px;
}
@media (min-width: 1366px) {
#young_voters .accordeon-row:nth-of-type(5) img[hidden] {
display: none;
}
@media (min-width: 992px) {
#young_voters .accordeon-row {
border-left: 8px solid black;
text-align: center;
......@@ -107,14 +118,8 @@
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: 153px;
max-height: 153px;
top: 0;
overflow: hidden;
}
......@@ -175,6 +180,36 @@
position: relative;
}
#young_voters {
font-size: 0;
max-width: calc(var(--layout-medium-width) / 2);
min-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-medium-width) / 2);
}
#transport-result {
margin-top: 2rem;
}
#young_voters .accordeon-row {
display: inline-block;
overflow: hidden;
font-size: 1rem;
min-width: 49%;
max-width: 49%;
min-height: 9rem;
max-height: 49%;
}
}
@media (min-width: 1366px) {
#young_voters {
font-size: 0;
max-width: calc(var(--layout-max-width) / 2);
......@@ -199,10 +234,6 @@
max-height: 33.3%;
}
#transport-result {
margin-top: 2rem;
}
}
</style>
{% endblock %}
......@@ -229,14 +260,14 @@
<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 %}
{% include "elections2021/_going_to_vote_section.html" with section_image=page.section1_image title=page.section1_title text=page.section1_text %}
{% include "elections2021/_going_to_vote_section.html" with section_image=page.section2_image title=page.section2_title text=page.section2_text %}
{% include "elections2021/_going_to_vote_section.html" with section_image=page.section3_image title=page.section3_title text=page.section3_text %}
{% include "elections2021/_going_to_vote_section.html" with 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>
<input type="radio" name="voters-status" id="uvod" hidden checked>
<div class="accordeon-row">
<label for="voters-status-5" class="accordeon-row-head">
<label for="uvod" 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>
......@@ -259,20 +290,18 @@
</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 section_image=page.section6_image title=page.section6_title text=page.section6_text %}
{% include "elections2021/_going_to_vote_section.html" with section_image=page.section7_image title=page.section7_title text=page.section7_text %}
{% include "elections2021/_going_to_vote_section.html" with section_image=page.section8_image title=page.section8_title text=page.section8_text %}
{% include "elections2021/_going_to_vote_section.html" with section_image=page.section9_image title=page.section9_title text=page.section9_text %}
</section>
<section id="transport-result"></section>
<section>
<div class="flex justify-center">
<div class="container container--default flex justify-center">
<div class="lg:w-2/3 my-8">
<h2 class="head-alt-lg py-8">{{ page.bottom_title }}</h2>
<div class="content-block">
<h2 class="head-alt-md py-8">{{ page.bottom_title }}</h2>
<div class="content-block w-full">
{{ page.bottom_text|richtext }}
</div>
</div>
......@@ -284,9 +313,9 @@
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 ROOT_ELEMENT_ID = 'young_voters';
const CHANGE_EVENT_NAME = 'change';
const MEDIA_SELECTOR = '(min-width: 1366px)';
const MEDIA_SELECTOR = '(min-width: 992px)';
/** @type {MediaQueryList} */
const mediaQuery = window.matchMedia( MEDIA_SELECTOR );
......@@ -305,38 +334,26 @@
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 );
/** @type {Number} */
const height = event.target.nextElementSibling.querySelector( ROW_CLASS_NAME_SELECTOR ).offsetHeight;
if ( inputRadio && inputRadio.nextElementSibling )
{
/** @type {HTMLElement} */
const correspondingRow = inputRadio.nextElementSibling.querySelector( ROW_CLASS_NAME_SELECTOR );
correspondingRow.appendChild( trensportResultElement.lastElementChild );
}
}
window.location.hash = event.target.id;
document.getElementById( ROOT_ELEMENT_ID ).style.minHeight = height + 'px';
}, { capture: false, once: false, passive: true } );
} );
}
/** @type {HTMLInputElement} */
const inputRadio = event.target;
if ( window.location.hash )
{
/** @type {HTMLElement} */
const secondContentBlock = inputRadio.nextElementSibling.querySelector( SECOND_CONTENT_BLOCK_SELECTOR );
/** @type {HTMLInputElement} */
const element = document.querySelector( window.location.hash );
secondContentBlock.classList.add( inputRadio.id );
trensportResultElement.appendChild( secondContentBlock );
}, { capture: false, once: false, passive: true } );
} );
document.querySelector( STATUS_SELECTOR ).dispatchEvent( new Event( CHANGE_EVENT_NAME ) );
if ( element )
{
element.checked = true;
}
}
</script>
......
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