Skip to content
Snippets Groups Projects
Commit ee47bba4 authored by Tomáš Valenta's avatar Tomáš Valenta Committed by josef.bouse
Browse files

wip - migrate new homepage design

parent 43915d44
No related branches found
No related tags found
2 merge requests!861Release: New homepage design,!841Feat/new homepage
Showing
with 637 additions and 35 deletions
<div class="flex gap-3 flex-wrap {{ classes }}">
{% for tag in tags %}
{% include 'patterns/atoms/tags/tag.html' with text=tag %}
{% endfor %}
</div>
<div class="flex gap-4 flex-wrap max-w-[550px] {{ classes }}">
{% for tag in tags %}
{% include 'patterns/atoms/tags/tag.html' with text=tag %}
{% endfor %}
</div>
{% load static %}
<div
class="section-clip newsletter-section bg-cover bg-no-repeat flex pb-32 xl:pb-0 xl:min-h-screen relative z-10"
style="background-image: linear-gradient(0deg, rgba(255,255,255,0) 98%, rgba(170,170,170,1) 100%), linear-gradient(270deg, rgba(255,255,255,0) 70%, rgb(255,255,255) 100%), linear-gradient(180deg, rgba(255,255,255,0) 80%, rgba(255,255,255,1) 100%), url('{% static 'main/images/background-images/bg-bartos-newsletter.jpg' %}')"
>
<div class="grid-container mt-20 xl:mt-0 xl:items-center z-10">
<div>
<img src="{% static 'main/images/lahev.svg' %}" alt="newsletter_icon" class="newsletter-grid__icon text-7xl xl:text-9xl w-32">
</div>
<div>
<h5 class="font-alt mb-2 text-5xl md:text-6xl xl:text-7xl uppercase">
Odebírej náš newsletter
</h5>
<span class="inline-block uppercase text-xl xl:text-base font-bold mb-4 xl:w-full">
Fake news tam nenajdeš, ale dozvíš se, co chystáme doopravdy!
</span>
<div class="flex flex-col items-start">
<form method="post" class="w-full max-w-md" action="{{ page.root_page.newsletter_subscribe_url }}">
{% csrf_token %}
<input type="hidden" name="return_page_id" value="{{ page.id }}">
<input type="email" name="email" class="text-input bg-white form-field__control mb-3 w-full" value="" required=""
placeholder="Tvůj email"/>
<div class="checkbox form-field__control flex items-center mb-3">
<input type="checkbox" id="checkbox_1" name="confirmed" required="">
<label class="text-xs font-alt font-light" for="checkbox_1">
Souhlasím se <a href="{{ page.root_page.gdpr_and_cookies_url }}" target="_blank">zpracováním osobních údajů</a>
</label>
</div>
{% include 'main/includes/form_button.html' with btn_text="Odebírat" %}
</form>
</div>
</div>
</div>
</div>
{% load wagtailcore_tags wagtailimages_tags %}
<div class="bg-black text-white">
<div class="container--medium">
<div
class="
flex gap-2 items-start py-16 flex-col
xl:py-24 xl:flex-row xl:gap-4
"
>
<h2 class="head-14xl head-compact">
{{ self.title }}
</h2>
<p class="max-w-[350px] text-xl font-condensed">
{{ self.description }}
</p>
</div>
<div class="grid grid-cols-1 xl:grid-cols-3 gap-8">
{% comment %}
{% include 'patterns/molecules/boxes/card_box.html' %}
{% include 'patterns/molecules/boxes/card_box.html' %}
{% include 'patterns/molecules/boxes/card_box.html' %}
{% endcomment %}
</div>
<div
class="
flex justify-center py-12
xl:py-24
"
>
{% include "main/includes/atoms/buttons/round_button.html" with button_text="Více článků" classes="bg-white text-black" url=page.root_page.articles_page.url %}
</div>
</div>
</div>
<div class="bg-pirati-yellow">
<div class="container--medium">
<div class="py-16 xl:py-24">
<div class="__js-root">
<h2
class="
text-7xl font-alt head-compact
xl:flex xl:gap-6 xl:text-14xl
"
>
<div class="hidden xl:block">
<ui-animated-arrow
desktop-width="142.8"
desktop-height="150"
></ui-animated-arrow>
</div>
<span class="flex gap-2">
<ui-animated-arrow
mobile-width="66.6"
mobile-height="70"
></ui-animated-arrow>
Volby do Evropy
</span>
</h2>
</div>
</div>
<div class="grid grid-cols-1 xl:grid-cols-3 gap-8">
{% include 'patterns/molecules/boxes/card_box.html' %}
{% include 'patterns/molecules/boxes/card_box.html' %}
{% include 'patterns/molecules/boxes/card_box.html' %}
</div>
<div
class="
flex justify-center py-12
xl:py-24
"
>
{% include "main/includes/atoms/buttons/round_button.html" with button_text=button_text %}
</div>
</div>
</div>
<div class="flex justify-center">
<div class="container--wide w-full">
<div class="flex flex-col gap-8 mb-16">
<div class="text-center">
<h2 class="head-9xl">{{ month_1 }}</h2>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-12">
{% include 'patterns/molecules/articles/article_timeline_preview.html' %}
{% include 'patterns/molecules/articles/article_timeline_preview.html' %}
{% include 'patterns/molecules/articles/article_timeline_preview.html' %}
{% include 'patterns/molecules/articles/article_timeline_preview.html' %}
</div>
<div class="flex justify-center">
{% include 'patterns/atoms/buttons/round_button.html' with button_text='Další články' %}
</div>
</div>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 content-stretch gap-8">
{% for card in cards %}
{% include 'patterns/molecules/boxes/card_box.html' with url=card.url image=card.image header=card.header content=card.content description_classes=description_classes classes=classes date=date %}
{% endfor %}
</div>
{% extends 'patterns/organisms/header/simple_header_with_tags_and_navigation.html' %}
{% block before_heading %}
{% include 'patterns/atoms/header/navigation.html' with classes='mb-6' first_text=first_nav_text second_text=second_nav_text second_link=second_link %}
{% endblock %}
{% block heading_classes %}head-8xl{% endblock %}
{% extends 'patterns/organisms/header/simple_header_with_tags.html' %}
{% block after_heading %}
{% include 'patterns/molecules/tags/tags.html' with classes='mb-4' %}
<div class="flex justify-start">
<input
type="text"
id="articles_search"
class="max-w-md w-full bg-grey-180 px-4 py-2 text-black"
placeholder="Hledej..."
>
</div>
{% endblock %}
{% extends 'patterns/organisms/header/simple_header_with_ui_switch.html' %}
{% block classes %}xl:pt-32 xl:pb-16{% endblock %}
{% block description %}
<div
class="
grid gap-4 py-4 font-bold pr-4 grid-cols-1 [&_p]:!text-lg
md:grid-cols-2 md:pr-0
"
>
<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')}">{{ choice_1 }}</a>
<a @click="toggleView('program')" class="switch__item"
:class="{'switch__item--active': isCurrentView('program')}">{{ choice_2 }}</a>
<a @click="toggleView('other1')" class="switch__item"
:class="{'switch__item--active': isCurrentView('other1')}">{{ choice_3 }}</a>
<a @click="toggleView('other2')" class="switch__item"
:class="{'switch__item--active': isCurrentView('other2')}">{{ choice_4 }}</a>
<a @click="toggleView('teams')" class="switch__item"
:class="{'switch__item--active': isCurrentView('teams')}">{{ choice_5 }}</a>
{% endblock %}
<header
class="bg-[#00000088] flex items-center py-52 mb-4 xl:mb-20 w-full bg-no-repeat bg-cover bg-center bg-blend-darken"
style="background-image: url('../../../../static/images/background-images/bg-bartos.jpg')"
>
<div class="container--wide w-full">
<h1 class="text-white flex flex-col">
{% include 'patterns/atoms/header/navigation.html' with classes='mb-10' first_text='Lidé' second_text='Sněmovna' %}
<span class="text-xl sm:text-4xl font-alt leading-3">{{ degree_before }}</span>
<div class="flex items-baseline flex-col xl:flex-row font-alt">
<span class="font-alt text-6xl xl:text-9xl grow xl:grow-0">{{ name }}</span>
<span class="text-2xl xl:text-4xl">
<span class="hidden xl:inline">, </span>{{ degree_after }}
</span>
</div>
<span
class="
text-lg font-bold mt-8
xl:mt-[-0.7rem]
"
>{{ function }}</span>
</h1>
</div>
</header>
<header
class="
bg-black flex items-center w-full mb-20 pt-28 pb-8
xl:pt-48 xl:pb-24
{% block classes %}{% endblock %}
"
>
<div class="flex justify-start w-full">
<div class="container--wide w-full">
<div class="text-white flex flex-col">
{% block before_heading %}{% endblock %}
{% block heading %}
<h1
class="
{% block heading_classes %}
mb-1
{% if is_short %}head-short{% endif %}
{% if description %}
head-8xl
{% else %}
head-14xl
{% endif %}
{% endblock %}
"
>
{{ title|safe }}
</h1>
{% endblock %}
{% block after_heading %}{% endblock %}
{% block description %}
{% if description %}
<p
class="
font-semibold text-lg leading-7 pr-4
xl:pr-0
lg:max-w-screen-lg
"
>
{{ description }}
</p>
{% endif %}
{% endblock %}
{% block after_description %}{% endblock %}
</div>
</div>
</div>
</header>
{% extends 'patterns/organisms/header/simple_header.html' %}
{% block after_heading %}
{% include 'patterns/molecules/tags/tags.html' with classes='mb-4' %}
{% endblock %}
{% extends 'patterns/organisms/header/simple_header.html' %}
{% block before_heading %}
{% include 'patterns/atoms/header/navigation.html' with classes='mb-6' %}
{% endblock %}
{% block after_heading %}
{% include 'patterns/molecules/tags/tags.html' with classes='mb-4 mt-4' %}
{% endblock %}
{% extends 'patterns/organisms/header/simple_header.html' %}
{% block after_description %}
<div
class="
container--medium flex justify-center ml-[unset] mr-[unset]
xl:mb-12 mb-4
"
>
<ui-horizontal-scrollable>
<div class="switch">
{% block switch %}
{% for switch in ui_switch_iterable %}
<a
@click="toggleView('view{{ forloop.counter }}')"
class="switch__item"
:class="{'switch__item--active': isCurrentView('view{{ forloop.counter }}')}"
>{{ switch.name }}</a>
{% endfor %}
{% endblock %}
</div>
</ui-horizontal-scrollable>
</div>
{% endblock %}
<footer class="bg-black text-white __js-root py-4 xl:py-24 pb-8 xl:pb-24">
<ui-app inline-template>
<div
class="
container--wide gap-16 grid grid-cols-1
lg:grid-cols-2 lg:gap-2
"
>
<section class="text-white md:flex md:flex-col md:justify-between gap-8">
{% for item in collapsible_items %}
<div class="py-4 xl:py-0">
<ui-footer-collapsible label="{{ item.label }}">
<ul
class="
text-white py-8 max-w-max text-xl flex flex-col gap-3
md:text-base md:grid md:grid-cols-2 md:auto-rows-auto md:gap-y-5 md:gap-x-14
"
>
{% for item in item.menu_items %}
<li>
<a href="#">{{ item }}</a>
</li>
{% endfor %}
</ul>
</ui-footer-collapsible>
</div>
{% endfor %}
</section>
<section class="flex flex-col xl:items-end">
<div class="flex flex-col gap-12">
{% include 'patterns/molecules/contact/contact_footer_box.html' %}
{% include 'patterns/molecules/contact/contact_footer_box.html' %}
</div>
</section>
</div>
</ui-app>
<div class="container--wide flex flex-col gap-8 pt-16 xl:pt-8">
<section>
<div
class="
flex flex-col items-start gap-y-4
xl:flex-row xl:items-center xl:gap-x-8
"
>
<a href="#" class="flex gap-2 items-center hover:no-underline">
<i class="ico--facebook"></i>
<span class="text-sm">{{ facebook }}</span>
</a>
<a href="#" class="flex gap-2 items-center hover:no-underline">
<i class="ico--instagram text-lg"></i>
<span class="text-sm">{{ instagram }}</span>
</a>
<a href="#" class="flex gap-2 items-center hover:no-underline">
<i class="ico--feed text-lg"></i>
<span class="text-sm">{{ feed }}</span>
</a>
<a href="#" class="flex gap-2 items-center hover:no-underline">
<i class="ico--twitter text-lg"></i>
<span class="text-sm">{{ twitter }}</span>
</a>
<a href="#" class="flex gap-2 items-center hover:no-underline">
<i class="ico--youtube text-xl"></i>
<span class="text-sm">{{ youtube }}</span>
</a>
</div>
</section>
<section>
<span class="text-xs text-grey-350">
<span class="-scale-x-100 inline-block">{{ copyleft_sign }}</span>
{{ copyleft_text|safe }}
<a href="#" class="underline">{{ privacy_text }}</a>
</span>
</section>
</div>
</footer>
<ul class="flex flex-col w-full">
{% for message in messages %}
<li>
{% include "main/includes/molecules/blocks/message_block.html" with type=message.type content=message.content is_last_child=forloop.last %}
</li>
{% endfor %}
</ul>
<!-- Navbar -->
<nav
class="
static absolute left-0 top-0 z-20 w-full duration-200 navbar
2xl:bg-transparent
{% if is_transparent %}navbar--transparent{% endif %}
{% if is_on_dark_background %}navbar--on-dark-bg{% endif %}
"
>
<div class="container--wide py-3 xl:py-6 flex justify-between items-center">
<div class="flex items-center 2xl:items-start">
<!-- BEGIN Logo-->
<a href="#" class="z-20">
<img class="navbar__logo--white w-[150px] lg:w-[unset]" src="../../../../static/images/logo-full-white.svg" alt="">
<img class="navbar__logo--black w-[150px] lg:w-[unset]" src="../../../../static/images/logo-full-black.svg" alt="">
</a>
<!-- END Logo -->
</div>
<div class="flex-col gap-3 2xl:flex hidden">
<!-- BEGIN Social media-->
<div class="flex gap-7 justify-end items-center">
<div class="flex gap-5 text-lg">
<a href="#" class="hover:no-underline">
<i class="ico--facebook"></i>
</a>
<a href="#" class="hover:no-underline">
<i class="ico--instagram"></i>
</a>
<a href="#" class="hover:no-underline">
<i class="ico--feed"></i>
</a>
<a href="#" class="hover:no-underline">
<i class="ico--twitter"></i>
</a>
<a href="#" class="hover:no-underline">
<i class="ico--youtube"></i>
</a>
</div>
{% include 'patterns/atoms/form_fields/form_input.html' with form_placeholder='Hledej' classes='text-black px-2 py-1 w-80' %}
</div>
<!-- END Social media -->
<!-- BEGIN Menu -->
<div
class="flex text-2xl gap-8 font-alt items-center justify-end"
>
{% if important_item %}
<a
href="#"
class="__js-root flex gap-1 items-center decoration-1 underline-offset-4 {% if selected_item == important_item %}navbar__menu-item--selected{% endif %}"
>
<div class="mb-1">
{% if not is_transparent %}
{% include 'patterns/atoms/icons/arrow.html' with width='27' height='28.35' fill='#fff' %}
{% else %}
<ui-animated-arrow
mobile-width="38.1"
mobile-height="40"
desktop-width="27"
desktop-height="28.35"
></ui-animated-arrow>
{% endif %}
</div>
<span>
{{ important_item }}
</span>
</a>
{% endif %}
{% for item in menu_items %}
<a
href="#"
class="decoration-1 underline-offset-4 {% if item == selected_item %}navbar__menu-item--selected{% endif %}"
>{{ item }}</a>
{% endfor %}
<a
href="#"
class="btn btn--yellow-500 btn--to-yellow-600 btn--hoveractive xl:w-auto uppercase"
>
<div class="btn__body-wrap w-42 h-11">
<div class="btn__body w-42 h-11 xl:w-auto py-4 px-6">{{ menu_button_2 }}</div>
</div>
</a>
<a
href="#"
class="btn btn--to-yellow--600 group btn--hoveractive uppercase"
>
<div class="btn__body-wrap w-24 h-11 min-w-[7rem]">
<div class="navbar__border-button btn__body group group-hover:border-yellow-600 border-yellow-500 border-4 bg-transparent w-24 h-11 xl:w-auto py-4 px-6">{{ menu_button_1 }}</div>
</div>
</a>
</div>
<!-- END Menu -->
</div>
<!-- Hamburger Icon -->
<input class="hidden navbar__mobile-menu__toggle" type="checkbox" id="navbar__mobile-menu__toggle">
<label class="z-30 hamb text-black 2xl:hidden" for="navbar__mobile-menu__toggle">
<span>
<span class="bar1"></span>
<span class="bar2"></span>
<span class="bar3"></span>
</span>
</label>
<div
class="
navbar__mobile-menu
absolute top-0 left-0 w-full bg-grey-100 text-black pb-16 font-alt text-4xl drop-shadow-lg
flex-col gap-3
"
>
<div class="grid-container">
<div class="grid-left-side">
<img
class="w-[150px] mt-3"
src="../../../../static/images/logo-full-black.svg"
alt=""
>
</div>
</div>
<div
class="
flex flex-col gap-12 md:flex-row pt-12 px-8
md:justify-between
xl:pl-32
"
>
<div class="flex flex-col gap-3 items-start">
{% if important_item %}
<a
href="#"
class="__js-root flex items-center decoration-1 underline-offset-4 {% if selected_item == important_item %}navbar__menu-item--selected{% endif %}"
>
{% if not is_transparent %}
{% include 'patterns/atoms/icons/arrow.html' with width='27' height='28.35' %}
{% else %}
<ui-animated-arrow></ui-animated-arrow>
{% endif %}
{{ important_item }}
</a>
{% endif %}
{% for item in menu_items %}
<a
href="#"
class="decoration-1 underline-offset-4 {% if item == selected_item %}navbar__menu-item--selected{% endif %}"
>{{ item }}</a>
{% endfor %}
</div>
<div class="flex flex-col gap-12 md:justify-between xl:mr-16">
<div class="flex flex-col gap-4 items-start md:items-end">
<a
href="#"
class="btn btn--yellow-500 btn--to-yellow-600 btn--hoveractive xl:w-auto uppercase"
>
<div class="btn__body-wrap w-42">
<div class="btn__body w-42 h-11 xl:w-auto py-8 px-6">{{ menu_button_2 }}</div>
</div>
</a>
<a
href="#"
class="btn btn--to-yellow--600 group btn--hoveractive uppercase"
>
<div class="btn__body-wrap min-w-[7rem]">
<div class="btn__body group group-hover:border-yellow-600 border-yellow-500 text-black border-4 bg-transparent w-36 h-11 xl:w-auto py-8">{{ menu_button_1 }}</div>
</div>
</a>
</div>
<div class="flex gap-5 text-lg md:justify-end">
<a href="#" class="hover:no-underline">
<i class="ico--facebook"></i>
</a>
<a href="#" class="hover:no-underline">
<i class="ico--instagram"></i>
</a>
<a href="#" class="hover:no-underline">
<i class="ico--feed"></i>
</a>
<a href="#" class="hover:no-underline">
<i class="ico--twitter"></i>
</a>
<a href="#" class="hover:no-underline">
<i class="ico--youtube"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</nav>
<div
class="newsletter-section"
style="background-image:url('../../../../static/images/background-images/bg-newsletter.webp')" # TODO
>
<div class="container--medium pt-32 pb-24">
<h2 class="head-14xl">
Odebírej náš<br>
newsletter
</h2>
<p class="xl:mt-[-1rem]">
Fake news tam nenajdeš, ale dozvíš se, co chystáme doopravdy!
</p>
<div class="flex flex-col gap-2 mt-12 items-start">
{% include 'patterns/atoms/form_fields/form_input.html' with form_placeholder='Tvůj email' classes='mb-3 w-full md:w-96' %}
{% include 'patterns/atoms/form_fields/form_checkbox.html' with label='Souhlasím se zpracováním osobních údajů' classes='mb-3' %}
{% include 'patterns/atoms/buttons/round_button.html' with button_text='Odebírat' %}
</div>
</div>
</div>
<div id="regiony" class="py-24">
<div class="container--medium mx-auto px-4">
<h2 class="head-14xl xl:leading-[10.5rem] mb-20 xl:mb-32">
{{ self.title }}
</h2>
<div class="flex flex-wrap">
<div class="__js-root flex items-center justify-center h-full mb-4 w-full w-12/12 lg:w-7/12">
<ui-region-map class="w-full"></ui-region-map>
</div>
{% comment %}
<div class="w-12/12 lg:w-5/12">
<div class="flex flex-col gap-5 justify-center">
{% include 'patterns/atoms/form_fields/form_select.html' %}
<div class="flex flex-col gap-4">
{% include 'patterns/molecules/articles/small_article_preview.html' %}
{% include 'patterns/molecules/articles/small_article_preview.html' %}
{% include 'patterns/molecules/articles/small_article_preview.html' %}
</div>
</div>
</div>
{% endcomment %}
</div>
<div></div>
</div>
</div>
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment