Skip to content
Snippets Groups Projects
Commit b6fe78ca authored by Tomáš Valenta's avatar Tomáš Valenta
Browse files

people, program, cards, etc.

parent 32638db5
No related branches found
No related tags found
1 merge request!22Feat/redesign
Showing
with 169 additions and 153 deletions
<div class="__js-root"> <div class="__js-root">
<ui-person-calendar events='{{ calendar_data }}'></ui-person-calendar> <ui-full-calendar events='{{ calendar_data }}'></ui-full-calendar>
</div> </div>
...@@ -5,7 +5,11 @@ ...@@ -5,7 +5,11 @@
⎯⎯ ⎯⎯
<a href="#" class="underline"> {% if second_link %}
<a href="{{ second_link }}" class="underline">
{{ second_text }} {{ second_text }}
</a> </a>
{% else %}
<span>{{ second_text }}</span>
{% endif %}
</div> </div>
context: context:
first_text: 'Program' first_text: 'Program'
second_text: 'Stanoviska' second_text: 'Stanoviska'
second_link: 'https://example.com'
<div class="flex flex-col max-w-xl mb-8 bg-grey-100 drop-shadow-lg {{ classes }}"> <div class="flex flex-col max-w-xl mb-8 bg-grey-180 drop-shadow {{ classes }}">
<a href="#"> <a href="#">
<img <img
src="../../../../static/images/person-table.png" alt="" src="../../../../static/images/person-table.png" alt=""
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
{{ work_article_date }} {{ work_article_date }}
</div> </div>
<a href="#" class="mb-2"> <a href="#" class="mb-2 underline-offset-4">
<h2 class="head-3xl">{{ work_article_title }}</h2> <h2 class="head-3xl">{{ work_article_title }}</h2>
</a> </a>
......
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
<div class="flex flex-col mt-3 gap-3 justify-between mt-auto"> <div class="flex flex-col mt-3 gap-3 justify-between mt-auto">
<h2 class="font-alt text-4xl"> <h2 class="font-alt text-4xl">
<a href="#" class="hover:no-underline"> <a href="#" class="underline-offset-4">
{{ header }} {{ header }}
</a> </a>
</h2> </h2>
......
<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="flex gap-8 flex-col xl:flex-row grow bg-grey-180">
<div class="xl:shrink-0"> <div class="xl:shrink-0">
<a href="#"> <a href="#">
<img <img
class="rounded-full shadow-sm w-30 xl:w-60" class="h-full w-30 xl:w-60 object-cover"
src="../../../../static/images/person-table.png" src="../../../../static/images/person-table.png"
alt=" {{ name }}" alt=" {{ name }}"
> >
</a> </a>
</div> </div>
<div class="flex flex-col justify-between py-4"> <div>
<div class="flex flex-col mb-8"> <div class="flex flex-col justify-between py-4 pr-4 h-full">
<div class="flex flex-col">
<a <a
class="hover:no-underline block font-bold mb-2 text-2xl xl:text-4xl" class="hover:no-underline block font-bold mb-2 text-xl xl:text-3xl"
href="#" href="#"
><h4>{{ person_big_name }}</h4></a> ><h4>{{ person_big_name }}</h4></a>
<span class="leading-6 mb-4 xl:mb-6 w-10/12"> <span class="leading-6 mb-4 xl:mb-6 w-10/12">
{{ person_big_function }} {{ person_big_function }}
</span> </span>
</div>
<div class="flex flex-col">
<a <a
class="font-bold mb-2 text-grey-300" class="font-bold mb-2"
href="tel:{{ person_big_telephone }}" href="tel:{{ person_big_telephone }}"
>{{ person_big_telephone }}</a> >{{ person_big_telephone }}</a>
<a <a
class="text-turquoise-500" class="font-bold"
href="mailto:{{ person_big_mail }}" href="mailto:{{ person_big_mail }}"
>{{ person_big_mail }}</a> >{{ person_big_mail }}</a>
<div class="flex mt-5">
{% include 'patterns/atoms/buttons/round_button_small.html' with button_text='Zjisti více' %}
</div>
</div> </div>
<div>
{% include 'patterns/atoms/buttons/href_button.html' with btn_text='Detail' %}
</div> </div>
</div> </div>
</div> </div>
{% extends 'patterns/organisms/header/simple_header_with_ui_switch.html' %}
{% block special_classes %}xl:pt-48 xl:pb-32 xl:h-[47.5rem]{% endblock %}
{% block description %}
<div class="grid grid-cols-2 gap-4 py-4 font-bold">
<p>
{{ description_column_1|safe }}
</p>
<p>
{{ description_column_2|safe }}
</p>
</div>
{% endblock %}
{% block switch %}
<a @click="toggleView('candidates')" class="switch__item"
:class="{'switch__item--active': isCurrentView('candidates')}">{{ people_choice_1 }}</a>
<a @click="toggleView('program')" class="switch__item"
:class="{'switch__item--active': isCurrentView('program')}">{{ people_choice_2 }}</a>
<a @click="toggleView('other1')" class="switch__item"
:class="{'switch__item--active': isCurrentView('other1')}">{{ people_choice_3 }}</a>
<a @click="toggleView('other2')" class="switch__item"
:class="{'switch__item--active': isCurrentView('other2')}">{{ people_choice_4 }}</a>
<a @click="toggleView('teams')" class="switch__item"
:class="{'switch__item--active': isCurrentView('teams')}">{{ people_choice_5 }}</a>
{% endblock %}
context:
simple_header_title: 'Lidé'
description_column_1: 'Pirátská strana vznikla v České republice v roce 2009. Impulsem bylo odsouzení provozovatelů švédské internetové stránky The Pirate Bay. Soudní kauza vzbudila celosvětovou diskusi o reformě autorského práva. Požadavek na reformu práva pro realitu 21. století se stal prvním politickým cílem Pirátů.
<br>
<br>
Následovala řada dalších témat, která se stala součástí politického programu Pirátů: upozornili na řadu korupčních skandálů, prosadili zveřejňování materiálů ze zastupitelstvech a odmítli omezování svobod v reálném i online prostoru.'
description_column_2: 'Piráti dnes vystupují ve všech patrech politiky a pokrývají veškerá politická a společenská témata. Jsou stranou liberálního středu, kladou důraz na diskusi, transparentnost a rozhodování na základě dat a informací. Piráti zastupují občany ČR na všech úrovních politiky. Na komunální úrovni působí od roku 2014, v krajských zastupitelstvech od roku 2016. Ve druhém volebním období působí v Poslanecké sněmovně a od roku 2018 hájí Piráti ČR v Evropském parlamentu. Piráti mají aktuálně 1205 členů.'
people_choice_1: 'Poslanecká sněmovna'
people_choice_2: 'Vláda'
people_choice_3: 'Jiná skupina'
people_choice_4: 'Jiná skupina dvě'
people_choice_5: 'Týmy'
<header <header
class="bg-black flex items-center simple-header-height py-32 mb-20 w-full" class="bg-black flex items-center py-32 mb-20 w-full {% block special_classes %}simple-header-height{% endblock %}"
> >
<div class="grid-container pt-20"> <div class="grid-container pt-20">
<div class="grid-left-side-with-content header-max-width pt-20 sm:pt-0"> <div class="grid-left-side-with-content header-max-width pt-20 sm:pt-0">
...@@ -12,11 +12,13 @@ ...@@ -12,11 +12,13 @@
{% block after_heading %}{% endblock %} {% block after_heading %}{% endblock %}
{% block description %}
{% if description %} {% if description %}
<p class="font-semibold text-lg leading-7"> <p class="font-semibold text-lg leading-7">
{{ description }} {{ description }}
</p> </p>
{% endif %} {% endif %}
{% endblock %}
{% block after_description %}{% endblock %} {% block after_description %}{% endblock %}
</div> </div>
......
...@@ -4,6 +4,7 @@ ...@@ -4,6 +4,7 @@
<div class="mb-12 container--medium flex justify-start"> <div class="mb-12 container--medium flex justify-start">
<ui-horizontal-scrollable> <ui-horizontal-scrollable>
<div class="switch"> <div class="switch">
{% block switch %}
{% for switch in ui_switch_iterable %} {% for switch in ui_switch_iterable %}
<a <a
@click="toggleView('view{{ forloop.counter }}')" @click="toggleView('view{{ forloop.counter }}')"
...@@ -11,6 +12,7 @@ ...@@ -11,6 +12,7 @@
:class="{'switch__item--active': isCurrentView('view{{ forloop.counter }}')}" :class="{'switch__item--active': isCurrentView('view{{ forloop.counter }}')}"
>{{ switch.name }}</a> >{{ switch.name }}</a>
{% endfor %} {% endfor %}
{% endblock %}
</div> </div>
</ui-horizontal-scrollable> </ui-horizontal-scrollable>
</div> </div>
......
...@@ -19,8 +19,6 @@ ...@@ -19,8 +19,6 @@
</div> </div>
</div> </div>
</div> </div>
{% include 'patterns/organisms/articles/main_articles_article_list.html' with main_articles_name=none %}
</div> </div>
</main> </main>
{% include 'patterns/organisms/main_section/newsletter_section.html' %}
{% include 'patterns/organisms/layout/footer.html' %} {% include 'patterns/organisms/layout/footer.html' %}
{% include 'patterns/organisms/layout/navbar.html' %} {% include 'patterns/organisms/layout/navbar.html' %}
{% include 'patterns/organisms/header/simple_header.html' with simple_header_title='Lidé v pirátské straně' %}
<div class="__js-root">
<ui-view-provider
:initial="{candidates: true, program: false, other1: false, other2: false}" :sync-location="true"
v-slot="{ isCurrentView, toggleView }"
>
{% include 'patterns/organisms/header/people_header.html' %}
<main role="main" class="mb-4 xl:mb-20"> <main role="main" class="mb-4 xl:mb-20">
<div class="grid-container"> <div class="grid-container">
<div class="grid-content"> <div class="flex flex-wrap gap-4 grid-full">
<div class="prose max-w-none font-condensed text-xl text-black leading-7 mb-12 program-perex"> <template v-if="!isCurrentView('teams')">
{# BEGIN Cast generovana Majakem #}<div class="content-block"> <div class="grid grid-cols-1 xl:grid-cols-2 gap-4">
<p>
{{ people_text }}
</p>
</div>{# END Cast generovana Majakem #}
</div>
</div>
</div>
<div class="container--medium">
<div class="__js-root">
<ui-view-provider :initial="{candidates: true, program: false, other1: false, other2: false}" :sync-location="true"
v-slot="{ isCurrentView, toggleView }">
<div class="flex justify-center mb-12">
<ui-horizontal-scrollable>
<div class="switch">
<a @click="toggleView('candidates')" class="switch__item"
:class="{'switch__item--active': isCurrentView('candidates')}">{{ people_choice_1 }}</a>
<a @click="toggleView('program')" class="switch__item"
:class="{'switch__item--active': isCurrentView('program')}">{{ people_choice_2 }}</a>
<a @click="toggleView('other1')" class="switch__item"
:class="{'switch__item--active': isCurrentView('other1')}">{{ people_choice_3 }}</a>
<a @click="toggleView('other2')" class="switch__item"
:class="{'switch__item--active': isCurrentView('other2')}">{{ people_choice_4 }}</a>
<a @click="toggleView('teams')" class="switch__item"
:class="{'switch__item--active': isCurrentView('teams')}">{{ people_choice_5 }}</a>
</div>
</ui-horizontal-scrollable>
</div>
<div class="flex flex-wrap gap-4">
<template v-if="isCurrentView('candidates')"> <template v-if="isCurrentView('candidates')">
{% for content in people_candidates %} {% for content in people_candidates %}
{% include 'patterns/molecules/contact/contact_person_large_box.html' with person_big_name=content.name person_big_function=content.function %} {% include 'patterns/molecules/contact/contact_person_large_box.html' with person_big_name=content.name person_big_function=content.function %}
...@@ -53,18 +32,21 @@ ...@@ -53,18 +32,21 @@
{% include 'patterns/molecules/contact/contact_person_large_box.html' with person_big_name=content.name person_big_function=content.function %} {% include 'patterns/molecules/contact/contact_person_large_box.html' with person_big_name=content.name person_big_function=content.function %}
{% endfor %} {% endfor %}
</template> </template>
</div>
</template>
<template v-if="isCurrentView('teams')"> <template v-if="isCurrentView('teams')">
{% for section in teams_sections %} {% for section in teams_sections %}
{% if section.header %} {% if section.header %}
<h2 class="head-4xl mt-5 mb-5">{{ section.header }}</h2> <h2 class="head-6xl mt-5 mb-5">{{ section.header }}</h2>
{% endif %} {% endif %}
{% include 'patterns/organisms/cards/card_list.html' with cards=section.cards %} {% include 'patterns/organisms/cards/card_list.html' with cards=section.cards description_classes="!bg-grey-180" %}
{% endfor %} {% endfor %}
</template> </template>
</div> </div>
</ui-view-provider>
</div>
</div> </div>
</main> </main>
</ui-view-provider>
</div>
{% include 'patterns/organisms/main_section/newsletter_section.html' %} {% include 'patterns/organisms/main_section/newsletter_section.html' %}
{% include 'patterns/organisms/layout/footer.html' %} {% include 'patterns/organisms/layout/footer.html' %}
context: context:
people_text: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ante orci, molestie vitae vehicula
venenatis, tincidunt ac pede. Mauris suscipit, ligula sit amet pharetra semper, nibh ante cursus purus,
vel sagittis velit mauris vel metus.'
people_choice_1: 'Poslanecká sněmovna'
people_choice_2: 'Vláda'
people_choice_3: 'Jiná skupina'
people_choice_4: 'Jiná skupina dvě'
people_choice_5: 'Týmy'
people_candidates: people_candidates:
- name: 'Ivan Bartoš' -
function: 'předseda Pirátů, poslanec PSP ČR za Ústecký kraj, ministr, vicepremiér' name: 'Ivan Bartoš'
function: 'Poslanec PSP ČR za Ústecký kraj'
-
name: 'Ivan Bartoš'
function: 'Poslanec PSP ČR za Ústecký kraj'
-
name: 'Ivan Bartoš'
function: 'Poslanec PSP ČR za Ústecký kraj'
-
name: 'Ivan Bartoš'
function: 'Poslanec PSP ČR za Ústecký kraj'
people_program: people_program:
- name: 'Klára Kocmanová' - name: 'Klára Kocmanová'
...@@ -29,7 +28,6 @@ context: ...@@ -29,7 +28,6 @@ context:
function: 'předseda poslaneckého klubu Pirátů' function: 'předseda poslaneckého klubu Pirátů'
people_other_1: people_other_1:
- name: 'Pepa Honzů' - name: 'Pepa Honzů'
function: 'předseda poslaneckého klubu Pirátů' function: 'předseda poslaneckého klubu Pirátů'
...@@ -46,8 +44,6 @@ context: ...@@ -46,8 +44,6 @@ context:
- name: 'Václav Bukva' - name: 'Václav Bukva'
function: 'předseda poslaneckého klubu Pirátů' function: 'předseda poslaneckého klubu Pirátů'
teams_sections: teams_sections:
- -
header: "Rezortní týmy" header: "Rezortní týmy"
......
...@@ -18,13 +18,21 @@ ...@@ -18,13 +18,21 @@
</article> </article>
</div> </div>
<div class="grid-right-side mb-8 xl:mb-0"> <div class="grid-right-side mb-8 xl:mb-0">
<div class="bg-grey-100 flex flex-col justify-center mb-1 px-7 py-4 xl:py-9"> <div>
<div class="flex mb-2"> <h3 class="head-6xl">Kontakty</h3>
</div>
<div>
<i class="ico--envelope mr-2"></i> <i class="ico--envelope mr-2"></i>
<a href="{{ person_mail }}" class="text-turquoise-500 underline"> <a href="{{ person_mail }}" class="text-turquoise-500 underline">
{{ person_mail }} {{ person_mail }}
</a> </a>
</div> </div>
<div class="bg-grey-100 flex flex-col justify-center mb-1 px-7 py-4 xl:py-9">
<div class="flex mb-2">
</div>
<div class="flex"> <div class="flex">
<i class="ico--phone mr-2"></i> <i class="ico--phone mr-2"></i>
<a href="{{ person_telto }}"> <a href="{{ person_telto }}">
...@@ -55,34 +63,8 @@ ...@@ -55,34 +63,8 @@
</div> </div>
</section> </section>
</div> </div>
<section class="grid-container no-max mr-0 person-instagram-section mb-4 xl:mb-20">
<div class="grid-content-with-right-side">
<h2 class="head-4xl text-left">
{{ person_instagram_box_title }}
</h2>
<div class="__js-root instagram-carousel-root xl:max-w-[1145px]">
<ui-instagram-carousel>
<div class="w-full h-full flex max-w-xs">
{% include 'patterns/molecules/boxes/instagram_box.html' %}
</div>
<div class="w-full h-full flex max-w-xs">
{% include 'patterns/molecules/boxes/instagram_box.html' %}
</div>
<div class="w-full h-full flex max-w-xs">
{% include 'patterns/molecules/boxes/instagram_box.html' %}
</div>
<div class="w-full h-full flex max-w-xs">
{% include 'patterns/molecules/boxes/instagram_box.html' %}
</div>
<div class="w-full h-full flex max-w-xs">
{% include 'patterns/molecules/boxes/instagram_box.html' %}
</div>
</ui-instagram-carousel>
</div>
</div>
</section>
<section class="grid-container no-max mr-0 mb-4 xl:mb-20"> <section class="grid-container no-max mr-0 mb-4 xl:mb-20">
<div class="grid-content-with-right-side"> <div class="grid-content">
<h2 class="head-4xl text-left"> <h2 class="head-4xl text-left">
{{ person_calendar_title }} {{ person_calendar_title }}
</h2> </h2>
......
...@@ -42,7 +42,7 @@ ...@@ -42,7 +42,7 @@
{% elif program.type == 'crossroad' %} {% elif program.type == 'crossroad' %}
<div class="grid-container mb-12"> <div class="grid-container mb-12">
<div class="grid-full"> <div class="grid-full">
{% include 'patterns/organisms/cards/card_list.html' with description_classes="!bg-grey-100" classes='drop-shadow-lg' %} {% include 'patterns/organisms/cards/card_list.html' with description_classes="!bg-grey-180" classes='drop-shadow' %}
</div> </div>
</div> </div>
{% endif %} {% endif %}
......
...@@ -77,6 +77,7 @@ module.exports = { ...@@ -77,6 +77,7 @@ module.exports = {
'125': '#f0f0f0', '125': '#f0f0f0',
'150': '#ececec', '150': '#ececec',
'175': '#d0d0d0', '175': '#d0d0d0',
'180': '#eee',
'185': '#bdbdbd', '185': '#bdbdbd',
'200': '#adadad', '200': '#adadad',
'300': '#4c4c4c', '300': '#4c4c4c',
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment