diff --git a/elections2021/templates/elections2021/_going_to_vote_section.html b/elections2021/templates/elections2021/_going_to_vote_section.html index 89d4d432eb0686033a74b4895d5fdcbaef03360b..8692361d24e80b4ed6e0bf2eecdac769418ba975 100644 --- a/elections2021/templates/elections2021/_going_to_vote_section.html +++ b/elections2021/templates/elections2021/_going_to_vote_section.html @@ -1,7 +1,7 @@ {% 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:"" }}"> diff --git a/elections2021/templates/elections2021/elections2021_going_to_vote_page.html b/elections2021/templates/elections2021/elections2021_going_to_vote_page.html index 8da28f8d1433279cb596915631c858740ea0ac80..f51a773b620a242984a58da206918a95c8d96740 100644 --- a/elections2021/templates/elections2021/elections2021_going_to_vote_page.html +++ b/elections2021/templates/elections2021/elections2021_going_to_vote_page.html @@ -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> @@ -280,64 +309,52 @@ </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 ) { - + 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 ROOT_ELEMENT_ID = 'young_voters'; + const CHANGE_EVENT_NAME = 'change'; + const MEDIA_SELECTOR = '(min-width: 992px)'; + + /** @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 ) { - /** @type {HTMLElement} */ - const correspondingRow = inputRadio.nextElementSibling.querySelector( ROW_CLASS_NAME_SELECTOR ); + /** @type {Number} */ + const height = event.target.nextElementSibling.querySelector( ROW_CLASS_NAME_SELECTOR ).offsetHeight; - 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> </article>