Skip to content
Snippets Groups Projects
Commit 01c6ba8f authored by OndraRehounek's avatar OndraRehounek
Browse files

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

parents f8b0b5ae 4dd5ab22
No related branches found
No related tags found
2 merge requests!607Pirati.cz,!575Feature/pirati cz
Pipeline #9570 passed
Showing
with 221 additions and 119 deletions
<div class="container--medium mx-auto mb-8 lg:mb-16">
<h2 class="head-7xl text-center mb-6 xl:mb-28">
<div class="container--wide mx-auto mb-8 lg:mb-16">
<div class="flex flex-wrap justify-center items-center">
<h2 class="w-full head-7xl xl:text-center mb-6 xl:mb-28">
{{ self.title }}
</h2>
</div>
<div id="tweetsList">
{% include 'main/includes/twitter_widget.html' with tweet_list=tweet_list %}
</div>
......
<a href="{{ btn_link }}" class="btn btn__slide__wrap {{ extra_classes }}">
<span class="btn text-sm bg-black text-white w-32 lg:text-base">
<span class="btn text-lg bg-black text-white w-32 lg:text-base">
{{ btn_text | default_if_none:"Číst dále" }}
</span>
<span class="btn text-sm bg-white text-black w-32 lg:text-base">
<span class="btn text-lg bg-white text-black w-32 lg:text-base">
{{ btn_text | default_if_none:"Číst dále" }}
</span>
</a>
......@@ -4,13 +4,17 @@
class="bg-black flex items-center header-clip photo-header py-32 mb-20 w-full bg-no-repeat bg-cover bg-center"
style="background-image: url('{{ image_url | default_if_none:"https://cc.cz/wp-content/uploads/2022/04/bartos-otv.jpg" }}')"
>
<div class="grid-container header-max-width pt-16">
<div class="grid-container">
<div class="grid-content-with-right-side header-max-width pt-40 sm:pt-0">
<div class="pl-4 pr-2 col-start-1 col-end-3 sm:col-start-2 sm:col-end-13 sm:pr-0">
<h1 class="font-alt text-white">
<span class="text-2xl">{{ before_title | default_if_none:"" }}</span><br>
<span class="font-alt text-7xl">{{ page.title | default_if_none:"" }}</span><span class="text-2xl">{{ after_title | default_if_none:"" }}</span><br>
<div class="text-lg sm:text-3xl text-green-500 mb-4 font-medium sm:mb-8">
<span class="text-2xl">{{ before_title | default_if_none:"" }}</span>
</div>
<h1 class="font-alt text-white text-3xl md:text-5xl leading-9 sm:leading-none lg:text-6xl">
<span class="font-alt">{{ page.title | default_if_none:"" }}</span><span class="text-2xl">{{ after_title | default_if_none:"" }}</span><br>
<span class="font-alt">{{ subtitle | default_if_none:"" }}</span>
</h1>
</div>
</div>
</div>
</header>
<header class="bg-black flex items-center simple-header-height header-clip mb-8 xl:mb-24 xl:pt-24 w-full">
<header class="bg-black flex items-center simple-header-height header-clip mb-8 xl:mb-24 xl:pb-24 xl:pt-44 w-full">
<div class="grid-container header-max-width">
<div class="grid-content">
<h1 class="head-8xl text-white">
......
......@@ -13,7 +13,7 @@
<input type="text" class="text-input bg-white form-field__control mb-3 w-full" value=""
placeholder="Tvůj email"/>
<div class="checkbox form-field__control flex items-center mb-3">
<input type="checkbox" id="checkbox_1">
<input type="checkbox" id="checkbox_1" class="text-input bg-white form-field__control">
<label class="text-xs font-alt font-light" for="checkbox_1">"Souhlasím se zpracováním osobních údajů"</label>
</div>
{% include 'main/includes/button_animated.html' with btn_text="Odebírat" %}
......
{% for article_page in article_data_list %}
<div class="flex flex-col justify-between items-start mb-9">
<div class="flex font-bold mb-4 text-xs text-white uppercase">
<span class="bg-green-500 mr-1 px-1">Duben 2022</span>
<span class="bg-violet-600 mr-1 px-1">#ENERGETIKA</span>
</div>
<h4 class="head-3xl mb-4">
{{ article_page.title }}
</h4>
<p class="mb-6">
{{ article_page.perex }}
</p>
{% include 'main/includes/button_animated.html' with btn_link=article_page.url btn_text="Číst dále" %}
</div>
{% endfor %}
{% load wagtailimages_tags %}
<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">
<div class="flex mb-8 person-box-big max-w-sm gap-6 xl:max-w-xl flex-col xl:flex-row xl:mb-16">
<div class="xl:shrink-0">
{% image person_page.profile_image fill-350x350 as profile_image %}
<img
class="rounded-full shadow-sm w-30 xl:w-60 mb-2"
class="rounded-full shadow-sm w-30 xl:w-60"
src="{{ profile_image.url }}"
alt=" {{ person_page.title }}"
>
</div>
<div class="flex flex-col justify-between py-4">
<div class="flex flex-col mb-4">
<div class="flex flex-col mb-8">
<h4 class="font-bold mb-2 text-2xl xl:text-4xl">
{{ person_page.title }}
</h4>
<span class="leading-6 mb-6 w-10/12">
<span class="leading-6 mb-4 xl:mb-6 w-10/12">
{{ person_page.position | default_if_none:'' }}
</span>
<span class="font-bold mb-1 text-grey-300">
<span class="font-bold mb-2 text-grey-300">
{{ person_page.phone | default_if_none:'' }}
</span>
<span class="text-turquoise-500 underline">
......
{% load wagtailimages_tags %}
{% for article_page in article_data_list %}
<div class="flex">
<div class="flex mb-3">
{% image article_page.image fill-128x128 as image %}
<img
src='{{ image.url }}' alt=""
class="mr-4 h-32 w-32"
>
<div class="flex flex-col justify-between items-start">
<span class="text-sm text-green-500 lg:text-base">
<span class="text-sm text-green-500 mb-2 lg:text-base">
{{ article_page.date | date }}
</span>
<h4 class="text-sm uppercase lg:text-base">
<h4 class="font-alt leading-5 text-base uppercase lg:text-base mb-2">
{{ article_page.title }}
</h4>
{% include 'main/includes/button_animated.html' with btn_link=article_page.url btn_text="Číst dále" %}
......
<div class="flex flex-wrap justify-center mb-8 lg:mb-24">
{% for tweet in tweet_list %}
<div class="w-full flex max-w-xs">
<div class="p-4 flex flex-col items-center text-center border border-grey-100">
<div class="w-full flex max-w-sm sm:max-w-xs">
<div class="mb-5 p-4 flex flex-col items-center text-center border border-grey-100 sm:mb-0">
<div class="flex flex-row sm:flex-col items-center">
<img
class="rounded-full shadow-sm w-12 mb-2"
src="{{ tweet.author_img_url }}"
alt="user image"
/>
<h5 class="font-alt mb-2">
<div class="flex flex-col sm:flex-col">
<h5 class="font-alt text-xl mb-2 sm:text-base">
{{ tweet.author_name }}
</h5>
<small class="mb-4 text-turquoise-400">
{{ tweet.author_username }}
</small>
<p class="text-base leading-6 mb-2">
</div>
</div>
<p class="text-small sm:text-base leading-6 mb-2">
{{ tweet.text }}
</p>
<a href="" class="hover:no-underline">
<i class="ico--twitter text-turquoise-400 text-xl"></i>
<a href="twitter.com/{{ tweet.author_username }}" class="hover:no-underline">
<i class="ico--twitter text-turquoise-400 text-3xl sm:text-xl"></i>
</a>
</div>
</div>
......
......@@ -8,10 +8,17 @@
{% endwith %}
{# {% 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">
<div class="grid-container mb-2 lg:mb-12 relative">
<div class="grid-left-side h-full bg-grey-150 left-tab">
<div class="p-6">
<div class="p-6 flex flex-wrap flex-row items-center justify-between xl:items-start xl:flex-col">
<span class="font-bold 3xl:text-xl">AUTOR ČLÁNKU: <br> {{ page.author }}</span><br>
<div class="flex flex-row static bottom-0 xl:absolute sm:bottom-5">
{% for social in page.author_page.social_links %}
<a href="{{ social.value.link }}" class="flex hover:no-underline">
<i class="{{ social.value.icon }} mx-1"></i>
</a>
{% endfor %}
</div>
</div>
</div>
<div class="grid-content leading-6">
......
......@@ -15,16 +15,32 @@
</h2>
</div>
</div>
<div class="__js-root">
<ui-view-provider :initial="{timeline: true, articles: false}" :sync-location="true"
v-slot="{ isCurrentView, toggleView }">
<div class="grid-container article-section mb-8">
<div class="grid-full">
<div class="flex justify-center">
<div class="switch">
<a @click="toggleView('timeline')" class="switch__item"
:class="{'switch__item--active': isCurrentView('timeline')}">Poslanecká sněmovna</a>
<a @click="toggleView('articles')" class="switch__item"
:class="{'switch__item--active': isCurrentView('articles')}">Vláda</a>
</div>
</div>
</div>
</div>
<template v-if="isCurrentView('timeline')">
<div class="mt-20">
<div class="grid-container article-section">
<div class="grid-full mb-8">
<div id="searchResultWrapper">
{% include 'main/blocks/articles_block.html' with article_data_list=article_data_list %}
<div id="showMoreTimelineResultsWrapper">
{% include 'main/blocks/articles_timeline_block.html' with article_data_list=article_timeline_list %}
</div>
{% if show_next_articles %}
<div class="text-center">
</div>
<div class="flex justify-center">
<a
onclick="showMoreArticles(event, this)"
onclick="showMoreTimelineArticles(event, this)"
href="#"
data-url="{{ page_url }}?months="
data-months="2"
......@@ -39,16 +55,47 @@
</a>
</div>
</div>
{% endif %}
</div>
</template>
<template v-if="isCurrentView('articles')">
<section class="grid-container mb-3 justify-start xl:mb-14">
<div class="grid-content-with-right-side">
<div class="leading-6">
<h2 class="head-4xl mb-5 xl:hidden">
Články
</h2>
<div id="searchArticleResultWrapper">
{% include 'main/includes/person_article_preview.html' with article_data_list=article_article_list %}
</div>
<div class="flex justify-center">
<a
onclick="showMoreArticles(event, this)"
href="#"
data-url="{{ page_url }}?page="
data-page="2"
class="btn btn__slide__wrap"
>
<span class="btn text-sm bg-black text-white w-32 lg:text-base">
Zobrazit další
</span>
<span class="btn text-sm bg-white text-black w-32 lg:text-base">
Zobrazit další
</span>
</a>
</div>
</div>
</div>
</section>
</template>
</ui-view-provider>
</div>
</main>
<script type="text/javascript">
async function showMoreArticles(event, btn) {
async function showMoreTimelineArticles(event, btn) {
event.preventDefault()
const searchResultWrapper = document.getElementById('searchResultWrapper')
const showMoreTimelineResultsWrapper = document.getElementById('showMoreTimelineResultsWrapper')
const url = btn.getAttribute('data-url') + btn.getAttribute('data-months')
const response = await fetch(url, {
......@@ -56,11 +103,25 @@
headers: {"X-Requested-With": "XMLHttpRequest"},
})
const data = await response.json()
showMoreTimelineResultsWrapper.innerHTML = data.html
btn.setAttribute('data-months', parseInt(btn.getAttribute('data-months')) + 1)
}
if (data.last_article) { btn.hide() }
async function showMoreArticles(event, btn) {
event.preventDefault()
searchResultWrapper.innerHTML = data.html
btn.setAttribute('data-months', parseInt(btn.getAttribute('data-months')) + 1)
let searchArticleResultWrapper = document.getElementById('searchArticleResultWrapper');
let url = btn.getAttribute('data-url') + btn.getAttribute('data-page')
const response = await fetch(url, {
method: "GET",
headers: {"X-Requested-With": "XMLHttpRequest"},
})
const data = await response.json()
searchArticleResultWrapper.innerHTML += data.html;
if (btn.getAttribute('data-page') === data.last_page)
btn.hide();
btn.setAttribute('data-page', parseInt(btn.getAttribute('data-page')) + 1)
}
</script>
{% endblock content %}
......@@ -5,10 +5,10 @@
{% include 'main/includes/layout/simple_page_header.html' %}
<main role="main">
<main role="main" class="mb-4 xl:mb-20">
<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">
<p class="font-alt text-xl leading-7 mb-5">
{{ page.perex }}
</p>
</div>
......@@ -21,6 +21,7 @@
v-slot="{ isCurrentView, toggleView }"
>
<div class="flex justify-center mb-12">
<ui-horizontal-scrollable>
<div class="switch">
{% for people_group in page.people %}
<a @click="toggleView('{{ people_group.value.slug }}-{{ forloop.counter }}')" class="switch__item"
......@@ -30,8 +31,9 @@
</a>
{% endfor %}
</div>
</ui-horizontal-scrollable>
</div>
<div class="flex flex-wrap justify-center mb-12">
<div class="flex flex-wrap gap-4 xl:justify-center">
{% for people_group in page.people %}
<template v-if="isCurrentView('{{ people_group.value.slug }}-{{ forloop.counter }}')">
{% for person_page in people_group.value.person_list %}
......
......@@ -50,26 +50,33 @@
</section>
</div>
{% if tweet_list %}
<section class="grid-container no-max">
<section class="grid-container no-max mr-0 person-twitter-section mb-4 xl:mb-20">
<div class="grid-content-with-right-side">
<h2 class="head-4xl text-center xl:text-left">
<h2 class="head-4xl text-left">
Aktuálně na Twitteru
</h2>
<div class="mb-8 flex flex-wrap">
<div class="__js-root twitter-carousel-root">
<ui-twitter-carousel>
{% for tweet in page.tweet_list %}
<div class="md:w-1/3 lg:w-1/4">
<div class="p-4 flex flex-col items-center text-center border border-grey-100">
<img class="rounded-full shadow-sm w-12 mb-2" src="{{ tweet.author_img_url }}"
<div class="w-full flex max-w-xs">
<div class="mb-5 p-4 flex flex-col items-center text-center border border-grey-100 sm:mb-0">
<div class="flex flex-row sm:flex-col items-center">
<img class="rounded-full shadow-sm w-12 h-12 mb-4 sm:mb-2"
src="{{ tweet.author_img_url }}"
alt="user image"/>
<h5 class="font-alt mb-2">{{ tweet.author_name }}</h5>
<div class="flex flex-col sm:flex-col">
<h5 class="font-alt text-xl mb-2 sm:text-base">{{ tweet.author_name }}</h5>
<small class="mb-4 text-turquoise-400">@{{ tweet.author_username }}</small>
<p class="text-base leading-6 mb-2">{{ tweet.text }}</p>
<a href="twitter.com/{{ tweet.author_username }}" class="hover:no-underline">
</div>
</div>
<p class="text-small sm:text-base leading-6 mb-2">{{ tweet.text }}</p>
<a href="twitter.com/{{ tweet.author_username }}" class="hover:no-underline" target="_blank">
<i class="ico--twitter text-turquoise-400 text-xl"></i>
</a>
</div>
</div>
{% endfor %}
</ui-twitter-carousel>
</div>
</div>
</section>
......
......@@ -4,22 +4,23 @@
{% block content %}
{% include 'main/includes/layout/simple_page_header.html' %}
<main role="main">
<main role="main" class="mb-4 xl:mb-20">
<div class="grid-container">
<div class="grid-content">
<p class="font-alt leading-6 mb-12 text-xl">
<p class="font-alt text-xl leading-7 mb-5">
{{ page.perex }}
</p>
</div>
</div>
<div class="container--medium">
<div class="">
<div class="__js-root">
<ui-view-provider
:initial="{ {% for program_group in page.program %}'{{ program_group.value.slug }}-{{ forloop.counter }}':{% if forloop.counter0 %}false{% else %}true{% endif %},{% endfor %} }"
:sync-location="true"
v-slot="{ isCurrentView, toggleView }"
>
<div class="mb-12">
<div class="mb-12 container--medium flex justify-start">
<ui-horizontal-scrollable>
<div class="switch">
{% for program_group in page.program %}
<a @click="toggleView('{{ program_group.value.slug }}-{{ forloop.counter }}')" class="switch__item"
......@@ -28,16 +29,16 @@
</a>
{% endfor %}
</div>
</ui-horizontal-scrollable>
</div>
<div class="mb-12">
{% for program_group in page.program %}
<template v-if="isCurrentView('{{ program_group.value.slug }}-{{ forloop.counter }}')">
{% for item in program_group.value.point_list %}
<div class="flex mb-6">
<div class="grid-container mb-12">
{% image item.icon fill-150x150 as icon %}
<img src="{{ icon.url }}" alt="{{ item.title }}" class="mr-6 text-6xl">
<div class="flex flex-col">
<img src="{{ icon.url }}" alt="{{ item.title }}" class="grid-left-side mr-6 text-6xl xl:justify-self-end">
<div class="grid-content flex flex-col">
<h3 class="font-alt mb-4 text-4xl">
{{ item.title }}
</h3>
......@@ -49,7 +50,6 @@
{% endfor %}
</template>
{% endfor %}
</div>
</ui-view-provider>
</div>
</div>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment