diff --git a/majak_uistyleguide/static/images/background-images/bg-europarl-candidates.webp b/majak_uistyleguide/static/images/background-images/bg-europarl-candidates.webp
new file mode 100644
index 0000000000000000000000000000000000000000..45970952b045a6c29452bdacac05134802a30246
Binary files /dev/null and b/majak_uistyleguide/static/images/background-images/bg-europarl-candidates.webp differ
diff --git a/majak_uistyleguide/static/images/europarl-header.png b/majak_uistyleguide/static/images/europarl-header.png
new file mode 100644
index 0000000000000000000000000000000000000000..fe143d22ed0fcffe8876dfd4b15e70037ea5579e
Binary files /dev/null and b/majak_uistyleguide/static/images/europarl-header.png differ
diff --git a/majak_uistyleguide/static/images/marketka-arrow.png b/majak_uistyleguide/static/images/marketka-arrow.png
new file mode 100644
index 0000000000000000000000000000000000000000..8a4bcac59224de4c398f1dcc09fe080f67c408cb
Binary files /dev/null and b/majak_uistyleguide/static/images/marketka-arrow.png differ
diff --git a/majak_uistyleguide/templates/patterns/molecules/candidates/europarl/candidate_footer_box.html b/majak_uistyleguide/templates/patterns/molecules/candidates/europarl/candidate_footer_box.html
index ce611b51d0af57777a1268c769e51c6193ac2bee..33f58eca5c431297f320629df4ece45ef18c7318 100644
--- a/majak_uistyleguide/templates/patterns/molecules/candidates/europarl/candidate_footer_box.html
+++ b/majak_uistyleguide/templates/patterns/molecules/candidates/europarl/candidate_footer_box.html
@@ -1,6 +1,10 @@
-<div
+<a
+ href="#"
class="
- flex gap-2 min-w-[calc(100vw_-_2.5rem)]
+ flex gap-2 min-w-[calc(100vw_-_2.5rem)] duration-150 group !no-underline
+
+ hover:scale-110
+
lg:min-w-[24rem]
"
>
@@ -10,9 +14,11 @@
>
<div class="flex flex-col justify-end">
- <h3 class="head-4xl">{{ name }}</h3>
- <p class="font-condensed">
+ <h3
+ class="head-4xl group-hover:underline underline-offset-3"
+ >{{ name }}</h3>
+ <p class="font-condensed !no-underline">
{{ position }}
</p>
</div>
-</div>
+</a>
diff --git a/majak_uistyleguide/templates/patterns/molecules/candidates/europarl/candidate_primary_box.html b/majak_uistyleguide/templates/patterns/molecules/candidates/europarl/candidate_primary_box.html
index 1cfc8b3f8c613aa9ddf0e2124d3046d5dd06bf12..3ed76e9cc9f1e232f54c089edc0d5154e2c1ef69 100644
--- a/majak_uistyleguide/templates/patterns/molecules/candidates/europarl/candidate_primary_box.html
+++ b/majak_uistyleguide/templates/patterns/molecules/candidates/europarl/candidate_primary_box.html
@@ -1,48 +1,7 @@
-<li class="candidate-primary-box">
- <div
- class="
- candidate-primary-box--content
-
- container--wide flex gap-8 py-16
- "
- >
- <div
- class="
- candidate-primary-box--text-column
-
- flex flex-col justify-between w-full
- "
- >
- <div class="flex flex-col w-min">
- <h2 class="head-9xl whitespace-nowrap">
- {{ name }}
- </h2>
-
- <p class="font-condensed text-lg mt-[-0.5rem] mb-8">
- {{ position }}
- </p>
-
- <p class="font-condensed text-lg mb-16">
- {{ description }}
- </p>
- </div>
-
- <div class="flex justify-start">
- {% include 'patterns/atoms/buttons/round_button.html' with button_text='Zjisti více' %}
- </div>
- </div>
-
- <div
- class="
- candidate-primary-box--image-column
-
- w-full flex justify-center
- "
- >
- <img
- class="w-1/2"
- src="{{ image_source }}"
- >
- </div>
- </div>
-</li>
+<ui-candidate-primary-box
+ name="{{ name }}"
+ position="{{ position }}"
+ description="{{ description }}"
+ url="{{ url }}"
+ image-source="{{ image_source }}"
+></ui-candidate-primary-box>
diff --git a/majak_uistyleguide/templates/patterns/molecules/candidates/europarl/candidate_secondary_box.html b/majak_uistyleguide/templates/patterns/molecules/candidates/europarl/candidate_secondary_box.html
index 4092e4fe28e83bb1c74d26fb08786dbfe124f3fd..66e97766f1c9e8a71e20c7b2c60c4c9f597c8591 100644
--- a/majak_uistyleguide/templates/patterns/molecules/candidates/europarl/candidate_secondary_box.html
+++ b/majak_uistyleguide/templates/patterns/molecules/candidates/europarl/candidate_secondary_box.html
@@ -1,5 +1,33 @@
<li class="candidate-secondary-box">
- <div class="container--wide py-4">
- <h4 class="text-xl">{{ name }}</h4>
- </div>
+ <a
+ href="#"
+ class="
+ container--wide py-2 flex gap-6 items-center underline-offset-2
+ "
+ >
+ <div class="font-bold text-xl">
+ {{ number }}
+ </div>
+
+ <div
+ class="
+ flex font-bold justify-center items-center rounded-full
+ "
+ >
+ <img
+ class="rounded-full w-12 h-12 object-cover"
+ src="{{ image_source }}"
+ >
+ </div>
+
+ <div class="flex flex-col lg:flex-row">
+ <h4 class="text-xl font-bold">{{ name }}</h4>
+
+ {% if position %}
+ <p><span class="hidden lg:inline">,</span>
+ {{ position }}
+ </p>
+ {% endif %}
+ </div>
+ </a>
</li>
diff --git a/majak_uistyleguide/templates/patterns/molecules/candidates/europarl/candidate_secondary_box.yaml b/majak_uistyleguide/templates/patterns/molecules/candidates/europarl/candidate_secondary_box.yaml
index bddd752d6eb79c5e4706c88843c50ba8050f2a8d..063e289fe914767e29edc0ed2a43e52929d96dcb 100644
--- a/majak_uistyleguide/templates/patterns/molecules/candidates/europarl/candidate_secondary_box.yaml
+++ b/majak_uistyleguide/templates/patterns/molecules/candidates/europarl/candidate_secondary_box.yaml
@@ -1,6 +1,6 @@
context:
number: '1'
name: 'Mikuláš Peksa'
- image_source: '../../../../../static/images/mikulas-arrow.png'
+ image_source: 'https://www.extremnews.com/images/max_image_view-166664f1d580456c9866fa3c20ed545b.jpg'
position: 'Europoslanec'
description: 'Mikuláš Peksa (18. 6. 1986) vystudoval fyziku na Matematicko-fyzikální fakultě Univerzity Karlovy. V Německu pracoval jako správce Linuxových serverů a programátor v C++. Po návratu do Čech byl v roce 2017 zvolen poslancem PSP ČR, následně v roce 2019 poslancem Evropského parlamentu. Věnuje se zejména tématům spojeným s fungováním společnosti v digitálním věku.'
diff --git a/majak_uistyleguide/templates/patterns/molecules/menus/carousel.html b/majak_uistyleguide/templates/patterns/molecules/menus/carousel.html
index 0185c2941a349784de145f4d58b3e663ebf4bd36..73553cc371625b320f028e797075bcc9bef89d19 100644
--- a/majak_uistyleguide/templates/patterns/molecules/menus/carousel.html
+++ b/majak_uistyleguide/templates/patterns/molecules/menus/carousel.html
@@ -2,6 +2,7 @@
<div class="header-carousel">
<div class="h-[700px] xl:h-screen relative">
<img
+ class="header-carousel--image"
src="../../../../../static/images/background-images/bg-flag.webp"
draggable="false"
>
diff --git a/majak_uistyleguide/templates/patterns/molecules/menus/europarl/carousel.html b/majak_uistyleguide/templates/patterns/molecules/menus/europarl/carousel.html
new file mode 100644
index 0000000000000000000000000000000000000000..996359292f507f90988495798c50dbf47768106c
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/molecules/menus/europarl/carousel.html
@@ -0,0 +1,24 @@
+<div class="__js-root">
+ <div class="header-carousel">
+ <div class="h-[700px] xl:h-screen relative bg-white">
+ <img
+ class="header-carousel--image opacity-60"
+ src="../../../../../static/images/background-images/bg-europarl-candidates.webp"
+ draggable="false"
+ >
+
+ <div class="europarl--header-carousel--text-wrapper">
+ <div
+ class="container--wide h-full flex flex-col justify-end items-start"
+ >
+ <div class="2.5xl:ml-[-10rem]">
+ <img
+ class="w-4/5"
+ src="../../../../../static/images/europarl-header.png"
+ >
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+</div>
diff --git a/majak_uistyleguide/templates/patterns/molecules/menus/europarl/carousel.yaml b/majak_uistyleguide/templates/patterns/molecules/menus/europarl/carousel.yaml
new file mode 100644
index 0000000000000000000000000000000000000000..077cd9feff80ff39ac70446715cadf8c8e0976d0
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/molecules/menus/europarl/carousel.yaml
@@ -0,0 +1,3 @@
+context:
+ label_first: 'Jsme jediná strana'
+ label_second: 'bez korupce'
diff --git a/majak_uistyleguide/templates/patterns/molecules/program/card_program.html b/majak_uistyleguide/templates/patterns/molecules/program/card_program.html
new file mode 100644
index 0000000000000000000000000000000000000000..4b0e45e05de1beb54d41b9c50b0f156c97f0bedc
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/molecules/program/card_program.html
@@ -0,0 +1,3 @@
+<div class="__js-root">
+ <ui-card-program :points="{{ program_data }}"></ui-card-program>
+</div>
diff --git a/majak_uistyleguide/templates/patterns/molecules/program/card_program.yaml b/majak_uistyleguide/templates/patterns/molecules/program/card_program.yaml
new file mode 100644
index 0000000000000000000000000000000000000000..f4aeb23387ec445f34daf8e38095e4cfafae31e6
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/molecules/program/card_program.yaml
@@ -0,0 +1,28 @@
+context:
+ header: 'Program'
+ program_data: "[
+ {
+ 'slug': '1',
+ 'number': 1,
+ 'title': 'Boj s korupcí a daňovými ráji',
+ 'content': 'TODO'
+ },
+ {
+ 'slug': '2',
+ 'number': 2,
+ 'title': 'Boj s korupcí a daňovými ráji',
+ 'content': 'TODO'
+ },
+ {
+ 'slug': '3',
+ 'number': 3,
+ 'title': 'Boj s korupcí a daňovými ráji',
+ 'content': 'TODO'
+ },
+ {
+ 'slug': '4',
+ 'number': 4,
+ 'title': 'Boj s korupcí a daňovými ráji',
+ 'content': 'TODO'
+ }
+ ]"
diff --git a/majak_uistyleguide/templates/patterns/organisms/candidates/europarl/candidate_footer_list.html b/majak_uistyleguide/templates/patterns/organisms/candidates/europarl/candidate_footer_list.html
index 4cf72abc7b313e33070fbf9c0af3b721c79f10dd..3944432ddfd68b1c3c26b2552c6928f3e1366b04 100644
--- a/majak_uistyleguide/templates/patterns/organisms/candidates/europarl/candidate_footer_list.html
+++ b/majak_uistyleguide/templates/patterns/organisms/candidates/europarl/candidate_footer_list.html
@@ -18,8 +18,10 @@
<div class="w-full">
<ui-horizontal-scrollable
classes="
- flex gap-8 overflow-x-scroll mt-4 mb-8
- lg:mt-0 lg:grid lg:grid-cols-2
+ flex gap-8 overflow-x-scroll mt-4 mb-8 duration-150 py-5
+
+ lg:mt-0 lg:grid lg:grid-cols-2 lg:overflow-x-hidden
+
xl:grid-cols-3
"
scroller-classes="!text-black"
diff --git a/majak_uistyleguide/templates/patterns/organisms/candidates/europarl/candidate_primary_list.html b/majak_uistyleguide/templates/patterns/organisms/candidates/europarl/candidate_primary_list.html
index 0260c71a7d80b415ee9161d8edf6be1964e2bc3f..c98591757f7aa69052461c7f94d82c235c274944 100644
--- a/majak_uistyleguide/templates/patterns/organisms/candidates/europarl/candidate_primary_list.html
+++ b/majak_uistyleguide/templates/patterns/organisms/candidates/europarl/candidate_primary_list.html
@@ -1,4 +1,4 @@
-<ul class="candidate-primary-list">
+<ul class="candidate-primary-list __js-root">
{% include "patterns/molecules/candidates/europarl/candidate_primary_box.html" %}
{% include "patterns/molecules/candidates/europarl/candidate_primary_box.html" %}
{% include "patterns/molecules/candidates/europarl/candidate_primary_box.html" %}
diff --git a/majak_uistyleguide/templates/patterns/organisms/candidates/europarl/candidate_secondary_list.html b/majak_uistyleguide/templates/patterns/organisms/candidates/europarl/candidate_secondary_list.html
index 8bf277b3c57da321dca9027c44940e662ebcbee8..3e6e6a3cb9b73991e155cfe276c3d1c667f4b3bb 100644
--- a/majak_uistyleguide/templates/patterns/organisms/candidates/europarl/candidate_secondary_list.html
+++ b/majak_uistyleguide/templates/patterns/organisms/candidates/europarl/candidate_secondary_list.html
@@ -1,4 +1,8 @@
-<ul class="candidate-secondary-list">
+<ul class="candidate-secondary-list pt-14 pb-16">
+ <div class="container--wide">
+ <h2 class="head-7xl mb-3">Další kandidáti</h2>
+ </div>
+
{% include "patterns/molecules/candidates/europarl/candidate_secondary_box.html" %}
{% include "patterns/molecules/candidates/europarl/candidate_secondary_box.html" %}
{% include "patterns/molecules/candidates/europarl/candidate_secondary_box.html" %}
diff --git a/majak_uistyleguide/templates/patterns/organisms/faq/faq_answer.html b/majak_uistyleguide/templates/patterns/organisms/faq/faq_answer.html
new file mode 100644
index 0000000000000000000000000000000000000000..e7094b6af809bc04a8d4d11b306660dc4e0a9582
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/organisms/faq/faq_answer.html
@@ -0,0 +1,68 @@
+<div class="faq-answer">
+ <div class="border-y border-black mb-16">
+ <div class="container--wide py-1">
+ {{ section_name }}
+ </div>
+ </div>
+
+ <div class="container--wide !mb-16">
+ <div class="
+ flex gap-16 items-start flex-col-reverse
+
+ lg:flex-row
+
+ faq-answer--content
+ ">
+ <div class="flex flex-col w-full gap-8">
+ {% for question in questions %}
+ <div class="flex flex-col gap-5">
+ <h2 class="text-5xl font-alt">{{ question.title }}</h2>
+
+ <div>
+ <span class="bg-black text-white text-sm px-4 py-1.5">
+ {{ question.tag }}
+ </span>
+ </div>
+
+ <p class="font-condensed text-black leading-7 text-lg">
+ {{ question.answer }}
+ </p>
+ </div>
+ {% endfor %}
+ </div>
+
+ <div
+ class="
+ flex gap-8 w-full items-center
+ faq-answer--person
+ "
+ >
+ <div
+ class="
+ flex flex-col justify-end items-end h-40
+
+ lg:h-96
+
+ faq-answer--person--text
+ "
+ >
+ <div class="font-alt text-5xl whitespace-nowrap leading-10">
+ Odpovídá
+ </div>
+ <div class="head-3xl whitespace-nowrap leading-8">
+ {{ name }}
+ </div>
+ <div class="whitespace-nowrap font-condensed">
+ {{ position }}
+ </div>
+ </div>
+
+ <img
+ class="lg:h-96 h-40"
+ src="{{ image_src }}"
+ >
+ </div>
+ </div>
+ </div>
+</div>
+
diff --git a/majak_uistyleguide/templates/patterns/organisms/faq/faq_answer.yaml b/majak_uistyleguide/templates/patterns/organisms/faq/faq_answer.yaml
new file mode 100644
index 0000000000000000000000000000000000000000..d175fb219f95291f43d2fa7c581d83eae2c8143e
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/organisms/faq/faq_answer.yaml
@@ -0,0 +1,16 @@
+context:
+ section_name: 'Otevřenost a transparentnost'
+
+ questions:
+ -
+ title: 'Jak by měla strana podporovat participativní demokracii a zapojení občanů do politického procesu?'
+ tag: 'téma Markéty Gregorové'
+ answer: 'Zde se věnuje dotačním politikám, ochraně právního státu, digitalizaci a modernizaci ekonomiky s ohledem na udržitelnost a ochranu klimatu. Je členem parlamentních výborů pro průmysl, výzkum a energetiku, dále Hospodářského a měnového výboru, Výboru pro rozpočtovou kontrolu, Zvláštního výboru pro pandemii onemocnění COVID-19) a také podvýboru pro daňové záležitosti. Působí rovněž v delegaci EP pro Ukrajinu a vede zájmové skupiny pro Legalizaci cannabis a skupinu Přátel Tibetu.'
+ -
+ title: 'Jak vnímáte postoj České pirátské strany k ochraně digitálních práv a svobody na internetu?'
+ tag: 'téma Markéty Gregorové'
+ answer: 'Zde se věnuje dotačním politikám, ochraně právního státu, digitalizaci a modernizaci ekonomiky s ohledem na udržitelnost a ochranu klimatu. Je členem parlamentních výborů pro průmysl, výzkum a energetiku, dále Hospodářského a měnového výboru, Výboru pro rozpočtovou kontrolu, Zvláštního výboru pro pandemii onemocnění COVID-19) a také podvýboru pro daňové záležitosti. Působí rovněž v delegaci EP pro Ukrajinu a vede zájmové skupiny pro Legalizaci cannabis a skupinu Přátel Tibetu.'
+
+ image_src: '../../../../../static/images/marketka-arrow.png'
+ name: 'Markéta Gregorová'
+ position: 'Europoslankyně'
diff --git a/majak_uistyleguide/templates/patterns/organisms/header/europarl/candidate_header.html b/majak_uistyleguide/templates/patterns/organisms/header/europarl/candidate_header.html
index 693ee070a263fd0002db756254eeda958aad60d7..f94d3528542a01ecea5603c1062f655aa1375389 100644
--- a/majak_uistyleguide/templates/patterns/organisms/header/europarl/candidate_header.html
+++ b/majak_uistyleguide/templates/patterns/organisms/header/europarl/candidate_header.html
@@ -81,7 +81,7 @@
"
>
<img
- class="w-3/5"
+ class="lg:w-3/5"
src="../../../../../static/images/mikulas-arrow.png"
>
</div>
diff --git a/majak_uistyleguide/templates/patterns/organisms/header/europarl/faq_header.html b/majak_uistyleguide/templates/patterns/organisms/header/europarl/faq_header.html
new file mode 100644
index 0000000000000000000000000000000000000000..4a5adf043d01a7d06b44f760d35b3f61cbb5e9b2
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/organisms/header/europarl/faq_header.html
@@ -0,0 +1,3 @@
+{% extends 'patterns/organisms/header/europarl/simple_header_with_ui_switch.html' %}
+
+{% block extra_classes %}!mb-0{% endblock %}
diff --git a/majak_uistyleguide/templates/patterns/organisms/header/europarl/simple_header.yaml b/majak_uistyleguide/templates/patterns/organisms/header/europarl/simple_header.yaml
new file mode 100644
index 0000000000000000000000000000000000000000..6538a00e27e3ab52d9dd7eae775e317eb0e6b423
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/organisms/header/europarl/simple_header.yaml
@@ -0,0 +1,6 @@
+context:
+ title: 'Stanovisko Pirátů k migraci 2020'
+ description: null
+ sub_heading: 'Podtitulek'
+ has_navigation: false
+ has_tags: false
diff --git a/majak_uistyleguide/templates/patterns/organisms/header/europarl/simple_header_with_ui_switch.html b/majak_uistyleguide/templates/patterns/organisms/header/europarl/simple_header_with_ui_switch.html
new file mode 100644
index 0000000000000000000000000000000000000000..953a73c2ed8fa8af0cee85fb5cd44376adaecb00
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/organisms/header/europarl/simple_header_with_ui_switch.html
@@ -0,0 +1,25 @@
+{% extends 'patterns/organisms/header/europarl/simple_header.html' %}
+
+{% block after_description %}
+ <div
+ class="
+ container--medium flex justify-start !pl-[unset] !pr-[unset] !ml-[unset] !mr-[unset]
+ xl:mb-12 mb-4
+ "
+ >
+ <ui-horizontal-scrollable
+ classes="switch overflow-x-scroll flex gap-2 w-[calc(100vw_-_3rem)] lg:w-[unset]"
+ arrow-position="bottom"
+ >
+ {% block switch %}
+ {% for switch in ui_switch_iterable %}
+ <a
+ @click="toggleView('view{{ forloop.counter }}')"
+ class="switch__item--europarl"
+ :class="{'switch__item--active': isCurrentView('view{{ forloop.counter }}')}"
+ >{{ switch.name }}</a>
+ {% endfor %}
+ {% endblock %}
+ </ui-horizontal-scrollable>
+ </div>
+{% endblock %}
diff --git a/majak_uistyleguide/templates/patterns/organisms/header/europarl/simple_header_with_ui_switch.yaml b/majak_uistyleguide/templates/patterns/organisms/header/europarl/simple_header_with_ui_switch.yaml
new file mode 100644
index 0000000000000000000000000000000000000000..05fc076c37d7f2da2e8be87a0ff4debd989eb1c8
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/organisms/header/europarl/simple_header_with_ui_switch.yaml
@@ -0,0 +1,11 @@
+context:
+ title: 'Ptáte se'
+ ui_switch_iterable:
+ -
+ name: 'téma Markéty Gregorové'
+ -
+ name: 'téma Mikuláše Peksy'
+ -
+ name: 'téma Zuzany Klusové'
+ -
+ name: 'téma Marcela Kolaji'
diff --git a/majak_uistyleguide/templates/patterns/organisms/header/simple_header_with_ui_switch.html b/majak_uistyleguide/templates/patterns/organisms/header/simple_header_with_ui_switch.html
index 3c429927f1918c3f016bf69777a493f412167264..3ba50b3d56a03cae26047568dad73208f6308dc1 100644
--- a/majak_uistyleguide/templates/patterns/organisms/header/simple_header_with_ui_switch.html
+++ b/majak_uistyleguide/templates/patterns/organisms/header/simple_header_with_ui_switch.html
@@ -3,7 +3,7 @@
{% block after_description %}
<div
class="
- container--medium flex justify-start pl-[unset] pr-[unset] ml-[unset] mr-[unset]
+ container--medium flex justify-start !pl-[unset] !pr-[unset] !ml-[unset] !mr-[unset]
xl:mb-12 mb-4
"
>
diff --git a/majak_uistyleguide/templates/patterns/organisms/layout/europarl/navbar.html b/majak_uistyleguide/templates/patterns/organisms/layout/europarl/navbar.html
index 699beaf8a40d4e3eed4fa95e47a9e50bcd64ed6d..3e7e6528074131db189512be74b86a325590695d 100644
--- a/majak_uistyleguide/templates/patterns/organisms/layout/europarl/navbar.html
+++ b/majak_uistyleguide/templates/patterns/organisms/layout/europarl/navbar.html
@@ -7,31 +7,69 @@
{% endblock %}
{% block navbar_menu_button_1 %}
- <a
- href="#"
- class="btn group btn--hoveractive uppercase"
+ <div
+ class="group btn btn--hoveractive uppercase cursor-pointer relative"
>
- <div class="btn__body-wrap group w-24 h-11 min-w-[9rem]">
+ <div class="btn__body-wrap w-24 h-11 min-w-[9rem]">
<div
class="
- navbar__border-button btn__body bg-black border-none text-pirati-yellow border-4 w-24 h-11 py-4 px-6
+ navbar__border-button btn__body border-none border-4 w-24 h-11 py-4 px-6
- group group-hover:bg-grey-500
+ {% if not is_transparent %}
+ !text-pirati-yellow bg-black
+
+ hover:bg-grey-500
+ {% else %}
+ bg-pirati-yellow !text-black hover:bg-yellow-600
+ {% endif %}
xl:w-auto
"
>{{ menu_button_1 }}</div>
</div>
- </a>
+
+ <div
+ class="
+ absolute w-full top-[2.75rem] left-0 opacity-0 duration-150 pointer-events-none
+
+ group group-hover:opacity-100 group-hover:pointer-events-auto
+ "
+ >
+ {% for button in additional_buttons %}
+ <a
+ class="btn__body-wrap hover:no-underline"
+ href="{{ button.url }}"
+ >
+ <div
+ class="
+ btn__body border-none border-4 w-24 h-11 py-4 px-6
+
+ {% if not is_transparent %}
+ !text-pirati-yellow bg-black
+
+ hover:bg-grey-500
+ {% else %}
+ bg-pirati-yellow text-black hover:bg-yellow-600
+ {% endif %}
+
+ xl:w-auto
+ "
+ >{{ button.name }}</div>
+ </a>
+ {% endfor %}
+ </div>
+ </div>
{% endblock %}
{% block popout_menu_button_1 %}
- <a
- href="#"
- class="btn btn--to-yellow--600 group btn--hoveractive uppercase"
- >
- <div class="btn__body-wrap">
- <div class="btn__body px-0 group group-hover:border-yellow-600 border-yellow-500 text-black border-4 bg-transparent w-48 h-11 xl:w-auto py-8">{{ menu_button_1 }}</div>
- </div>
- </a>
+ {% for button in additional_buttons %}
+ <a
+ href="{{ button.url }}"
+ class="btn btn--to-yellow--600 group btn--hoveractive uppercase"
+ >
+ <div class="btn__body-wrap">
+ <div class="btn__body px-0 group group-hover:border-yellow-600 border-yellow-500 text-black border-4 bg-transparent w-48 h-11 xl:w-auto py-8">{{ button.name }}</div>
+ </div>
+ </a>
+ {% endfor %}
{% endblock %}
diff --git a/majak_uistyleguide/templates/patterns/organisms/layout/europarl/navbar.yaml b/majak_uistyleguide/templates/patterns/organisms/layout/europarl/navbar.yaml
index 7df8569f0d8cc4c4b9444c0ea4b19d2522edb885..d731f466086250e0ed4098f082cf0dfacdd83d6f 100644
--- a/majak_uistyleguide/templates/patterns/organisms/layout/europarl/navbar.yaml
+++ b/majak_uistyleguide/templates/patterns/organisms/layout/europarl/navbar.yaml
@@ -1,6 +1,18 @@
context:
menu_button_1: 'Zapojte se'
menu_button_2: null
+
+ additional_buttons:
+ -
+ name: 'Nalodění'
+ url: '#'
+ -
+ name: 'Dary'
+ url: '#'
+ -
+ name: 'E-shop'
+ url: '#'
+
has_background: false
menu_items:
@@ -8,6 +20,7 @@ context:
- Priority pro Evropu
- Aktuality
- Naši europoslanci
+ - Ptáte se
- Kontakty
important_item: null
diff --git a/majak_uistyleguide/templates/patterns/templates/europarl/faq/faq.html b/majak_uistyleguide/templates/patterns/templates/europarl/faq/faq.html
new file mode 100644
index 0000000000000000000000000000000000000000..e03373b8c0e5c41e981327a4410d1eb76d29e1a2
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/templates/europarl/faq/faq.html
@@ -0,0 +1,22 @@
+{% include 'patterns/organisms/layout/europarl/navbar.html' with selected_item='Ptáte se' %}
+
+<div class="__js-root">
+ <ui-view-provider
+ :initial="{view1: true, view2: false, view3: false, view4: false}" :sync-location="true"
+ v-slot="{ isCurrentView, toggleView }"
+ >
+ {% include 'patterns/organisms/header/europarl/faq_header.html' %}
+
+ <main role="main" class="mb-10 xl:mb-32">
+ <div class="flex flex-col">
+ {% include 'patterns/organisms/faq/faq_answer.html' %}
+ {% include 'patterns/organisms/faq/faq_answer.html' %}
+ {% include 'patterns/organisms/faq/faq_answer.html' %}
+ {% include 'patterns/organisms/faq/faq_answer.html' %}
+ </div>
+ </main>
+ </ui-view-provider>
+</div>
+
+{% include 'patterns/organisms/main_section/newsletter_section.html' %}
+{% include 'patterns/organisms/layout/footer.html' %}
diff --git a/majak_uistyleguide/templates/patterns/templates/europarl/faq/faq.yaml b/majak_uistyleguide/templates/patterns/templates/europarl/faq/faq.yaml
new file mode 100644
index 0000000000000000000000000000000000000000..14519d3f343461d3c8c20b8b72631a49cb7feab5
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/templates/europarl/faq/faq.yaml
@@ -0,0 +1,3 @@
+context:
+ how_we_works_topic_1: 'Poslanecká sněmovna'
+ how_we_works_topic_2: 'Vláda'
diff --git a/majak_uistyleguide/templates/patterns/templates/europarl/homepage/homepage.html b/majak_uistyleguide/templates/patterns/templates/europarl/homepage/homepage.html
new file mode 100644
index 0000000000000000000000000000000000000000..d1c41a38c64e7a75c2838d793251aa848a9e643e
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/templates/europarl/homepage/homepage.html
@@ -0,0 +1,13 @@
+{% if has_message %}
+ {% include 'patterns/molecules/blocks/message_block.html' with is_last_child=True %}
+{% endif %}
+
+{% include 'patterns/organisms/layout/europarl/navbar.html' with is_transparent=True %}
+
+<main role="main">
+ {% include 'patterns/molecules/menus/europarl/carousel.html' %}
+ {% include 'patterns/organisms/candidates/europarl/candidate_primary_list.html' %}
+ {% include 'patterns/molecules/program/card_program.html' %}
+</main>
+
+{% include 'patterns/organisms/layout/footer.html' %}
diff --git a/majak_uistyleguide/templates/patterns/templates/europarl/homepage/homepage.yaml b/majak_uistyleguide/templates/patterns/templates/europarl/homepage/homepage.yaml
new file mode 100644
index 0000000000000000000000000000000000000000..250bb7bf60fcc109bad7b61040a1d3e909b06803
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/templates/europarl/homepage/homepage.yaml
@@ -0,0 +1,2 @@
+context:
+ has_message: false
diff --git a/package.json b/package.json
index 592853c1624b81f8e85ff190ec85c22f4e92810b..82523acc5e49b83f3437ff65d12543ece7b34ed0 100644
--- a/package.json
+++ b/package.json
@@ -22,8 +22,8 @@
"autoprefixer": "^10.4.8",
"color": "^3.1.2",
"lodash": "^4.17.15",
- "postcss-import": "^12.0.1",
- "postcss-nested": "^4.2.1",
+ "postcss-import": "^15.1.0",
+ "postcss-nested": "^6.0.1",
"postcss-nesting": "^10.2.0",
"tailwind-css-variables": "^2.0.3",
"tailwindcss": "^3.1.8",
diff --git a/src/css/molecules/candidate_list.pcss b/src/css/molecules/candidate_list.pcss
index 4ecf404307bd254f9b5d77fd065706a3929a2f8e..2ec2d9eebb37f4d64210f15ebfcb98451fd5a79d 100644
--- a/src/css/molecules/candidate_list.pcss
+++ b/src/css/molecules/candidate_list.pcss
@@ -1,8 +1,4 @@
.candidate-secondary-box {
- &:nth-child(even) {
- @apply bg-pirati-yellow;
- }
-
&:nth-child(odd) {
@apply bg-grey-180;
}
@@ -14,11 +10,19 @@
@apply bg-pirati-yellow;
.candidate-primary-box--content {
- @apply flex-row
+ @apply flex-col-reverse lg:flex-row
}
.candidate-primary-box--text-column {
- @apply items-end
+ @apply lg:items-end
+ }
+
+ .candidate-primary-box--text-column__hidden {
+ @apply -translate-x-[100vw]
+ }
+
+ .candidate-primary-box--image-column__hidden {
+ @apply translate-x-[100vw]
}
}
@@ -26,11 +30,19 @@
@apply bg-grey-180;
.candidate-primary-box--content {
- @apply flex-row-reverse
+ @apply flex-col-reverse lg:flex-row-reverse
}
.candidate-primary-box--text-column {
@apply items-start
}
+
+ .candidate-primary-box--text-column__hidden {
+ @apply translate-x-[100vw]
+ }
+
+ .candidate-primary-box--image-column__hidden {
+ @apply -translate-x-[100vw]
+ }
}
}
diff --git a/src/css/molecules/carousels.pcss b/src/css/molecules/carousels.pcss
index a18a8a0e760d56e556a70dba5bf4817099726561..e442c22b6eace46ab9250464f249e1fd17dbe74f 100644
--- a/src/css/molecules/carousels.pcss
+++ b/src/css/molecules/carousels.pcss
@@ -3,12 +3,15 @@
margin: 0 auto;
position: relative;
+
+ .header-carousel--text-wrapper, .europarl--header-carousel--text-wrapper {
+ @apply font-alt text-5xl uppercase w-screen absolute lg:text-7xl
+ }
+
+
.header-carousel--text-wrapper {
- @apply font-alt text-5xl uppercase lg:text-7xl;
- position: absolute;
bottom: 45%;
height: 85%;
- width: 100vw;
@screen xl {
bottom: 33%;
@@ -16,7 +19,17 @@
}
- img {
+ .europarl--header-carousel--text-wrapper {
+ bottom: 45%;
+ height: 85%;
+
+ @screen xl {
+ bottom: 10%;
+ }
+ }
+
+
+.header-carousel--image {
bottom: 0;
left: 0;
right: 0;
diff --git a/src/css/molecules/switch.pcss b/src/css/molecules/switch.pcss
index ff2044611c533af290e39b20f27a9a8d874df38f..5ecea538f86c00f33296e6941463b94e93cb1d9f 100644
--- a/src/css/molecules/switch.pcss
+++ b/src/css/molecules/switch.pcss
@@ -2,12 +2,16 @@
@apply py-5 mx-auto;
}
-.switch__item {
- @apply whitespace-nowrap bg-yellow-500 cursor-pointer px-5 py-2 mb-2 font-normal text-black text-center;
+.switch__item, .switch__item--europarl {
+ @apply whitespace-nowrap cursor-pointer px-5 py-2 mb-2 font-normal text-center duration-200;
&:not(:last-child) {
@apply mr-2;
}
+}
+
+.switch__item {
+ @apply bg-yellow-500 text-black;
&:hover {
@apply no-underline bg-yellow-600;
@@ -19,6 +23,22 @@
}
}
+
+.switch__item--europarl {
+ @apply bg-black text-white;
+
+ &:hover {
+ @apply no-underline bg-grey-600;
+ }
+
+ &.switch__item--active,
+ &.switch__item--active:hover {
+ @apply bg-grey-350;
+ }
+}
+
+
+
@responsive {
@screen xl {
diff --git a/src/css/organisms/faq.pcss b/src/css/organisms/faq.pcss
new file mode 100644
index 0000000000000000000000000000000000000000..fe356a08870e8e5408edaea62ba3375bd22e049d
--- /dev/null
+++ b/src/css/organisms/faq.pcss
@@ -0,0 +1,29 @@
+.faq-answer:nth-child(even) {
+ .faq-answer--content {
+ @apply lg:flex-row-reverse;
+ }
+
+ .faq-answer--person {
+ @apply lg:flex-row-reverse;
+ }
+
+ .faq-answer--person--text {
+ @apply lg:ml-[-5rem]
+ }
+}
+
+@responsive {
+ .faq-answer {
+ .faq-answer--person {
+ @apply flex-row-reverse;
+ }
+
+ @screen lg {
+ &:nth-child(odd) {
+ .faq-answer--person {
+ @apply flex-row;
+ }
+ }
+ }
+ }
+}
diff --git a/src/css/organisms/navbar.pcss b/src/css/organisms/navbar.pcss
index 4d9d349a272ea94b920afce40ef7fd1b8ba89c7b..00bf94576490887b70e8ddf41f25e99a61d07878 100644
--- a/src/css/organisms/navbar.pcss
+++ b/src/css/organisms/navbar.pcss
@@ -30,6 +30,10 @@
.bar1, .bar2, .bar3 {
@apply bg-black
}
+
+ &.navbar--europarl-transparent {
+ @apply bg-transparent;
+ }
}
diff --git a/src/css/style.pcss b/src/css/style.pcss
index 8f936ff0d80badf1a5186380fe886aaf78537315..aacc25a0089d22d44c2fbdcf18e69d5e151fa273 100644
--- a/src/css/style.pcss
+++ b/src/css/style.pcss
@@ -39,6 +39,7 @@
@import "organisms/navbar.pcss";
@import "organisms/newsletter.pcss";
@import "organisms/region-map.pcss";
+@import "organisms/faq.pcss";
/**
diff --git a/src/js/components/CandidatePrimaryBox.vue b/src/js/components/CandidatePrimaryBox.vue
new file mode 100644
index 0000000000000000000000000000000000000000..5bcc33f8bdbca51c1497364e07128292a3344aca
--- /dev/null
+++ b/src/js/components/CandidatePrimaryBox.vue
@@ -0,0 +1,108 @@
+<template>
+ <li class="candidate-primary-box" ref="candidateBox">
+ <div
+ class="
+ candidate-primary-box--content
+
+ container--wide flex gap-10 pt-16 pb-8
+
+ lg:flex-row lg:gap-8 lg:py-16
+ "
+ >
+ <div
+ class="
+ candidate-primary-box--text-column
+ candidate-primary-box--text-column__hidden
+
+ flex flex-col justify-between w-full duration-700
+ "
+ ref="text"
+ >
+ <div class="flex flex-col lg:w-min">
+ <h2 class="head-9xl whitespace-nowrap">
+ {{ name }}
+ </h2>
+
+ <p class="font-condensed text-lg mt-[-0.5rem] mb-8">
+ {{ position }}
+ </p>
+
+ <p class="font-condensed text-lg mb-8 lg:mb-16">
+ {{ description }}
+ </p>
+ </div>
+
+ <div class="flex justify-start">
+ <a
+ :href="url"
+ class="
+ flex items-center group rounded-full font-condensed uppercase font-semibold tracking-normal bg-black text-white pl-8 pr-3 py-3
+
+ hover:no-underline
+
+ xl:text-lg xl:pl-8 xl:pr-3 xl:py-4
+ "
+ >
+ <span class="group-hover:-translate-x-2 duration-200">Zjisti více</span>
+
+ <span class="opacity-0 group-hover:opacity-100 duration-200 mb-[0.03rem]">
+ <svg width="20" height="21" viewBox="0 0 10 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <g>
+ <path
+ d="M0 16.5H4.40178L11 10.0002L4.40228 3.5H0L6.60069 10.0002L0 16.5Z"
+ fill="#FEC900"
+ class="arrow-icon"
+ />
+ </g>
+ </svg>
+ </span>
+ </a>
+ </div>
+ </div>
+
+ <div
+ class="
+ candidate-primary-box--image-column
+ candidate-primary-box--image-column__hidden
+
+ w-full flex justify-center duration-700
+ "
+ ref="image"
+ >
+ <img
+ class="lg:w-1/2"
+ :src="imageSource"
+ >
+ </div>
+ </div>
+ </li>
+</template>
+
+<script>
+export default {
+ name: "CandidatePrimaryBox",
+ props: ["name", "position", "description", "url", "imageSource"],
+ mounted () {
+ var intersectionOptions = {
+ rootMargin: '0px',
+ threshold: 0.25
+ }
+
+ const textRef = this.$refs.text
+ const imageRef = this.$refs.image
+
+ function intersectionCallback(entries, observer) {
+ entries.forEach(entry => {
+ if (entry.intersectionRatio >= 0.25) {
+ textRef.classList.remove("candidate-primary-box--text-column__hidden")
+ imageRef.classList.remove("candidate-primary-box--image-column__hidden")
+ }
+ })
+ }
+
+ var observer = new IntersectionObserver(intersectionCallback, intersectionOptions);
+
+ observer.observe(this.$refs.candidateBox);
+ }
+}
+</script>
diff --git a/src/js/components/card_program/CardProgram.vue b/src/js/components/card_program/CardProgram.vue
new file mode 100644
index 0000000000000000000000000000000000000000..90b6590396e2f6952c2b44cee7fa6699dad1cf59
--- /dev/null
+++ b/src/js/components/card_program/CardProgram.vue
@@ -0,0 +1,39 @@
+<script setup>
+ import CardProgramItem from "./CardProgramItem"
+</script>
+
+<template>
+ <div class="bg-pirati-yellow py-16">
+ <div class="container--wide">
+ <h2 class="head-14xl head-compact mb-8">Program</h2>
+
+ <ul
+ class="
+ flex gap-3 w-full flex-col
+
+ lg:flex-row
+ "
+ >
+ <CardProgramItem
+ v-for="(point, index) in points"
+ :key="point.slug"
+ :slug="point.slug"
+ :defaultIsOpen="index === 0"
+ :number="point.number"
+ :title="point.title"
+ :content="point.content"
+ />
+ </ul>
+ </div>
+ </div>
+</template>
+
+<script>
+export default {
+ name: "CardProgram",
+ props: ["points"],
+ mounted () {
+ console.log(this.points)
+ }
+}
+</script>
diff --git a/src/js/components/card_program/CardProgramItem.vue b/src/js/components/card_program/CardProgramItem.vue
new file mode 100644
index 0000000000000000000000000000000000000000..42747294b9730c4ba8ed4ecca8a1e88f98c7b6b1
--- /dev/null
+++ b/src/js/components/card_program/CardProgramItem.vue
@@ -0,0 +1,145 @@
+<script setup>
+ import { isLgScreenSize } from "../../utils"
+</script>
+
+<template>
+ <li
+ :class="this.isOpen ? 'w-full': ''"
+ >
+ <div
+ ref="closedVariant"
+ class="
+ bg-black flex flex-row items-center px-5 py-2 gap-5 justify-between duration-200 cursor-pointer
+
+ lg:flex-col lg:gap-32 lg:py-8 lg:px-3
+
+ hover:bg-grey-600
+ "
+ v-if="!this.isOpen"
+ @click="openClose"
+ >
+ <div
+ class="font-alt text-black text-9xl"
+ style="text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff"
+ >
+ {{ number }}
+ </div>
+ <div
+ class="
+ text-white text-2xl
+
+ lg:rotate-180 lg:[writing-mode:vertical-rl]
+ "
+ >
+ {{ title }}
+ </div>
+ </div>
+
+ <div
+ ref="openVariant"
+ class="bg-white h-full"
+ :class="!this.defaultIsOpen ? 'w-0 text-[0rem]' : 'p-8'"
+ >
+ fdsfsdf
+ </div>
+ </li>
+</template>
+
+<script>
+export default {
+ name: "CardProgram",
+ props: ["slug", "title", "number", "content", "defaultIsOpen"],
+ data () {
+ return {
+ isOpen: this.defaultIsOpen
+ }
+ },
+ methods: {
+ openClose: function () {
+ this.isOpen = !this.isOpen
+
+ if (this.isOpen) {
+ // So other items close when this one is opened
+ let urlParams = new URLSearchParams(window.location.search)
+ let url = new URL(window.location)
+
+ urlParams.set("program_view", this.slug)
+ url.search = urlParams
+
+ window.history.replaceState(
+ {},
+ this.slug,
+ url
+ )
+ }
+ }
+ },
+ mounted () {
+ this.$watch(
+ "isOpen",
+ (isNowOpen, wasOpen) => {
+ if (isNowOpen && !wasOpen) {
+ this.$refs.openVariant.classList.remove("w-0")
+ this.$refs.openVariant.classList.remove("text-[0rem]")
+
+ if (isLgScreenSize()) {
+ this.$refs.openVariant.classList.add("duration-300")
+ }
+
+ this.$refs.openVariant.classList.add("w-full")
+ this.$refs.openVariant.classList.add("p-8")
+ } else if (!isNowOpen && wasOpen) {
+ if (isLgScreenSize()) {
+ this.$refs.openVariant.classList.remove("duration-300")
+ }
+
+ this.$refs.openVariant.classList.remove("w-full")
+ this.$refs.openVariant.classList.remove("p-8")
+
+ this.$refs.openVariant.classList.add("w-0")
+ this.$refs.openVariant.classList.add("text-[0rem]")
+ }
+ }
+ )
+
+ // --- BEGIN URL watch ---
+
+ let previousUrl = null;
+
+ setInterval(
+ () => {
+ const currentUrl = window.location.href;
+
+ if (currentUrl != previousUrl) {
+ // URL changed
+ previousUrl = currentUrl;
+
+ const params = new Proxy(
+ new URLSearchParams(window.location.search), {
+ get: (searchParams, prop) => searchParams.get(prop),
+ }
+ )
+
+ if (
+ params.program_view !== null
+ && params.program_view !== this.slug
+ ) {
+ this.isOpen = false
+ }
+
+ if (
+ params.program_view !== null
+ && params.program_view === this.slug
+ && !this.isOpen
+ ) {
+ this.isOpen = true
+ }
+ }
+ },
+ 10
+ )
+
+ // --- END URL watch ---
+ }
+}
+</script>
diff --git a/src/js/main.js b/src/js/main.js
index d9c6658f796517ec714b749fc49f7a551b53eb58..b42672bdf536e1a079a61b3a5240449d727dcd5e 100644
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -16,6 +16,8 @@ import PopoutItem from "./components/popout/PopoutItem";
import Navbar from "./components/navbar/Navbar";
import FooterCollapsible from "./components/footer/FooterCollapsible";
import HorizontalScrollable from "./components/HorizontalScrollable";
+import CardProgram from "./components/card_program/CardProgram"
+import CandidatePrimaryBox from "./components/CandidatePrimaryBox";
import SlideUpDown from 'vue-slide-up-down';
@@ -33,7 +35,8 @@ Vue.component("ui-popout-item", PopoutItem);
Vue.component("ui-navbar", Navbar);
Vue.component("ui-footer-collapsible", FooterCollapsible);
Vue.component("ui-horizontal-scrollable", HorizontalScrollable);
-
+Vue.component("ui-candidate-primary-box", CandidatePrimaryBox);
+Vue.component("ui-card-program", CardProgram);
Vue.component("ui-slide-up-down", SlideUpDown);
diff --git a/tailwind.config.js b/tailwind.config.js
index 2b1cc4409df43fb2319ba1a638b96475661bff60..ef437d2c73e56985c8963ae9ecb268eab69942d8 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -35,6 +35,7 @@ module.exports = {
'lg': '992px',
'xl': '1200px',
'2xl': '1366px',
+ '2.5xl': '1600px',
'3xl': '2060px',
},
fontFamily: {