Select Git revision
home_page.html 15.08 KiB
{% extends "base.html" %}
{% load static wagtailcore_tags wagtailimages_tags %}
{% block content %}
<main class="flex flex-col items-center gap-10 pt-14">
<div class="container flex gap-10">
<figure class="w-32 flex-col gap-2 hidden lg:flex">
<img
src="{% static 'home/images/logo_big.png' %}"
alt="Logo"
>
<figcaption class="font-sans leading-4">
<small>
Pirátský politický institut
</small>
</figcaption>
</figure>
<section class="prose font-serif leading-6 text-black w-full max-w-full lg:max-w-prose" id="uvod">
{{ page.heading_text|richtext }}
</section>
</div>
<section class="flex justify-center bg-pii-cyan w-full p-10" id="aktualne">
<div class="container flex flex-col gap-2">
<h2 class="font-bebas text-white text-3xl uppercase leading-7">Aktuálně</h2>
<ul class="flex gap-4 lg:h-96 lg:flex-nowrap flex-wrap">
{% for article in page.latest_articles %}
<li class="bg-white lg:w-80">
<a href="{{ article.url }}">
{% if article.image and article.show_image_on_homepage %}
{% image article.image max-400x400 as article_image %}
<img
class="w-full max-h-48 object-cover"
src="{{ article_image.url }}"
alt="Náhledový obrázek článku"
>
{% endif %}
<div class="p-7 flex flex-col gap-2 h-full">
<small class="text-pii-cyan uppercase font-bold">
{% for tag in article.tags.all %}
<span
class="px-2 py-0.5 rounded-sm"
style="background-color:{{ tag.bg_color }};color:{{ tag.fg_color }}"
>{{ tag.name }}</span>
{% endfor %}
</small>
<h3 class="font-serif text-xl leading-6 font-bold">{{ article.title }}</h3>
{% if not article.image or not article.show_image_on_homepage %}
<p class="font-serif leading-5 grow">
{{ article.shortened_perex }}
</p>
{% endif %}
<small class="font-serif">
Přidáno {{ article.date }}
</small>
</div>
</a>
</li>
{% endfor %}
</ul>
<div class="mt-3">
<a
class="flex gap-2 font-bebas text-white text-2xl uppercase"
href="{{ page.articles_page.url }}"
>
<i class="ico--chevron-right"></i>
<div>Další články</div>
</a>
</div>
</div>
</section>
<section class="container flex flex-col gap-3" id="akce">
<h2 class="font-bebas text-3xl uppercase leading-7">Akce s naší účastí</h2>
<ul class="flex gap-14">
<div class="flex flex-col gap-3">
{% for event in page.latest_events|slice:"0:4" %}
<a href="{{ event.url }}" target="_blank">
<li class="flex flex-col">
{% if event.date or event.location %}
<small class="text-pii-cyan uppercase">
{% if event.date %}
{{ event.date.day }}. {{ event.date.month }}. {{ event.date.year }}
{% endif %}
{% if event.location %}
{% if event.date %}
|
{% endif %}
{{ event.location }}
{% endif %}
</small>
{% endif %}
<span
class="font-bold font-serif text-xl"
>{{ event.title }}</span>
</li>
</a>
{% endfor %}
</div>
<div class="hidden lg:block">
{% if page.latest_events|length > 4 %}
<div class="flex flex-col gap-3 border-l-2 pl-14 border-pii-cyan">
{% for event in page.latest_events|slice:"4:8" %}
<a href="{{ event.url }}" target="_blank">
<li class="flex flex-col">
{% if event.date or event.location %}
<small class="text-pii-cyan uppercase">
{% if event.date %}
{{ event.date.day }}. {{ event.date.month }}. {{ event.date.year }}
{% endif %}
{% if event.location %}
{% if event.date %}
|
{% endif %}
{{ event.location }}
{% endif %}
</small>
{% endif %}
<span
class="font-bold font-serif text-xl"
>{{ event.title }}</span>
</li>
</a>
{% endfor %}
</div>
{% endif %}
</div>
</ul>
<a
class="flex gap-2 font-bebas text-2xl uppercase mt-4"
href="{{ page.events_page.url }}"
>
<i class="ico--chevron-right"></i>
<div>Další akce</div>
</a>
</section>
<section class="flex justify-center bg-grey-50 p-10 w-full lg:flex-nowrap flex-wrap" id="dokumenty">
<div class="container">
<div class="flex flex-col gap-3">
<h2 class="font-bebas text-3xl uppercase leading-7">Dokumenty</h2>
<ul class="flex flex-col lg:grid lg:grid-cols-3 lg:grid-rows-2 gap-y-3 gap-x-6 grid-flow-col">
{% for document in page.latest_documents %}
<li>
<a
href="{{ document.url }}"
target="_blank"
>
<h3 class="font-serif leading-4">
{{ document.title }}
</h3>
{% if document.date %}
<small class="font-serif">Přidáno {{ document.date }}</small>
{% endif %}
</a>
</li>
{% endfor %}
</ul>
</div>
<a
class="flex gap-2 font-bebas text-2xl uppercase mt-4"
href="{{ page.documents_page.url }}"
>
<i class="ico--chevron-right"></i>
<div>Další dokumenty</div>
</a>
</div>
</section>
<section class="container flex flex-col gap-3">
<span class="invisible relative top-[-8rem]" id="finance"></span>
<h2 class="font-bebas text-3xl uppercase leading-7">Finance</h2>
<div>
<h3 class="font-serif text-2xl font-bold">Podpořte institut π</h3>
<div class="prose font-serif leading-5 max-w-4xl">
{{ self.donation_text|richtext }}
</div>
</div>
</section>
<section class="flex justify-center bg-grey-50 p-10 w-full">
<span class="invisible relative top-[-8rem]" id="kontakty"></span>
<div class="container flex flex-col gap-3">
<h2 class="font-bebas text-3xl uppercase leading-7">Kontakty</h2>
<ul class="flex flex-col lg:grid lg:grid-cols-3 lg:grid-rows-2 lg:grid-flow-col gap-y-3 gap-x-20">
<li>
<h3 class="text-pii-cyan uppercase leading-3 text-sm">Sídlo</h3>
<span class="font-serif">{{ page.address }}</span>
</li>
<li>
<h3 class="text-pii-cyan uppercase leading-3 text-sm">Pobočka</h3>
<span class="font-serif">{{ page.branch }}</span>
</li>
<li>
<h3 class="text-pii-cyan uppercase leading-3 text-sm">Email</h3>
<a
href="mailto:{{ page.email }}"
class="font-serif flex gap-2"
>
<div>{{ page.email }}</div>
<div class="flex items-center">
<i class="ico--at text-xl text-pii-cyan"></i>
</div>
</a>
</li>
<li>
<h3 class="text-pii-cyan uppercase leading-3 text-sm">Datová schránka</h3>
<span class="font-serif">{{ page.ds_id }}</span>
</li>
</ul>
</div>
</section>
<section class="container flex flex-col gap-3">
<span class="invisible relative top-[-8rem]" id="lide"></span>
<h2 class="font-bebas text-3xl uppercase leading-7">Lidé</h2>
<div class="flex flex-col lg:grid lg:grid-cols-3 gap-20 min-h-screen">
<div class="flex flex-col gap-5 font-serif">
<section class="flex flex-col gap-4">
<h3 class="text-2xl font-bold">Ředitel</h3>
<div>
{{ page.director_description|richtext }}
</div>
<ul class="flex flex-col gap-3">
{% for block in page.director %}
{% if block.block_type == "person" %}
{% include_block block %}
{% else %}
{% include "home/blocks/person_page_block.html" with page=block.value %}
{% endif %}
{% endfor %}
</ul>
</section>
<section class="flex flex-col gap-4">
<h3 class="text-2xl font-bold">Akademická rada</h3>
<div>
{{ page.academic_council_description|richtext }}
</div>
<ul class="flex flex-col gap-3">
{% for block in page.academic_council %}
{% if block.block_type == "person" %}
{% include_block block %}
{% else %}
{% include "home/blocks/person_page_block.html" with page=block.value %}
{% endif %}
{% endfor %}
</ul>
</section>
</div>
<div class="flex flex-col gap-5 font-serif">
<section class="flex flex-col gap-4">
<h3 class="text-2xl font-bold">Kontrolor</h3>
<div>
{{ page.controller_description|richtext }}
</div>
<ul class="flex flex-col gap-3">
{% for block in page.controller %}
{% if block.block_type == "person" %}
{% include_block block %}
{% else %}
{% include "home/blocks/person_page_block.html" with page=block.value %}
{% endif %}
{% endfor %}
</ul>
</section>
<section class="flex flex-col gap-4">
<h3 class="text-2xl font-bold">Správní rada</h3>
<div>
{{ page.council_members_description|richtext }}
</div>
<ul class="flex flex-col gap-3">
{% for block in page.council_members %}
{% if block.block_type == "person" %}
{% include_block block %}
{% else %}
{% include "home/blocks/person_page_block.html" with page=block.value %}
{% endif %}
{% endfor %}
</ul>
</section>
</div>
<div class="font-serif">
<section class="flex flex-col gap-4">
<h3 class="text-2xl font-bold">Dobrovolnický kruh</h3>
<div>
{{ page.volunteers_description|richtext }}
</div>
<h4>
<strong>Členové dobrovolnického kruhu</strong>
</h4>
<ul class="flex flex-col leading-5">
{% for block in page.volunteers %}
{% if block.block_type == "person" %}
{% include_block block %}
{% else %}
{% include "home/blocks/person_page_block.html" with page=block.value %}
{% endif %}
{% endfor %}
</ul>
</section>
</div>
</div>
<section class="flex flex-col gap-3 mb-16">
<h3 class="font-bold font-serif text-2xl">Zaměstnanci</h3>
<ul class="flex flex-col lg:grid lg:grid-cols-3 lg:grid-rows-3 gap-y-2 gap-x-4 grid-flow-col font-serif">
<div class="leading-5">
{{ page.employees_description|richtext }}
</div>
{% for block in page.employees %}
{% if block.block_type == "person" %}
{% include_block block %}
{% else %}
{% include "home/blocks/person_page_block.html" with page=block.value %}
{% endif %}
{% endfor %}
</ul>
</section>
</section>
</main>
{% endblock %}