diff --git a/main/blocks.py b/main/blocks.py
index ce7dbc118ca726825dc75dc91f90ff78656e2cd7..5beff206c6abe1666215def7c3af25fcf380c74d 100644
--- a/main/blocks.py
+++ b/main/blocks.py
@@ -6,8 +6,8 @@ from wagtail.core.blocks import (
TextBlock,
URLBlock,
)
-from wagtail.images.blocks import ImageChooserBlock
from wagtail.documents.blocks import DocumentChooserBlock
+from wagtail.images.blocks import ImageChooserBlock
class CTAMixin(StructBlock):
@@ -55,7 +55,7 @@ class PeopleGroupBlock(StructBlock):
title = CharBlock(label="Titulek")
person_list = ListBlock(
PageChooserBlock(page_type="main.MainPersonPage", label="Detail osoby"),
- label="Seznam osob",
+ label="Skupina osob",
)
@@ -140,7 +140,7 @@ class ArticleQuoteBlock(StructBlock):
class Meta:
icon = "user"
label = "Blok citace"
- template = 'main/blocks/article_quote_block.html'
+ template = "main/blocks/article_quote_block.html"
class ArticleImageBlock(StructBlock):
@@ -151,7 +151,7 @@ class ArticleImageBlock(StructBlock):
class Meta:
icon = "user"
label = "Obrázek s textem a odkazem"
- template = 'main/blocks/article_image_block.html'
+ template = "main/blocks/article_image_block.html"
class ArticleDownloadBlock(StructBlock):
@@ -160,6 +160,7 @@ class ArticleDownloadBlock(StructBlock):
class Meta:
icon = "user"
label = "Blok stáhnutelného dokumentu"
- template = 'main/blocks/article_download_block.html'
+ template = "main/blocks/article_download_block.html"
+
# TwitterCarouselBlock
diff --git a/main/static/main/css/styles.css b/main/static/main/css/styles.css
index 9a89e3b86e70e1afad5b5e172b8e2ad0d6b5d4c3..8d97531730f1a3676840d066611b1c9ea5150bce 100644
--- a/main/static/main/css/styles.css
+++ b/main/static/main/css/styles.css
@@ -798,13 +798,6 @@ video {
}
}
-@media (min-width: 2060px){
-
- .container{
- max-width: 2060px;
- }
-}
-
.btn{
display: inline-block;
text-align: center;
@@ -1389,7 +1382,7 @@ video {
padding-left: 1.25rem;
padding-right: 1.25rem;
margin: auto;
- max-width: 1350px;
+ max-width: 1300px;
}
.container--wide {
@@ -1398,16 +1391,16 @@ video {
}
.section-clip {
- -webkit-clip-path: polygon(0 10px, 100% 0%, 100% 99%, 0% 100%);
- clip-path: polygon(0 10px, 100% 0%, 100% 99%, 0% 100%);
+ -webkit-clip-path: polygon(0 1%, 100% 0%, 100% 99%, 0% 100%);
+ clip-path: polygon(0 1%, 100% 0%, 100% 99%, 0% 100%);
margin-bottom: -3.2vw;
}
@media (min-width: 1200px) {
.section-clip {
- -webkit-clip-path: polygon(0 20px, 100% 0%, 100% 95%, 0% 100%);
- clip-path: polygon(0 20px, 100% 0%, 100% 95%, 0% 100%);
+ -webkit-clip-path: polygon(0 5%, 100% 0%, 100% 95%, 0% 100%);
+ clip-path: polygon(0 5%, 100% 0%, 100% 95%, 0% 100%);
margin-bottom: -4.2vw
}
}
@@ -1481,30 +1474,8 @@ video {
height: 36rem;
}
-@media (min-width: 1200px) {
-
-.photo-header {
- height: 40vw
-}
- }
-
-.photo-header .simple-header-height {
- height: 13rem;
- }
-
-.photo-header{
-
- @responsive {
- @media (min-width: 1200px) {
- .simple-header-height {
- height: 26rem;
- }
-
- .footer-section {
- height: 981px;
- }
- }
- }
+.simple-header-height {
+ height: 13rem;
}
.flag {
@@ -1681,16 +1652,8 @@ video {
display: flex;
width: 100%;
align-items: center;
- padding-top: 0.5rem;
- padding-bottom: 0.5rem;
-}
-
-@media (min-width: 1200px){
-
- .select{
- padding-top: 1rem;
- padding-bottom: 1rem;
- }
+ padding-top: 1rem;
+ padding-bottom: 1rem;
}
.select:after{
@@ -1742,8 +1705,8 @@ video {
border-color: rgb(173 173 173 / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: rgb(250 250 250 / var(--tw-bg-opacity));
- padding-top: 0.75rem;
- padding-bottom: 0.75rem;
+ padding-top: 1.25rem;
+ padding-bottom: 1.25rem;
padding-left: 1rem;
padding-right: 2rem;
font-size: 1.125rem;
@@ -1754,17 +1717,6 @@ video {
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 200ms;
-}
-
-@media (min-width: 1200px){
-
- .select__control{
- padding-top: 1.25rem;
- padding-bottom: 1.25rem;
- }
-}
-
-.select__control {
/* Fix FF input not adjusting it's width.
* See: https://stackoverflow.com/a/48326796/303184
@@ -2179,6 +2131,7 @@ video {
@media (min-width: 992px){
.head-4xl{
+ font-size: 2.45rem;
line-height: 2.5rem;
}
}
@@ -2190,21 +2143,6 @@ video {
}
}
-.head-6xl{
- font-family: Bebas Neue, Helvetica, Arial, sans-serif;
- font-size: 1.6rem;
- font-weight: 500;
- text-transform: uppercase;
- letter-spacing: -0.025em;
-}
-
-@media (min-width: 1200px){
-
- .head-6xl{
- font-size: 4rem;
- }
-}
-
.head-7xl{
font-family: Bebas Neue, Helvetica, Arial, sans-serif;
font-size: 1.875rem;
@@ -2251,38 +2189,6 @@ p{
border-left: 1px solid green;
}
-.slick-slider .slick-arrow {
- font-size: 0;
- position: absolute;
- top: -.7rem;
- z-index: 10;
-}
-
-.slick-slider .slick-arrow:before, .slick-slider .slick-arrow:after {
- border-right: 2px solid white;
- border-bottom: 2px solid white;
- content: '';
- height: .8rem;
- position: absolute;
- width: .8rem;
- }
-
-@media (min-width: 992px) {
-
-.slick-slider .slick-arrow:before, .slick-slider .slick-arrow:after {
- height: 1rem;
- width: 1rem
- }
- }
-
-.slick-slider .slick-arrow.slick-next {
- transform: rotate(-45deg);
- }
-
-.slick-slider .slick-arrow.slick-prev {
- transform: rotate(135deg);
- }
-
.header-carousel {
display: block;
margin: 0 auto;
@@ -2454,25 +2360,6 @@ p{
font-size: 0;
}
-.article-carousel .slick-arrow {
- right: 10%;
- }
-
-@media (min-width: 992px) {
-
-.article-carousel .slick-arrow {
- right: 5%
- }
- }
-
-.article-carousel .slick-arrow:before, .article-carousel .slick-arrow:after {
- border-color: black;
- }
-
-.article-carousel .slick-arrow.slick-disabled:before, .article-carousel .slick-arrow.slick-disabled:after {
- border-color: #B3B3B3;
- }
-
.contact-box{
margin-right: 1rem;
display: flex;
@@ -2762,16 +2649,16 @@ p{
grid-column: span 8 / span 8;
}
-.col-start-1{
- grid-column-start: 1;
-}
-
.col-start-2{
grid-column-start: 2;
}
-.col-end-3{
- grid-column-end: 3;
+.col-end-13{
+ grid-column-end: 13;
+}
+
+.clear-both{
+ clear: both;
}
.mx-auto{
@@ -2873,6 +2760,10 @@ p{
margin-top: 6rem;
}
+.mb-32{
+ margin-bottom: 8rem;
+}
+
.mb-10{
margin-bottom: 2.5rem;
}
@@ -2901,6 +2792,10 @@ p{
margin-bottom: 0.75rem;
}
+.mb-14{
+ margin-bottom: 3.5rem;
+}
+
.mb-24{
margin-bottom: 6rem;
}
@@ -2977,10 +2872,6 @@ p{
width: 11rem;
}
-.w-60{
- width: 15rem;
-}
-
.w-80{
width: 20rem;
}
@@ -2989,6 +2880,10 @@ p{
width: 3rem;
}
+.w-11\/12{
+ width: 91.666667%;
+}
+
.w-48{
width: 12rem;
}
@@ -3013,8 +2908,12 @@ p{
width: 58.333333%;
}
-.w-auto{
- width: auto;
+.w-1\/12{
+ width: 8.333333%;
+}
+
+.w-4\/12{
+ width: 33.333333%;
}
.w-8\/12{
@@ -3213,10 +3112,6 @@ p{
background-size: cover;
}
-.bg-center{
- background-position: center;
-}
-
.bg-no-repeat{
background-repeat: no-repeat;
}
@@ -3293,14 +3188,6 @@ p{
padding-top: 4rem;
}
-.pl-4{
- padding-left: 1rem;
-}
-
-.pr-2{
- padding-right: 0.5rem;
-}
-
.pt-5{
padding-top: 1.25rem;
}
@@ -3317,6 +3204,14 @@ p{
padding-top: 2.5rem;
}
+.pt-40{
+ padding-top: 10rem;
+}
+
+.pb-4{
+ padding-bottom: 1rem;
+}
+
.pt-12{
padding-top: 3rem;
}
@@ -3325,6 +3220,14 @@ p{
padding-bottom: 0.5rem;
}
+.pt-32{
+ padding-top: 8rem;
+}
+
+.pb-52{
+ padding-bottom: 13rem;
+}
+
.text-center{
text-align: center;
}
@@ -3345,10 +3248,6 @@ p{
font-size: .875rem;
}
-.text-xs{
- font-size: .75rem;
-}
-
.text-2xl{
font-size: 1.6rem;
}
@@ -3365,6 +3264,10 @@ p{
font-size: 4rem;
}
+.text-xs{
+ font-size: .75rem;
+}
+
.text-7xl{
font-size: 5.3rem;
}
@@ -3498,17 +3401,19 @@ p{
}
}
-@media (min-width: 2060px) {
-
-.grid-container {
- margin-left: 20%
- }
- }
-
/* Removes default container padding from the element. */
/* @note: needs to be kept in sync with tailwind configuration */
+@media (min-width: 1200px) {
+ .simple-header-height {
+ height: 26rem;
+ }
+ .footer-section {
+ height: 981px;
+ }
+ }
+
.head-alt-md,
.content-block .head-alt-md{
font-family: Bebas Neue, Helvetica, Arial, sans-serif;
@@ -3652,18 +3557,6 @@ a.icon-link:hover span{
@media (min-width: 576px){
- .sm\:col-start-2{
- grid-column-start: 2;
- }
-
- .sm\:col-end-13{
- grid-column-end: 13;
- }
-
- .sm\:pr-0{
- padding-right: 0px;
- }
-
.btn.sm\:btn--autowidth{
width: auto;
}
@@ -3691,8 +3584,16 @@ a.icon-link:hover span{
width: 33.333333%;
}
- .md\:text-5xl{
- font-size: 3rem;
+ .md\:flex-row{
+ flex-direction: row;
+ }
+
+ .md\:head-alt-lg,
+ .content-block .md\:head-alt-lg{
+ font-family: Bebas Neue, Helvetica, Arial, sans-serif;
+ font-size: 4rem;
+ font-weight: 400;
+ line-height: 0.96;
}
}
@@ -3722,6 +3623,10 @@ a.icon-link:hover span{
margin-bottom: 4rem;
}
+ .lg\:mb-28{
+ margin-bottom: 7rem;
+ }
+
.lg\:mb-24{
margin-bottom: 6rem;
}
@@ -3751,12 +3656,12 @@ a.icon-link:hover span{
padding-bottom: 9rem;
}
- .lg\:text-base{
- font-size: 1rem;
+ .lg\:pb-8{
+ padding-bottom: 2rem;
}
- .lg\:text-6xl{
- font-size: 4rem;
+ .lg\:text-base{
+ font-size: 1rem;
}
}
@@ -3851,10 +3756,6 @@ a.icon-link:hover span{
width: 25%;
}
- .xl\:w-36{
- width: 9rem;
- }
-
.xl\:max-w-xl{
max-width: 36rem;
}
@@ -3863,10 +3764,6 @@ a.icon-link:hover span{
flex-direction: row;
}
- .xl\:justify-start{
- justify-content: flex-start;
- }
-
.xl\:justify-end{
justify-content: flex-end;
}
@@ -3906,10 +3803,6 @@ a.icon-link:hover span{
padding-top: 3.5rem;
}
- .xl\:text-left{
- text-align: left;
- }
-
.xl\:text-4xl{
font-size: 2.45rem;
}
@@ -3957,14 +3850,3 @@ a.icon-link:hover span{
margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
}
}
-
-@media (min-width: 2060px){
-
- .\33xl\:text-xl{
- font-size: 1.3rem;
- }
-
- .\33xl\:text-lg{
- font-size: 1.125rem;
- }
-}
diff --git a/main/templates/main/main_people_page.html b/main/templates/main/main_people_page.html
index 15cfa4ad2b4f2c6669beb650e30429b4f6dffdb2..1b0a46b23e70a35d9f4ecb22f9025000a80fd4ab 100644
--- a/main/templates/main/main_people_page.html
+++ b/main/templates/main/main_people_page.html
@@ -1,4 +1,45 @@
{% extends "main/base.html" %}
{% load wagtailcore_tags wagtailimages_tags shared_filters %}
-{% block content %}{% endblock content %}
+{% block content %}
+
+ {% include 'main/includes/layout/simple_page_header.html' %}
+
+<main role="main">
+ <div class="grid-container">
+ <div class="grid-content">
+ <p class="font-alt leading-4 xl:leading-6 mb-3 text-base xl:text-xl xl:mb-12">
+ {{ page.perex }}
+ </p>
+ </div>
+ </div>
+ <div class="container--medium">
+ <div class="__js-root">
+ <ui-view-provider
+ :initial="{candidates: true, program: false}"
+ :sync-location="true"
+ v-slot="{ isCurrentView, toggleView }"
+ >
+ <div class="flex justify-center mb-12">
+ <div class="switch">
+ <a @click="toggleView('candidates')" class="switch__item"
+ :class="{'switch__item--active': isCurrentView('candidates')}">Poslanecká sněmovna</a>
+ <a @click="toggleView('program')" class="switch__item"
+ :class="{'switch__item--active': isCurrentView('program')}">Vláda</a>
+ </div>
+ </div>
+ <div class="flex flex-wrap justify-center mb-12">
+ <template v-if="isCurrentView('snemovna')">
+ Sněmovna
+ </template>
+ <template v-if="isCurrentView('vlada')">
+ Vláda
+ </template>
+ </div>
+ </ui-view-provider>
+ </div>
+ </div>
+
+ {% include 'main/includes/newsletter_section.html' %}
+</main>
+{% endblock content %}
diff --git a/main/templates/main/main_person_page.html b/main/templates/main/main_person_page.html
index 46db5f01669351687cb66618e0f8d07dd74792d5..5775102e789518974781a840ad4f94604ef6fb5f 100644
--- a/main/templates/main/main_person_page.html
+++ b/main/templates/main/main_person_page.html
@@ -1,4 +1,10 @@
{% extends "main/base.html" %}
{% load static wagtailcore_tags wagtailimages_tags shared_filters %}
-{% block content %}{% endblock content %}
+{% block content %}
+<main role="main">
+
+
+ {% include 'main/includes/newsletter_section.html' %}
+</main>
+{% endblock content %}
diff --git a/main/templates/main/main_program_page.html b/main/templates/main/main_program_page.html
index 90d89fb394f7c421c49af3cc089c6725d4020e86..05020476de073698f509c086a9f8ceabb73513c1 100644
--- a/main/templates/main/main_program_page.html
+++ b/main/templates/main/main_program_page.html
@@ -2,44 +2,45 @@
{% load wagtailcore_tags wagtailimages_tags shared_filters %}
{% block content %}
- <main role="main">
- <div class="grid-container">
- <div class="grid-content">
- <p class="font-alt leading-6 mb-12 text-xl">
- {{ page.perex }}
- </p>
- </div>
- </div>
- <div class="container--medium">
+ <main role="main">
+ <div class="grid-container">
+ <div class="grid-content">
+ <p class="font-alt leading-6 mb-12 text-xl">
+ {{ page.perex }}
+ </p>
+ </div>
+ </div>
+ <div class="container--medium">
- <div class="mb-12">
- <div class="switch">
- {% for program_group in page.program %}
- <a class="switch__item {% if forloop.first %}switch__item--active{% endif %}">{{ program_group.value.title }}</a>
- {% endfor %}
- </div>
- </div>
+ <div class="mb-12">
+ <div class="switch">
+ {% for program_group in page.program %}
+ <a
+ class="switch__item {% if forloop.first %}switch__item--active{% endif %}">{{ program_group.value.title }}</a>
+ {% endfor %}
+ </div>
+ </div>
- <div class="mb-12">
- {% for program_group in page.program %}
- {% for item in program_group.value.point_list %}
- <div class="flex mb-6">
- <i class="{{ item.icon }} mr-6 text-6xl"></i>
- <div class="flex flex-col">
- <h3 class="font-alt mb-4 text-4xl">
- {{ item.title }}
- </h3>
- <p class="leading-6">
- {{ item.text }}
- </p>
- </div>
- </div>
- {% endfor %}
- {% endfor %}
+ <div class="mb-12">
+ {% for program_group in page.program %}
+ {% for item in program_group.value.point_list %}
+ <div class="flex mb-6">
+ <i class="{{ item.icon }} mr-6 text-6xl"></i>
+ <div class="flex flex-col">
+ <h3 class="font-alt mb-4 text-4xl">
+ {{ item.title }}
+ </h3>
+ <p class="leading-6">
+ {{ item.text }}
+ </p>
+ </div>
</div>
- </div>
- </main>
-{% endblock %}
-
+ {% endfor %}
+ {% endfor %}
+ </div>
+ </div>
+ {% include 'main/includes/newsletter_section.html' %}
+ </main>
+{% endblock %}