Skip to content
Snippets Groups Projects
Commit 65104a34 authored by OndraRehounek's avatar OndraRehounek
Browse files

main: wip

parent d6315b13
Branches
No related tags found
2 merge requests!607Pirati.cz,!575Feature/pirati cz
Pipeline #9379 passed
...@@ -6,8 +6,8 @@ from wagtail.core.blocks import ( ...@@ -6,8 +6,8 @@ from wagtail.core.blocks import (
TextBlock, TextBlock,
URLBlock, URLBlock,
) )
from wagtail.images.blocks import ImageChooserBlock
from wagtail.documents.blocks import DocumentChooserBlock from wagtail.documents.blocks import DocumentChooserBlock
from wagtail.images.blocks import ImageChooserBlock
class CTAMixin(StructBlock): class CTAMixin(StructBlock):
...@@ -55,7 +55,7 @@ class PeopleGroupBlock(StructBlock): ...@@ -55,7 +55,7 @@ class PeopleGroupBlock(StructBlock):
title = CharBlock(label="Titulek") title = CharBlock(label="Titulek")
person_list = ListBlock( person_list = ListBlock(
PageChooserBlock(page_type="main.MainPersonPage", label="Detail osoby"), PageChooserBlock(page_type="main.MainPersonPage", label="Detail osoby"),
label="Seznam osob", label="Skupina osob",
) )
...@@ -140,7 +140,7 @@ class ArticleQuoteBlock(StructBlock): ...@@ -140,7 +140,7 @@ class ArticleQuoteBlock(StructBlock):
class Meta: class Meta:
icon = "user" icon = "user"
label = "Blok citace" label = "Blok citace"
template = 'main/blocks/article_quote_block.html' template = "main/blocks/article_quote_block.html"
class ArticleImageBlock(StructBlock): class ArticleImageBlock(StructBlock):
...@@ -151,7 +151,7 @@ class ArticleImageBlock(StructBlock): ...@@ -151,7 +151,7 @@ class ArticleImageBlock(StructBlock):
class Meta: class Meta:
icon = "user" icon = "user"
label = "Obrázek s textem a odkazem" label = "Obrázek s textem a odkazem"
template = 'main/blocks/article_image_block.html' template = "main/blocks/article_image_block.html"
class ArticleDownloadBlock(StructBlock): class ArticleDownloadBlock(StructBlock):
...@@ -160,6 +160,7 @@ class ArticleDownloadBlock(StructBlock): ...@@ -160,6 +160,7 @@ class ArticleDownloadBlock(StructBlock):
class Meta: class Meta:
icon = "user" icon = "user"
label = "Blok stáhnutelného dokumentu" label = "Blok stáhnutelného dokumentu"
template = 'main/blocks/article_download_block.html' template = "main/blocks/article_download_block.html"
# TwitterCarouselBlock # TwitterCarouselBlock
...@@ -798,13 +798,6 @@ video { ...@@ -798,13 +798,6 @@ video {
} }
} }
@media (min-width: 2060px){
.container{
max-width: 2060px;
}
}
.btn{ .btn{
display: inline-block; display: inline-block;
text-align: center; text-align: center;
...@@ -1389,7 +1382,7 @@ video { ...@@ -1389,7 +1382,7 @@ video {
padding-left: 1.25rem; padding-left: 1.25rem;
padding-right: 1.25rem; padding-right: 1.25rem;
margin: auto; margin: auto;
max-width: 1350px; max-width: 1300px;
} }
.container--wide { .container--wide {
...@@ -1398,16 +1391,16 @@ video { ...@@ -1398,16 +1391,16 @@ video {
} }
.section-clip { .section-clip {
-webkit-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 10px, 100% 0%, 100% 99%, 0% 100%); clip-path: polygon(0 1%, 100% 0%, 100% 99%, 0% 100%);
margin-bottom: -3.2vw; margin-bottom: -3.2vw;
} }
@media (min-width: 1200px) { @media (min-width: 1200px) {
.section-clip { .section-clip {
-webkit-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 20px, 100% 0%, 100% 95%, 0% 100%); clip-path: polygon(0 5%, 100% 0%, 100% 95%, 0% 100%);
margin-bottom: -4.2vw margin-bottom: -4.2vw
} }
} }
...@@ -1481,30 +1474,8 @@ video { ...@@ -1481,30 +1474,8 @@ video {
height: 36rem; 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 { .simple-header-height {
height: 26rem; height: 13rem;
}
.footer-section {
height: 981px;
}
}
}
} }
.flag { .flag {
...@@ -1681,17 +1652,9 @@ video { ...@@ -1681,17 +1652,9 @@ video {
display: flex; display: flex;
width: 100%; width: 100%;
align-items: center; align-items: center;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
@media (min-width: 1200px){
.select{
padding-top: 1rem; padding-top: 1rem;
padding-bottom: 1rem; padding-bottom: 1rem;
} }
}
.select:after{ .select:after{
position: absolute; position: absolute;
...@@ -1742,8 +1705,8 @@ video { ...@@ -1742,8 +1705,8 @@ video {
border-color: rgb(173 173 173 / var(--tw-border-opacity)); border-color: rgb(173 173 173 / var(--tw-border-opacity));
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
background-color: rgb(250 250 250 / var(--tw-bg-opacity)); background-color: rgb(250 250 250 / var(--tw-bg-opacity));
padding-top: 0.75rem; padding-top: 1.25rem;
padding-bottom: 0.75rem; padding-bottom: 1.25rem;
padding-left: 1rem; padding-left: 1rem;
padding-right: 2rem; padding-right: 2rem;
font-size: 1.125rem; font-size: 1.125rem;
...@@ -1754,17 +1717,6 @@ video { ...@@ -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-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-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 200ms; 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. /* Fix FF input not adjusting it's width.
* See: https://stackoverflow.com/a/48326796/303184 * See: https://stackoverflow.com/a/48326796/303184
...@@ -2179,6 +2131,7 @@ video { ...@@ -2179,6 +2131,7 @@ video {
@media (min-width: 992px){ @media (min-width: 992px){
.head-4xl{ .head-4xl{
font-size: 2.45rem;
line-height: 2.5rem; line-height: 2.5rem;
} }
} }
...@@ -2190,21 +2143,6 @@ video { ...@@ -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{ .head-7xl{
font-family: Bebas Neue, Helvetica, Arial, sans-serif; font-family: Bebas Neue, Helvetica, Arial, sans-serif;
font-size: 1.875rem; font-size: 1.875rem;
...@@ -2251,38 +2189,6 @@ p{ ...@@ -2251,38 +2189,6 @@ p{
border-left: 1px solid green; 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 { .header-carousel {
display: block; display: block;
margin: 0 auto; margin: 0 auto;
...@@ -2454,25 +2360,6 @@ p{ ...@@ -2454,25 +2360,6 @@ p{
font-size: 0; 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{ .contact-box{
margin-right: 1rem; margin-right: 1rem;
display: flex; display: flex;
...@@ -2762,16 +2649,16 @@ p{ ...@@ -2762,16 +2649,16 @@ p{
grid-column: span 8 / span 8; grid-column: span 8 / span 8;
} }
.col-start-1{
grid-column-start: 1;
}
.col-start-2{ .col-start-2{
grid-column-start: 2; grid-column-start: 2;
} }
.col-end-3{ .col-end-13{
grid-column-end: 3; grid-column-end: 13;
}
.clear-both{
clear: both;
} }
.mx-auto{ .mx-auto{
...@@ -2873,6 +2760,10 @@ p{ ...@@ -2873,6 +2760,10 @@ p{
margin-top: 6rem; margin-top: 6rem;
} }
.mb-32{
margin-bottom: 8rem;
}
.mb-10{ .mb-10{
margin-bottom: 2.5rem; margin-bottom: 2.5rem;
} }
...@@ -2901,6 +2792,10 @@ p{ ...@@ -2901,6 +2792,10 @@ p{
margin-bottom: 0.75rem; margin-bottom: 0.75rem;
} }
.mb-14{
margin-bottom: 3.5rem;
}
.mb-24{ .mb-24{
margin-bottom: 6rem; margin-bottom: 6rem;
} }
...@@ -2977,10 +2872,6 @@ p{ ...@@ -2977,10 +2872,6 @@ p{
width: 11rem; width: 11rem;
} }
.w-60{
width: 15rem;
}
.w-80{ .w-80{
width: 20rem; width: 20rem;
} }
...@@ -2989,6 +2880,10 @@ p{ ...@@ -2989,6 +2880,10 @@ p{
width: 3rem; width: 3rem;
} }
.w-11\/12{
width: 91.666667%;
}
.w-48{ .w-48{
width: 12rem; width: 12rem;
} }
...@@ -3013,8 +2908,12 @@ p{ ...@@ -3013,8 +2908,12 @@ p{
width: 58.333333%; width: 58.333333%;
} }
.w-auto{ .w-1\/12{
width: auto; width: 8.333333%;
}
.w-4\/12{
width: 33.333333%;
} }
.w-8\/12{ .w-8\/12{
...@@ -3213,10 +3112,6 @@ p{ ...@@ -3213,10 +3112,6 @@ p{
background-size: cover; background-size: cover;
} }
.bg-center{
background-position: center;
}
.bg-no-repeat{ .bg-no-repeat{
background-repeat: no-repeat; background-repeat: no-repeat;
} }
...@@ -3293,14 +3188,6 @@ p{ ...@@ -3293,14 +3188,6 @@ p{
padding-top: 4rem; padding-top: 4rem;
} }
.pl-4{
padding-left: 1rem;
}
.pr-2{
padding-right: 0.5rem;
}
.pt-5{ .pt-5{
padding-top: 1.25rem; padding-top: 1.25rem;
} }
...@@ -3317,6 +3204,14 @@ p{ ...@@ -3317,6 +3204,14 @@ p{
padding-top: 2.5rem; padding-top: 2.5rem;
} }
.pt-40{
padding-top: 10rem;
}
.pb-4{
padding-bottom: 1rem;
}
.pt-12{ .pt-12{
padding-top: 3rem; padding-top: 3rem;
} }
...@@ -3325,6 +3220,14 @@ p{ ...@@ -3325,6 +3220,14 @@ p{
padding-bottom: 0.5rem; padding-bottom: 0.5rem;
} }
.pt-32{
padding-top: 8rem;
}
.pb-52{
padding-bottom: 13rem;
}
.text-center{ .text-center{
text-align: center; text-align: center;
} }
...@@ -3345,10 +3248,6 @@ p{ ...@@ -3345,10 +3248,6 @@ p{
font-size: .875rem; font-size: .875rem;
} }
.text-xs{
font-size: .75rem;
}
.text-2xl{ .text-2xl{
font-size: 1.6rem; font-size: 1.6rem;
} }
...@@ -3365,6 +3264,10 @@ p{ ...@@ -3365,6 +3264,10 @@ p{
font-size: 4rem; font-size: 4rem;
} }
.text-xs{
font-size: .75rem;
}
.text-7xl{ .text-7xl{
font-size: 5.3rem; font-size: 5.3rem;
} }
...@@ -3498,17 +3401,19 @@ p{ ...@@ -3498,17 +3401,19 @@ p{
} }
} }
@media (min-width: 2060px) {
.grid-container {
margin-left: 20%
}
}
/* Removes default container padding from the element. */ /* Removes default container padding from the element. */
/* @note: needs to be kept in sync with tailwind configuration */ /* @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, .head-alt-md,
.content-block .head-alt-md{ .content-block .head-alt-md{
font-family: Bebas Neue, Helvetica, Arial, sans-serif; font-family: Bebas Neue, Helvetica, Arial, sans-serif;
...@@ -3652,18 +3557,6 @@ a.icon-link:hover span{ ...@@ -3652,18 +3557,6 @@ a.icon-link:hover span{
@media (min-width: 576px){ @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{ .btn.sm\:btn--autowidth{
width: auto; width: auto;
} }
...@@ -3691,8 +3584,16 @@ a.icon-link:hover span{ ...@@ -3691,8 +3584,16 @@ a.icon-link:hover span{
width: 33.333333%; width: 33.333333%;
} }
.md\:text-5xl{ .md\:flex-row{
font-size: 3rem; 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{ ...@@ -3722,6 +3623,10 @@ a.icon-link:hover span{
margin-bottom: 4rem; margin-bottom: 4rem;
} }
.lg\:mb-28{
margin-bottom: 7rem;
}
.lg\:mb-24{ .lg\:mb-24{
margin-bottom: 6rem; margin-bottom: 6rem;
} }
...@@ -3751,12 +3656,12 @@ a.icon-link:hover span{ ...@@ -3751,12 +3656,12 @@ a.icon-link:hover span{
padding-bottom: 9rem; padding-bottom: 9rem;
} }
.lg\:text-base{ .lg\:pb-8{
font-size: 1rem; padding-bottom: 2rem;
} }
.lg\:text-6xl{ .lg\:text-base{
font-size: 4rem; font-size: 1rem;
} }
} }
...@@ -3851,10 +3756,6 @@ a.icon-link:hover span{ ...@@ -3851,10 +3756,6 @@ a.icon-link:hover span{
width: 25%; width: 25%;
} }
.xl\:w-36{
width: 9rem;
}
.xl\:max-w-xl{ .xl\:max-w-xl{
max-width: 36rem; max-width: 36rem;
} }
...@@ -3863,10 +3764,6 @@ a.icon-link:hover span{ ...@@ -3863,10 +3764,6 @@ a.icon-link:hover span{
flex-direction: row; flex-direction: row;
} }
.xl\:justify-start{
justify-content: flex-start;
}
.xl\:justify-end{ .xl\:justify-end{
justify-content: flex-end; justify-content: flex-end;
} }
...@@ -3906,10 +3803,6 @@ a.icon-link:hover span{ ...@@ -3906,10 +3803,6 @@ a.icon-link:hover span{
padding-top: 3.5rem; padding-top: 3.5rem;
} }
.xl\:text-left{
text-align: left;
}
.xl\:text-4xl{ .xl\:text-4xl{
font-size: 2.45rem; font-size: 2.45rem;
} }
...@@ -3957,14 +3850,3 @@ a.icon-link:hover span{ ...@@ -3957,14 +3850,3 @@ a.icon-link:hover span{
margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse))); 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;
}
}
{% extends "main/base.html" %} {% extends "main/base.html" %}
{% load wagtailcore_tags wagtailimages_tags shared_filters %} {% 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 %}
{% extends "main/base.html" %} {% extends "main/base.html" %}
{% load static wagtailcore_tags wagtailimages_tags shared_filters %} {% 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 %}
...@@ -15,7 +15,8 @@ ...@@ -15,7 +15,8 @@
<div class="mb-12"> <div class="mb-12">
<div class="switch"> <div class="switch">
{% for program_group in page.program %} {% for program_group in page.program %}
<a class="switch__item {% if forloop.first %}switch__item--active{% endif %}">{{ program_group.value.title }}</a> <a
class="switch__item {% if forloop.first %}switch__item--active{% endif %}">{{ program_group.value.title }}</a>
{% endfor %} {% endfor %}
</div> </div>
</div> </div>
...@@ -39,7 +40,7 @@ ...@@ -39,7 +40,7 @@
{% endfor %} {% endfor %}
</div> </div>
</div> </div>
{% include 'main/includes/newsletter_section.html' %}
</main> </main>
{% endblock %} {% endblock %}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment