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 %} {% 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"> <div class="accordeon-row">
<label for="voters-status-{{ id }}" class="accordeon-row-head"> <label for="{{ title|slugify }}" class="accordeon-row-head">
{% if section_image %} {% if section_image %}
{% image section_image height-70 as img %} {% image section_image height-70 as img %}
<img src="{{ img.url }}" alt="{{ title|default:"" }}"> <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 @@ ...@@ -5,6 +5,7 @@
<style> <style>
:root { :root {
--layout-max-width: 1366px; --layout-max-width: 1366px;
--layout-medium-width: 992px;
--snippet-height: 28rem; --snippet-height: 28rem;
} }
...@@ -49,7 +50,7 @@ ...@@ -49,7 +50,7 @@
background: black; background: black;
} }
ul.actions { /* ul.actions {
position: relative; position: relative;
display: inline; display: inline;
font-size: 0; font-size: 0;
...@@ -93,9 +94,19 @@ ...@@ -93,9 +94,19 @@
.actions :nth-child(3) a { .actions :nth-child(3) a {
background: var(--color-fxactivecolor); 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 { #young_voters .accordeon-row {
border-left: 8px solid black; border-left: 8px solid black;
text-align: center; text-align: center;
...@@ -107,14 +118,8 @@ ...@@ -107,14 +118,8 @@
margin: auto; margin: auto;
} }
#young_voters .accordeon-row:nth-of-type(5) img[hidden] {
display: none;
}
#young_voters .accordeon-row:nth-of-type(5) img { #young_voters .accordeon-row:nth-of-type(5) img {
position: absolute; position: absolute;
max-width: 153px;
max-height: 153px;
top: 0; top: 0;
overflow: hidden; overflow: hidden;
} }
...@@ -175,6 +180,36 @@ ...@@ -175,6 +180,36 @@
position: relative; 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 { #young_voters {
font-size: 0; font-size: 0;
max-width: calc(var(--layout-max-width) / 2); max-width: calc(var(--layout-max-width) / 2);
...@@ -199,10 +234,6 @@ ...@@ -199,10 +234,6 @@
max-height: 33.3%; max-height: 33.3%;
} }
#transport-result {
margin-top: 2rem;
}
} }
</style> </style>
{% endblock %} {% endblock %}
...@@ -229,14 +260,14 @@ ...@@ -229,14 +260,14 @@
<section id="young_voters" class="space-y-2 faq-accordeon"> <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 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 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 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.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"> <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.png" %}" alt="Není nám to ukradený">
<img src="{% static "elections2021/images/heads-active.png" %}" alt="Půjdem k volbám" hidden> <img src="{% static "elections2021/images/heads-active.png" %}" alt="Půjdem k volbám" hidden>
<i class="ico--chevron-down"></i> <i class="ico--chevron-down"></i>
...@@ -259,20 +290,18 @@ ...@@ -259,20 +290,18 @@
</div> </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 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 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 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.section9_image title=page.section9_title text=page.section9_text %}
</section> </section>
<section id="transport-result"></section>
<section> <section>
<div class="flex justify-center"> <div class="container container--default flex justify-center">
<div class="lg:w-2/3 my-8"> <div class="lg:w-2/3 my-8">
<h2 class="head-alt-lg py-8">{{ page.bottom_title }}</h2> <h2 class="head-alt-md py-8">{{ page.bottom_title }}</h2>
<div class="content-block"> <div class="content-block w-full">
{{ page.bottom_text|richtext }} {{ page.bottom_text|richtext }}
</div> </div>
</div> </div>
...@@ -284,9 +313,9 @@ ...@@ -284,9 +313,9 @@
const ROW_CLASS_NAME_SELECTOR = '.accordeon-row-body'; const ROW_CLASS_NAME_SELECTOR = '.accordeon-row-body';
const SECOND_CONTENT_BLOCK_SELECTOR = '.content-block:last-child'; const SECOND_CONTENT_BLOCK_SELECTOR = '.content-block:last-child';
const TRANSPORT_RESULT_ID = 'transport-result'; const TRANSPORT_RESULT_ID = 'transport-result';
const ID_TEXT_PREFIX = 'voters-status-'; const ROOT_ELEMENT_ID = 'young_voters';
const CHANGE_EVENT_NAME = 'change'; const CHANGE_EVENT_NAME = 'change';
const MEDIA_SELECTOR = '(min-width: 1366px)'; const MEDIA_SELECTOR = '(min-width: 992px)';
/** @type {MediaQueryList} */ /** @type {MediaQueryList} */
const mediaQuery = window.matchMedia( MEDIA_SELECTOR ); const mediaQuery = window.matchMedia( MEDIA_SELECTOR );
...@@ -305,38 +334,26 @@ ...@@ -305,38 +334,26 @@
const secondContentBlock = correspondingRow.querySelector( SECOND_CONTENT_BLOCK_SELECTOR ); const secondContentBlock = correspondingRow.querySelector( SECOND_CONTENT_BLOCK_SELECTOR );
inputRadio.addEventListener( CHANGE_EVENT_NAME, function ( /** @type {Event} */ event ) { 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} */ /** @type {Number} */
const inputRadio = document.getElementById( singleClass ); const height = event.target.nextElementSibling.querySelector( ROW_CLASS_NAME_SELECTOR ).offsetHeight;
if ( inputRadio && inputRadio.nextElementSibling ) window.location.hash = event.target.id;
{ document.getElementById( ROOT_ELEMENT_ID ).style.minHeight = height + 'px';
}, { capture: false, once: false, passive: true } );
/** @type {HTMLElement} */
const correspondingRow = inputRadio.nextElementSibling.querySelector( ROW_CLASS_NAME_SELECTOR );
correspondingRow.appendChild( trensportResultElement.lastElementChild );
}
}
} ); } );
} }
/** @type {HTMLInputElement} */ if ( window.location.hash )
const inputRadio = event.target; {
/** @type {HTMLElement} */ /** @type {HTMLInputElement} */
const secondContentBlock = inputRadio.nextElementSibling.querySelector( SECOND_CONTENT_BLOCK_SELECTOR ); const element = document.querySelector( window.location.hash );
secondContentBlock.classList.add( inputRadio.id ); if ( element )
trensportResultElement.appendChild( secondContentBlock ); {
}, { capture: false, once: false, passive: true } ); element.checked = true;
} ); }
document.querySelector( STATUS_SELECTOR ).dispatchEvent( new Event( CHANGE_EVENT_NAME ) );
} }
</script> </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