Skip to content
Snippets Groups Projects
Commit 1dd6a84b authored by Štěpán Farka's avatar Štěpán Farka
Browse files

Merge remote-tracking branch 'origin/feature/pirati-cz' into feature/pirati-cz

parents 88884ed0 36cbf92d
No related branches found
No related tags found
2 merge requests!607Pirati.cz,!575Feature/pirati cz
Pipeline #9395 passed
......@@ -174,7 +174,7 @@ Přes CRON je třeba na pozadí spouštět Django `manage.py` commandy:
* `publish_scheduled_pages` - publikuje naplánované stránky (každou hodinu)
* `update_callendars` - stáhne a aktualizuje kalendáře (několikrát denně)
* `update_redmine_issues` - aktualizuje programované body MS a KS stránek napojených na Redmine (několikrát denně)
* `update_tweets` - aktualizuje tweety z účtu PiratskaStrana (každou hodinu) - vyžaduje mít v .env TWITTER_BEARER_TOKEN
* `update_tweets` - aktualizuje tweety podle nastavení na Homepage pirati.cz - vyžaduje mít v .env TWITTER_BEARER_TOKEN, parametr --days určuje stáří tweetů (default 1)
### Fulltextové vyhledávání v češtině
......
......@@ -798,6 +798,13 @@ video {
}
}
@media (min-width: 2060px){
.container{
max-width: 2060px;
}
}
.btn{
display: inline-block;
text-align: center;
......@@ -1382,7 +1389,7 @@ video {
padding-left: 1.25rem;
padding-right: 1.25rem;
margin: auto;
max-width: 1300px;
max-width: 1350px;
}
.container--wide {
......@@ -1391,16 +1398,16 @@ video {
}
.section-clip {
-webkit-clip-path: polygon(0 1%, 100% 0%, 100% 99%, 0% 100%);
clip-path: polygon(0 1%, 100% 0%, 100% 99%, 0% 100%);
-webkit-clip-path: polygon(0 10px, 100% 0%, 100% 99%, 0% 100%);
clip-path: polygon(0 10px, 100% 0%, 100% 99%, 0% 100%);
margin-bottom: -3.2vw;
}
@media (min-width: 1200px) {
.section-clip {
-webkit-clip-path: polygon(0 5%, 100% 0%, 100% 95%, 0% 100%);
clip-path: polygon(0 5%, 100% 0%, 100% 95%, 0% 100%);
-webkit-clip-path: polygon(0 20px, 100% 0%, 100% 95%, 0% 100%);
clip-path: polygon(0 20px, 100% 0%, 100% 95%, 0% 100%);
margin-bottom: -4.2vw
}
}
......@@ -1431,6 +1438,14 @@ video {
max-width: 1400px;
}
.grid-container.person-grid-container {
max-width: 1400px;
}
.grid-container.no-max {
max-width: none;
}
.grid-content {
grid-area: content;
}
......@@ -1458,7 +1473,7 @@ video {
.person-box-medium {
max-width: 485px;
width: 485px;
width: 100%;
}
.person-box {
......@@ -1472,12 +1487,34 @@ video {
.photo-header {
height: 36rem;
}
@media (min-width: 1200px) {
.photo-header {
height: 40vw
}
}
.simple-header-height {
height: 13rem;
}
@media (min-width: 1200px) {
.simple-header-height {
height: 26rem
}
}
@media (min-width: 1200px) {
.footer-section {
height: 981px;
}
}
.flag {
/* right margin makes space for flag stripe */
position: relative;
......@@ -1652,9 +1689,17 @@ 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;
}
}
.select:after{
position: absolute;
......@@ -1705,8 +1750,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: 1.25rem;
padding-bottom: 1.25rem;
padding-top: 0.75rem;
padding-bottom: 0.75rem;
padding-left: 1rem;
padding-right: 2rem;
font-size: 1.125rem;
......@@ -1717,6 +1762,17 @@ 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
......@@ -2131,7 +2187,6 @@ video {
@media (min-width: 992px){
.head-4xl{
font-size: 2.45rem;
line-height: 2.5rem;
}
}
......@@ -2143,6 +2198,21 @@ 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;
......@@ -2189,6 +2259,38 @@ 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;
......@@ -2360,8 +2462,28 @@ 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;
margin-bottom: 1rem;
display: flex;
height: 20rem;
flex-direction: column;
......@@ -2461,9 +2583,18 @@ p{
}
.footer-clip {
-webkit-clip-path: polygon(0 8.25%, 100% 0, 100% 100%, 0% 100%);
clip-path: polygon(0 8.25%, 100% 0, 100% 100%, 0% 100%);
-webkit-clip-path: polygon(0 10px, 100% 0, 100% 100%, 0% 100%);
clip-path: polygon(0 10px, 100% 0, 100% 100%, 0% 100%);
}
/* TODO responsive */
@media (min-width: 768px) {
.footer-clip {
-webkit-clip-path: polygon(0 20px, 100% 0, 100% 100%, 0% 100%);
clip-path: polygon(0 20px, 100% 0, 100% 100%, 0% 100%)
}
}
.footer__container {
......@@ -2649,16 +2780,16 @@ p{
grid-column: span 8 / span 8;
}
.col-start-2{
grid-column-start: 2;
.col-start-1{
grid-column-start: 1;
}
.col-end-13{
grid-column-end: 13;
.col-start-2{
grid-column-start: 2;
}
.clear-both{
clear: both;
.col-end-3{
grid-column-end: 3;
}
.mx-auto{
......@@ -2736,6 +2867,14 @@ p{
margin-bottom: 0px;
}
.mb-3{
margin-bottom: 0.75rem;
}
.mr-7{
margin-right: 1.75rem;
}
.mr-6{
margin-right: 1.5rem;
}
......@@ -2748,10 +2887,6 @@ p{
margin-bottom: 4rem;
}
.mr-7{
margin-right: 1.75rem;
}
.mb-7{
margin-bottom: 1.75rem;
}
......@@ -2760,20 +2895,12 @@ p{
margin-top: 6rem;
}
.mb-32{
margin-bottom: 8rem;
}
.mb-10{
margin-bottom: 2.5rem;
}
.ml-8{
margin-left: 2rem;
}
.mb-12{
margin-bottom: 3rem;
.ml-5{
margin-left: 1.25rem;
}
.ml-4{
......@@ -2788,20 +2915,8 @@ p{
margin-top: 1rem;
}
.mb-3{
margin-bottom: 0.75rem;
}
.mb-14{
margin-bottom: 3.5rem;
}
.mb-24{
margin-bottom: 6rem;
}
.mb-40{
margin-bottom: 10rem;
.mb-12{
margin-bottom: 3rem;
}
.mt-8{
......@@ -2864,12 +2979,20 @@ p{
width: 100%;
}
.w-16{
width: 4rem;
}
.w-20{
width: 5rem;
}
.w-10\/12{
width: 83.333333%;
}
.w-44{
width: 11rem;
.w-60{
width: 15rem;
}
.w-80{
......@@ -2880,44 +3003,16 @@ p{
width: 3rem;
}
.w-11\/12{
width: 91.666667%;
}
.w-48{
width: 12rem;
}
.w-20{
width: 5rem;
}
.w-1\/2{
width: 50%;
}
.w-5\/12{
width: 41.666667%;
}
.w-16{
width: 4rem;
}
.w-7\/12{
width: 58.333333%;
}
.w-1\/12{
width: 8.333333%;
}
.w-4\/12{
width: 33.333333%;
}
.w-8\/12{
width: 66.666667%;
.w-5\/6{
width: 83.333333%;
}
.max-w-xl{
......@@ -2936,6 +3031,10 @@ p{
max-width: 20rem;
}
.max-w-2xl{
max-width: 42rem;
}
.shrink-0{
flex-shrink: 0;
}
......@@ -2996,10 +3095,6 @@ p{
justify-content: flex-start;
}
.justify-end{
justify-content: flex-end;
}
.justify-center{
justify-content: center;
}
......@@ -3112,6 +3207,10 @@ p{
background-size: cover;
}
.bg-center{
background-position: center;
}
.bg-no-repeat{
background-repeat: no-repeat;
}
......@@ -3188,6 +3287,14 @@ p{
padding-top: 4rem;
}
.pl-4{
padding-left: 1rem;
}
.pr-2{
padding-right: 0.5rem;
}
.pt-5{
padding-top: 1.25rem;
}
......@@ -3204,14 +3311,6 @@ p{
padding-top: 2.5rem;
}
.pt-40{
padding-top: 10rem;
}
.pb-4{
padding-bottom: 1rem;
}
.pt-12{
padding-top: 3rem;
}
......@@ -3220,22 +3319,14 @@ p{
padding-bottom: 0.5rem;
}
.pt-32{
padding-top: 8rem;
}
.pb-52{
padding-bottom: 13rem;
.text-left{
text-align: left;
}
.text-center{
text-align: center;
}
.text-right{
text-align: right;
}
.font-alt{
font-family: Bebas Neue, Helvetica, Arial, sans-serif;
}
......@@ -3248,6 +3339,10 @@ p{
font-size: .875rem;
}
.text-xs{
font-size: .75rem;
}
.text-2xl{
font-size: 1.6rem;
}
......@@ -3264,14 +3359,14 @@ p{
font-size: 4rem;
}
.text-xs{
font-size: .75rem;
}
.text-7xl{
font-size: 5.3rem;
}
.text-xl{
font-size: 1.3rem;
}
.text-4xl{
font-size: 2.45rem;
}
......@@ -3280,10 +3375,6 @@ p{
font-size: 1rem;
}
.text-xl{
font-size: 1.3rem;
}
.font-bold{
font-weight: 700;
}
......@@ -3300,10 +3391,6 @@ p{
line-height: 1.5rem;
}
.leading-9{
line-height: 2.25rem;
}
.leading-5{
line-height: 1.25rem;
}
......@@ -3347,6 +3434,11 @@ p{
color: rgb(27 192 227 / var(--tw-text-opacity));
}
.text-orange-250{
--tw-text-opacity: 1;
color: rgb(254 168 106 / var(--tw-text-opacity));
}
.text-orange-300{
--tw-text-opacity: 1;
color: rgb(237 150 84 / var(--tw-text-opacity));
......@@ -3357,11 +3449,6 @@ p{
color: rgb(141 65 95 / var(--tw-text-opacity));
}
.text-orange-250{
--tw-text-opacity: 1;
color: rgb(254 168 106 / var(--tw-text-opacity));
}
.underline{
-webkit-text-decoration-line: underline;
text-decoration-line: underline;
......@@ -3401,19 +3488,24 @@ p{
}
}
/* Removes default container padding from the element. */
@media (min-width: 2060px) {
/* @note: needs to be kept in sync with tailwind configuration */
.grid-container {
margin-left: 20%
}
}
@media (min-width: 1200px) {
.simple-header-height {
height: 26rem;
}
.footer-section {
height: 981px;
.grid-container.person-grid-container {
grid-template-columns: 240px 1fr 339px
}
}
/* Removes default container padding from the element. */
/* @note: needs to be kept in sync with tailwind configuration */
.head-alt-md,
.content-block .head-alt-md{
font-family: Bebas Neue, Helvetica, Arial, sans-serif;
......@@ -3557,6 +3649,82 @@ 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\:mt-0{
margin-top: 0px;
}
.sm\:mb-0{
margin-bottom: 0px;
}
.sm\:ml-8{
margin-left: 2rem;
}
.sm\:mb-12{
margin-bottom: 3rem;
}
.sm\:grid{
display: grid;
}
.sm\:max-h-60{
max-height: 15rem;
}
.sm\:w-40{
width: 10rem;
}
.sm\:w-5\/12{
width: 41.666667%;
}
.sm\:grid-flow-col{
grid-auto-flow: column;
}
.sm\:grid-rows-6{
grid-template-rows: repeat(6, minmax(0, 1fr));
}
.sm\:flex-row{
flex-direction: row;
}
.sm\:justify-end{
justify-content: flex-end;
}
.sm\:justify-center{
justify-content: center;
}
.sm\:pr-0{
padding-right: 0px;
}
.sm\:text-right{
text-align: right;
}
.sm\:text-3xl{
font-size: 1.875rem;
}
.sm\:text-4xl{
font-size: 2.45rem;
}
.btn.sm\:btn--autowidth{
width: auto;
}
......@@ -3572,8 +3740,12 @@ a.icon-link:hover span{
grid-column: span 2 / span 2;
}
.md\:mr-1{
margin-right: 0.25rem;
.md\:mb-0{
margin-bottom: 0px;
}
.md\:mb-12{
margin-bottom: 3rem;
}
.md\:mt-0{
......@@ -3588,12 +3760,16 @@ a.icon-link:hover span{
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;
.md\:justify-end{
justify-content: flex-end;
}
.md\:text-right{
text-align: right;
}
.md\:text-5xl{
font-size: 3rem;
}
}
......@@ -3623,8 +3799,8 @@ a.icon-link:hover span{
margin-bottom: 4rem;
}
.lg\:mb-28{
margin-bottom: 7rem;
.lg\:mb-0{
margin-bottom: 0px;
}
.lg\:mb-24{
......@@ -3656,13 +3832,13 @@ a.icon-link:hover span{
padding-bottom: 9rem;
}
.lg\:pb-8{
padding-bottom: 2rem;
}
.lg\:text-base{
font-size: 1rem;
}
.lg\:text-6xl{
font-size: 4rem;
}
}
@media (min-width: 1200px){
......@@ -3728,6 +3904,10 @@ a.icon-link:hover span{
margin-bottom: 3rem;
}
.xl\:mb-14{
margin-bottom: 3.5rem;
}
.xl\:block{
display: block;
}
......@@ -3748,6 +3928,14 @@ a.icon-link:hover span{
width: 15rem;
}
.xl\:w-44{
width: 11rem;
}
.xl\:w-36{
width: 9rem;
}
.xl\:w-full{
width: 100%;
}
......@@ -3791,8 +3979,12 @@ a.icon-link:hover span{
padding-top: 0px;
}
.xl\:pt-24{
padding-top: 6rem;
.xl\:pb-24{
padding-bottom: 6rem;
}
.xl\:pt-44{
padding-top: 11rem;
}
.xl\:pt-8{
......@@ -3803,18 +3995,22 @@ a.icon-link:hover span{
padding-top: 3.5rem;
}
.xl\:text-4xl{
font-size: 2.45rem;
.xl\:text-left{
text-align: left;
}
.xl\:text-9xl{
font-size: 7.5rem;
.xl\:text-4xl{
font-size: 2.45rem;
}
.xl\:text-base{
font-size: 1rem;
}
.xl\:text-9xl{
font-size: 7.5rem;
}
.xl\:text-xl{
font-size: 1.3rem;
}
......@@ -3850,3 +4046,14 @@ 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;
}
}
Source diff could not be displayed: it is too large. Options to address this: view the blob.
......@@ -18,23 +18,23 @@
.photo-header {
height: 36rem;
@screen xl {
height: 40vw;
}
}
.simple-header-height {
height: 13rem;
}
@responsive {
@screen xl {
.simple-header-height {
height: 26rem;
}
}
@screen xl {
.footer-section {
height: 981px;
}
}
}
}
......@@ -8,7 +8,7 @@
</h2>
<div class="flex flex-wrap justify-center items-center">
{% for box in self.list %}
<div class="mb-1 w-60 w-80 h-80 flex bg-white flex-col items-center justify-center md:mr-1">
<div class="mb-1 mr-1 w-60 w-80 h-80 flex bg-white flex-col items-center justify-center md:mr-1">
{% image box.image max-200x200 as box_img %}
<img
src="{{ box_img.url }}"
......
{% load wagtailimages_tags %}
<div class="__js-root">
<ui-header-carousel></ui-header-carousel>
<ui-header-carousel>
{% for slide in self.slides %}
<div class="xl:h-screen relative">
{% image slide.image fill-1920x800 as slide_img %}
<img src="{{ slide_img.url }}" draggable="false">
<div class="header-carousel--text grid-container">
<div class="grid-content-with-right-side">
<h1 class="text-white">{{ slide.line_1 }}</h1>{# TODO SEO <h1><span><span> #}
<h1 class="text-orange-250">{{ slide.line_2 }}</h1>
{% include 'main/includes/button_animated.html' with btn_link=slide.button_link btn_text=slide.button_text %}
</a>
</div>
</div>
</div>
{% endfor %}
</ui-header-carousel>
</div>
<footer class="bg-black footer-clip text-white pt-12">
<div class="footer__container">
<div class="font-alt mb-10 text-right text-2xl">
<div class="footer__container sm:mt-0">
<div class="flex flex-wrap justify-center font-alt mb-10 md:justify-end md:text-right text-2xl">
Zůstaňte s námi v konaktu
</div>
<div class="flex justify-end mb-16 text-right">
{% for social_link_block in page.root_page.social_links %}
<div>
<a href="{{ social_link_block.value.link }}" class="ml-8">
<i class="{{ social_link_block.value.icon }} mr-1"></i>
{{ social_link_block.value.text }}
<div class="flex flex-col mb-16 ml-5 justify-center sm:justify-end sm:text-right sm:flex-row">
<div class="mb-2 sm:mb-0">
<a href="" class="sm:ml-8">
<i class="ico--facebook mr-1"></i>
@ceska.piratska.strana
</a>
</div>
<div class="mb-2 sm:mb-0">
<a href="" class="sm:ml-8">
<i class="ico--twitter mr-1"></i>
#piratskastrana
</a>
</div>
{% endfor %}
<div class="mb-2 sm:mb-0">
<a href="" class="sm:ml-8">
<i class="ico--instagram mr-1"></i>
@pirati.cz
</a>
</div>
<div class="flex flex-wrap mb-16 w-full">
<div>
<h6 class="font-alt text-2xl mb-12">
<a href="" class="sm:ml-8">
<i class="ico--youtube mr-1"></i>
pirati.cz
</a>
</div>
</div>
<div class="flex flex-wrap mb-16 w-full sm:justify-center">
<div class="mb-8 md:mb-0">
<h6 class="font-alt text-2xl mb-6 sm:mb-12">
Navigace
</h6>
<div class="grid grid-flow-col grid-rows-6 max-h-60">
......@@ -39,8 +55,8 @@
</a>
</div>
</div>
<div>
<h6 class="font-alt text-2xl mb-12">
<div class="mb-8 md:mb-0">
<h6 class="font-alt text-2xl mb-6 sm:mb-12">
Transparance
</h6>
<div class="grid grid-flow-col grid-rows-6 max-h-60">
......@@ -64,8 +80,8 @@
</a>
</div>
</div>
<div>
<h6 class="font-alt text-2xl mb-12">
<div class="mb-8 md:mb-0">
<h6 class="font-alt text-2xl mb-6 sm:mb-12">
Osobní stránky
</h6>
<div class="grid grid-flow-col grid-rows-6 max-h-60">
......@@ -83,11 +99,11 @@
</a>
</div>
</div>
<div>
<h6 class="font-alt text-2xl mb-12">
<div class="flex flex-col mb-6 md:mb-0">
<h6 class="font-alt text-2xl mb-6 sm:mb-12">
Další projekty
</h6>
<div class="grid grid-flow-col grid-rows-6 max-h-60">
<div class="flex flex-col sm:grid sm:grid-flow-col sm:grid-rows-6 sm:max-h-60">
<a class="cursor-pointer hover:no-underline mb-5 w-48">
Jak pracujeme
</a>
......@@ -142,7 +158,7 @@
</div>
</div>
<div>
<h6 class="font-alt text-2xl mb-12">
<h6 class="font-alt text-2xl mb-8 md:mb-12">
Média
</h6>
<div class="flex flex-col flex-wrap max-h-60">
......@@ -162,16 +178,16 @@
</div>
</div>
<div class="flex flex-wrap items-end pb-2">
<div class="text-grey-300 w-full lg:w-1/2">
<div class="text-grey-300 w-full mb-10 lg:mb-0 lg:w-1/2">
&copy; Piráti 2022. Všechna práva vyhlazena.<br>
Sdílejte a nechte ostatní sdílet za stejných podmínek.
</div>
<div class="flex justify-endw-full lg:w-1/2">
<div class="flex ml-4">
<div class="flex flex-col justify-end-full sm:flex-row lg:w-1/2">
<div class="flex ml-4 mb-10 sm:mb-0">
<div class="mr-5">
<img class="rounded-full shadow-sm w-20 mb-2" src="https://randomuser.me/api/portraits/women/26.jpg" alt="user image">
</div>
<div class="flex flex-col">
<div class="flex flex-col leading-6">
<h6 class="font-alt text-2xl text-uppercase">
Veronika Šmídová
</h6>
......@@ -190,7 +206,7 @@
<div class="mr-5">
<img class="rounded-full shadow-sm w-20 mb-2" src="https://randomuser.me/api/portraits/women/26.jpg" alt="user image">
</div>
<div class="flex flex-col">
<div class="flex flex-col leading-6">
<h6 class="font-alt text-2xl text-uppercase">
Veronika Šmídová
</h6>
......@@ -209,3 +225,215 @@
</div>
</div>
</footer>
{#<footer class="bg-black footer-clip text-white pt-12">#}
{# <div class="footer__container">#}
{# <div class="font-alt mb-10 text-right text-2xl">#}
{# Zůstaňte s námi v konaktu#}
{# </div>#}
{# <div class="flex flex-col mb-16 ml-5 justify-center sm:justify-end sm:text-right sm:flex-row">#}
{# {% for social_link_block in page.root_page.social_links %}#}
{# <div>#}
{# <a href="{{ social_link_block.value.link }}" class="ml-8">#}
{# <i class="{{ social_link_block.value.icon }} mr-1"></i>#}
{# {{ social_link_block.value.text }}#}
{# </a>#}
{# </div>#}
{# {% endfor %}#}
{# </div>#}
{# <div class="flex flex-wrap mb-16 w-full">#}
{# <div>#}
{# <h6 class="font-alt text-2xl mb-12">#}
{# Navigace#}
{# </h6>#}
{# <div class="grid grid-flow-col grid-rows-6 max-h-60">#}
{# <a class="cursor-pointer hover:no-underline mb-5 w-48">#}
{# Jak pracujeme#}
{# </a>#}
{# <a class="cursor-pointer hover:no-underline mb-5 w-48">#}
{# Program#}
{# </a>#}
{# <a class="cursor-pointer hover:no-underline mb-5 w-48">#}
{# Lidé#}
{# </a>#}
{# <a class="cursor-pointer hover:no-underline mb-5 w-48">#}
{# Lidé#}
{# </a>#}
{# <a class="cursor-pointer hover:no-underline mb-5 w-48">#}
{# Lidé#}
{# </a>#}
{# <a class="cursor-pointer hover:no-underline mb-5 w-48">#}
{# Lidé#}
{# </a>#}
{# </div>#}
{# </div>#}
{# <div>#}
{# <h6 class="font-alt text-2xl mb-12">#}
{# Transparance#}
{# </h6>#}
{# <div class="grid grid-flow-col grid-rows-6 max-h-60">#}
{# <a class="cursor-pointer hover:no-underline mb-5 w-48">#}
{# Jak pracujeme#}
{# </a>#}
{# <a class="cursor-pointer hover:no-underline mb-5 w-48">#}
{# Program#}
{# </a>#}
{# <a class="cursor-pointer hover:no-underline mb-5 w-48">#}
{# Lidé#}
{# </a>#}
{# <a class="cursor-pointer hover:no-underline mb-5 w-48">#}
{# Lidé#}
{# </a>#}
{# <a class="cursor-pointer hover:no-underline mb-5 w-48">#}
{# Lidé#}
{# </a>#}
{# <a class="cursor-pointer hover:no-underline mb-5 w-48">#}
{# Lidé#}
{# </a>#}
{# </div>#}
{# </div>#}
{# <div>#}
{# <h6 class="font-alt text-2xl mb-12">#}
{# Osobní stránky#}
{# </h6>#}
{# <div class="grid grid-flow-col grid-rows-6 max-h-60">#}
{# <a class="cursor-pointer hover:no-underline mb-5 w-48">#}
{# olgarichterova.cz#}
{# </a>#}
{# <a class="cursor-pointer hover:no-underline mb-5 w-48">#}
{# gregorova.eu#}
{# </a>#}
{# <a class="cursor-pointer hover:no-underline mb-5 w-48">#}
{# mikulas-peksa.eu#}
{# </a>#}
{# <a class="cursor-pointer hover:no-underline mb-5 w-48">#}
{# kolaja.eu#}
{# </a>#}
{# </div>#}
{# </div>#}
{# <div>#}
{# <h6 class="font-alt text-2xl mb-12">#}
{# Další projekty#}
{# </h6>#}
{# <div class="grid grid-flow-col grid-rows-6 max-h-60">#}
{# <a class="cursor-pointer hover:no-underline mb-5 w-48">#}
{# Jak pracujeme#}
{# </a>#}
{# <a class="cursor-pointer hover:no-underline mb-5 w-48">#}
{# Program#}
{# </a>#}
{# <a class="cursor-pointer hover:no-underline mb-5 w-48">#}
{# Lidé#}
{# </a>#}
{# <a class="cursor-pointer hover:no-underline mb-5 w-48">#}
{# budoucnostresimeted.cz#}
{# </a>#}
{# <a class="cursor-pointer hover:no-underline mb-5 w-48">#}
{# Lidé#}
{# </a>#}
{# <a class="cursor-pointer hover:no-underline mb-5 w-48">#}
{# Lidé#}
{# </a>#}
{# <a class="cursor-pointer hover:no-underline mb-5 w-48">#}
{# Jak pracujeme#}
{# </a>#}
{# <a class="cursor-pointer hover:no-underline mb-5 w-48">#}
{# Program#}
{# </a>#}
{# <a class="cursor-pointer hover:no-underline mb-5 w-48">#}
{# Lidé#}
{# </a>#}
{# <a class="cursor-pointer hover:no-underline mb-5 w-48">#}
{# Lidé#}
{# </a>#}
{# <a class="cursor-pointer hover:no-underline mb-5 w-48">#}
{# Lidé#}
{# </a>#}
{# <a class="cursor-pointer hover:no-underline mb-5 w-48">#}
{# Lidé#}
{# </a>#}
{# <a class="cursor-pointer hover:no-underline mb-5 w-48">#}
{# Jak pracujeme#}
{# </a>#}
{# <a class="cursor-pointer hover:no-underline mb-5 w-48">#}
{# Program#}
{# </a>#}
{# <a class="cursor-pointer hover:no-underline mb-5 w-48">#}
{# Lidé#}
{# </a>#}
{# <a class="cursor-pointer hover:no-underline mb-5 w-48">#}
{# Lidé#}
{# </a>#}
{# <a class="cursor-pointer hover:no-underline mb-5 w-48">#}
{# voda.pirati.cz#}
{# </a>#}
{# </div>#}
{# </div>#}
{# <div>#}
{# <h6 class="font-alt text-2xl mb-12">#}
{# Média#}
{# </h6>#}
{# <div class="flex flex-col flex-wrap max-h-60">#}
{# <a class="cursor-pointer hover:no-underline mb-5 w-48">#}
{# Foto#}
{# </a>#}
{# <a class="cursor-pointer hover:no-underline mb-5 w-48">#}
{# Video#}
{# </a>#}
{# <a class="cursor-pointer hover:no-underline mb-5 w-48">#}
{# Newsletter#}
{# </a>#}
{# <a class="cursor-pointer hover:no-underline mb-5 w-48">#}
{# Grafika#}
{# </a>#}
{# </div>#}
{# </div>#}
{# </div>#}
{# <div class="flex flex-wrap items-end pb-2">#}
{# <div class="text-grey-300 w-full lg:w-1/2">#}
{# &copy; Piráti 2022. Všechna práva vyhlazena.<br>#}
{# Sdílejte a nechte ostatní sdílet za stejných podmínek.#}
{# </div>#}
{# <div class="flex justify-endw-full lg:w-1/2">#}
{# <div class="flex ml-4">#}
{# <div class="mr-5">#}
{# <img class="rounded-full shadow-sm w-20 mb-2" src="https://randomuser.me/api/portraits/women/26.jpg" alt="user image">#}
{# </div>#}
{# <div class="flex flex-col">#}
{# <h6 class="font-alt text-2xl text-uppercase">#}
{# Veronika Šmídová#}
{# </h6>#}
{# <strong class="font-bold mb-1 text-grey-300">#}
{# Tisková mluvčí#}
{# </strong>#}
{# <span>#}
{# +420 778 111 466#}
{# </span>#}
{# <span class="text-turquoise-500">#}
{# veronika.smidova@pirati.cz#}
{# </span>#}
{# </div>#}
{# </div>#}
{# <div class="flex ml-4">#}
{# <div class="mr-5">#}
{# <img class="rounded-full shadow-sm w-20 mb-2" src="https://randomuser.me/api/portraits/women/26.jpg" alt="user image">#}
{# </div>#}
{# <div class="flex flex-col">#}
{# <h6 class="font-alt text-2xl text-uppercase">#}
{# Veronika Šmídová#}
{# </h6>#}
{# <strong class="font-bold mb-1 text-grey-300">#}
{# Tisková mluvčí#}
{# </strong>#}
{# <span>#}
{# +420 778 111 466#}
{# </span>#}
{# <span class="text-turquoise-500">#}
{# veronika.smidova@pirati.cz#}
{# </span>#}
{# </div>#}
{# </div>#}
{# </div>#}
{# </div>#}
{# </div>#}
{#</footer>#}
<div class="flex mb-8 person-box-big max-w-md xl:max-w-xl flex-col xl:flex-row xl:mb-16">
<div class="shrink-0 mr-2">
<img
class="rounded-full shadow-sm w-30 xl:w-60 mb-2"
src="https://randomuser.me/api/portraits/women/26.jpg"
alt=" {{ name }}"
>
</div>
<div class="flex flex-col justify-between py-4">
<div class="flex flex-col mb-4">
<h4 class="font-bold mb-2 text-2xl xl:text-4xl">
{{ person_page.title }}
</h4>
<span class="leading-6 mb-6 w-10/12">
{{ person_page.position | default_if_none:'' }}
</span>
<span class="font-bold mb-1 text-grey-300">
{{ person_page.phone | default_if_none:'' }}
</span>
<span class="text-turquoise-500 underline">
{{ person_page.email | default_if_none:'' }}
</span>
</div>
<div>
{% include 'main/includes/button_animated.html' with btn_link=person_page.url btn_text="Zobrazit více" %}
</div>
</div>
</div>
......@@ -2,6 +2,8 @@
{% load static wagtailcore_tags wagtailimages_tags wagtailroutablepage_tags %}
{% block content %}
{% include 'main/includes/layout/simple_page_header.html' %}
{# {% routablepageurl page.root_page.articles_page "tags" as articles_tag_page_url %}#}
<main role="main" class="mb-10 xl:mb-32">
<div class="grid-container mb-2 lg:mb-12">
......@@ -49,6 +51,3 @@
{# {% endif %}#}
{% endblock %}
......@@ -16,7 +16,7 @@
<div class="container--medium">
<div class="__js-root">
<ui-view-provider
:initial="{ {% for people_group in page.people %}'{{ people_group.value.slug }}': {% if forloop.counter0 %}true{% else %}false{% endif %},{% endfor %} }"
:initial="{ {% for people_group in page.people %}'{{ people_group.value.slug }}': {% if forloop.counter0 %}false{% else %}true{% endif %},{% endfor %} }"
:sync-location="true"
v-slot="{ isCurrentView, toggleView }"
>
......@@ -24,7 +24,8 @@
<div class="switch">
{% for people_group in page.people %}
<a @click="toggleView('{{ people_group.value.slug }}')" class="switch__item"
:class="{'switch__item--active': isCurrentView('{{ people_group.value.slug }}')}">
:class="{'switch__item--active': isCurrentView('{{ people_group.value.slug }}')}"
>
{{ people_group.value.title }}
</a>
{% endfor %}
......@@ -33,7 +34,9 @@
<div class="flex flex-wrap justify-center mb-12">
{% for people_group in page.people %}
<template v-if="isCurrentView('{{ people_group.value.slug }}')">
{{ people_group.value.title }}
{% for person_page in people_group.value.person_list %}
{% include 'main/includes/person_contact_big.html' %}
{% endfor %}
</template>
{% endfor %}
</div>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment