Skip to content
Snippets Groups Projects
Select Git revision
  • 3d1b6b3ce6f93eb8b565c4524015f767c2e1f5ea
  • master default protected
2 results

home_page.html

Blame
  • 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>&nbsp;
                                        {% 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 %}
                                                &nbsp;|&nbsp;
                                            {% 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 %}
                                                        &nbsp;|&nbsp;
                                                    {% 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 %}