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
Branches
No related tags found
2 merge requests!861Release: New homepage design,!841Feat/new homepage
Showing
with 84 additions and 366 deletions
No preview for this file type
......@@ -5,10 +5,13 @@
{% if request.in_preview_panel %}
<base target="_blank">
{% endif %}
<!-- Meta -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width"/>
{% meta_tags %}
{% if settings.MAJAK_ENV == "test" %}
<meta name="robots" content="noindex, nofollow">
{% endif %}
......@@ -27,17 +30,14 @@
</head>
<body>
{% include 'main/includes/layout/messages.html' %}
{% include 'main/includes/layout/header.html' %}
{% include 'main/includes/organisms/layout/messages.html' %}
{% block content %}{% endblock content %}
{% include 'main/includes/layout/footer.html' %}
{% include 'main/includes/organisms/layout/footer.html' %}
<script src="{% static 'main/main.js' %}"></script>
{% block scripts %}{% endblock scripts %}
</body>
</html>
<div class="grid-container flex xl:grid mb-4 bg-grey-150 xl:mb-20 py-5">
<div class="flex justify-start xl:justify-end grid-left-side">
<i class="ico--download p-2 text-3xl md:text-4xl xl:text-7xl xl:mr-12"></i>
</div>
<div class="grid-content flex items-center flex-wrap gap-3 overflow-hidden">
<div class="flex items-center bg-white h-11 p-1 mr-3 overflow-hidden">
<span class="font-bold mr-1">Stáhnout soubor: </span>
<span class="overflow-hidden text-ellipsis">{{ self.file }}</span>
</div>
<a href="{{ self.file.url }}" class="btn btn--black btn--to-yellow-500 btn--hoveractive uppercase">
<span class="btn__body-wrap">
<span class="btn__body text-lg lg:text-base">
Stáhnout
</span>
</span>
</a>
</div>
</div>
{% load wagtailimages_tags %}
<div class="grid-container px-3 py-3 mb-4 bg-grey-150 xl:py-0 xl:mb-20">
<div class="grid-content-with-right-side flex flex-wrap gap-3 xl:gap-5 overflow-hidden">
{% image self.image fill-450x300 as image %}
<img src="{{ image.url }}"
alt="" class="w-full max-w-sm">
<div class="flex flex-col justify-between overflow-hidden">
<a href="{{ self.href }}" class="mt-4 xl:mt-8 mb-2 font-bold hover:no-underline leading-5">
{{ self.text }}
</a>
<span class="text-sm text-grey-200 uppercase mb-4 xl:mb-6 overflow-hidden text-ellipsis">zdroj: {{ self.href }}</span>
</div>
</div>
</div>
<div class="grid-container flex xl:grid mb-4 bg-grey-150 xl:mb-20 py-5">
<div class="grid-left-side flex lg:justify-end">
<span class="quote-icon p-2 xl:mr-12 font-alt"></span>
</div>
<div class="flex flex-col grid-content">
<span class="text-3xl head-4xl xl:text-4xl">{{ self.quote }}</span>
<span class="font-alt text-turquoise-500 mb-6">– {{ self.autor_name }}</span>
</div>
</div>
{% for month_article_data in article_data_list %}
{% if month_article_data.left_column|length %}
<div class="mb-4">
<h2 class="head-4xl mb-5 xl:hidden">
{{ month_article_data.month_text }}
</h2>
<div class="article-timeline-grid justify-between">
<div class="article-timeline-grid__left-article xl:pt-8">
{% for article_page in month_article_data.left_column %}
{% include 'main/includes/work_article_preview.html' %}
{% endfor %}
</div>
<div class="article-timeline-grid__timeline relative border border-violet-600 hidden xl:block">
<div class="article-timeline--month absolute bg-violet-600 p-1 text-white font-bold">
{{ month_article_data.month_text }}
</div>
</div>
<div class="article-timeline-grid__right-article xl:pt-14">
{% for article_page in month_article_data.right_column %}
{% include 'main/includes/work_article_preview.html' %}
{% endfor %}
</div>
</div>
</div>
{% endif %}
{% endfor %}
{% load static wagtailimages_tags %}
<div class="bg-cover bg-no-repeat section-clip py-16 xl:min-h-screen lg:py-36"
style="background-image:
linear-gradient(0, rgba(255,255,255,0) 70%, rgb(255,255,255) 100%),
linear-gradient(90deg, rgba(255,255,255,0) 70%, rgb(255,255,255) 100%),
linear-gradient(180deg, rgba(255,255,255,0) 80%, rgb(255,255,255) 98%),
{% if self.image %}
{% image self.image original as original_image %}
url({{ original_image.url }})
{% else %}
url('{% static 'main/images/background-images/bg-join-us.jpg' %}')
{% endif %}
">
<div class="container--wide mx-auto z-10">
<h2 class="head-7xl xl:text-center mb-6 xl:mb-28">
{{ self.title }}
</h2>
<div class="flex flex-wrap gap-2 md:gap-1 justify-center items-center md:flex-row">
{% for box in self.list %}
<a href="{{ box.button_link }}" class="w-96 h-72 flex bg-white flex-col items-center justify-center drop-shadow-xl xl:m-0 sm:w-80 sm:h-80 hover:no-underline">
{% image box.image max-200x200 as box_img %}
<img
src="{{ box_img.url }}"
alt=""
class="mb-8 max-w-20 max-h-20"
>
<h5 class="head-4xl mb-8">
{{ box.title }}
</h5>
{% include 'main/includes/plain_button.html' with btn_text=box.button_text %}
</a>
{% endfor %}
</div>
</div>
</div>
{% load wagtailcore_tags wagtailimages_tags %}
{% image self.image width-356 as img %}
{% firstof self.page.url self.link as target_url %}
<div class="card">
<a href="{{ target_url }}">
<img
src="{{ img.url }}"
alt="{{ self.page.title }}"
class="w-full h-48 object-cover"
>
</a>
<div class="p-4">
<h2 class="mb-2 text-xl font-bold">
<a href="{{ target_url }}">
{{ self.title }}
</a>
</h2>
<div class="font-light text-sm break-words">
{{ self.text | default_if_none:'' | richtext }}
</div>
</div>
</div>
{% load wagtailcore_tags %}
<div class="mb-8">
{% if self.headline %}
<h2 class="head-4xl mt-5 mb-5">{{ self.headline }}</h2>
{% endif %}
<ul class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
{% for card_block in self.card_items %}
<li>
{% include_block card_block %}
</li>
{% endfor %}
</ul>
</div>
{% load wagtailimages_tags wagtailcore_tags static %}
{% image self.image width-800 as img %}
<ui-popout>
<template slot="toggler">
{{ self.title }}
</template>
<ui-popout-content>
<div class="flex flex-wrap gap-4 lg:flex-nowrap">
<div class="grow lg:grow-0 lg:basis-2/3 max-w-screen-lg">
<div class="prose max-w-none">
{{ self.hoax|richtext }}
</div>
<img
class="mt-10"
src="{% static "main/images/hoax.webp" %}"
alt="Hoax"
>
<h3 class="head-2xl mt-10">Jak to je?</h3>
<div class="prose max-w-none">
{{ self.reality|richtext }}
</div>
</div>
<div class="lg:basis-1/3">
<img
class="w-full mb-3"
src="{{ img.url }}"
alt="{{ img.alt }}"
>
<small class="text-grey-300">
<i>{{ self.image_explanation }}</i>
</small>
</div>
</div>
</ui-popout-content>
</ui-popout>
{% load wagtailimages_tags %}
<div class="__js-root">
<ui-header-carousel>
{% for slide in self.slides %}
<div class="xl:min-h-screen relative">
{% image slide.image fill-1920x1020 as slide_img %}
<img src="{{ slide_img.url }}" draggable="false">
<div class="header-carousel--text">
<div class="h-full flex flex-col justify-end items-start">
<div class="mb-4">
<h1 class="text-white">{{ slide.line_1|linebreaksbr }}</h1>{# TODO SEO <h1><span><span> #}
<h1 class="text-yellow-500 mb-2">{{ slide.line_2|linebreaksbr }}</h1>
</div>
{% include 'main/includes/href_button.html' with btn_link=slide.button_link btn_text=slide.button_text extra_classes="justify-start w-fit" %}
</div>
</div>
</div>
{% endfor %}
</ui-header-carousel>
</div>
{% load shared_filters static wagtailcore_tags wagtailimages_tags %}
<div class="bg-cover bg-no-repeat section-clip mb-8 py-16 lg:py-36 lg:mb-16"
style="background-image:{% if self.image %}{% image self.image original as original_image %}url({{ original_image.url }}){% else %}url('{% static 'main/images/background-images/bg-join-us.jpg' %}'){% endif %}">
<div class="container--medium mx-auto px-4">
<h2 class="head-7xl xl:text-center mb-6 xl:mb-28">
{{ self.title }}
</h2>
{% if article_main %}
<div class="flex flex-col xl:flex-row mb-12">
{% image article_main.image fill-576x576 as article_img %}
<a href="{{ article_main.url }}" class="mb-4 xl:mb-0">
<img src="{{ article_img.url }}" draggable="false" alt="" class="lg:max-w-lg lg:mr-11">
</a>
<div class="flex flex-col max-w-xl items-start">
<span class="text-green-500 head-3xl mb-4 lg:mb-8">{{ article_main.date }}</span>
<a href="{{ article_main.url }}">
<h4 class="head-4xl mb-5 lg:mb-10">{{ article_main.title }}</h4>
</a>
<p class="leading-6 mb-4 lg:mb-8">{{ article_main.perex }}</p>
{% include 'main/includes/href_button.html' with btn_link=article_main.url btn_text="Číst dále" %}
</div>
</div>
<div class="__js-root mb-20">
<ui-article-carousel>
{% include 'main/includes/article_carousel_item.html' with article_carousel_list=article_carousel_list %}
</ui-article-carousel>
</div>
<div class="text-center w-full">
{% include 'main/includes/href_button.html' with btn_link=page.root_page.articles_page.url btn_text="Více aktualit" %}
</div>
{% endif %}
</div>
</div>
{% load wagtailimages_tags %}
<div class="bg-cover bg-no-repeat section-clip py-16 xl:min-h-screen lg:py-36">
<div class="container--wide mx-auto z-10">
<h2 class="head-7xl xl:text-center mb-6 xl:mb-28">
{{ self.title }}
</h2>
<div class="flex flex-wrap gap-2 md:gap-1 justify-center items-center md:flex-row">
{% for box in self.list %}
{% image box.image fill-480x480 as box_image %}
<a
href="{{ box.button_link }}"
class="background-hover-zoom w-96 h-60 flex bg-white flex-col items-center justify-center drop-shadow-xl xl:m-0 sm:w-80 sm:h-80 hover:no-underline"
style="background-image: url('{{ box_image.url }}')">
<h5 class="head-alt-md text-white mt-24 mb-8">
{{ box.title }}
</h5>
{% include 'main/includes/plain_button.html' with btn_text=box.button_text %}
</a>
{% endfor %}
</div>
</div>
</div>
{% load static wagtailimages_tags %}
<div class="bg-cover bg-no-repeat section-clip py-16 lg:py-36"
id="regiony"
style="background-image:
{% if self.image %}
{% image self.image original as original_image %}
url({{ original_image.url }})
{% else %}
url('{% static 'main/images/background-images/bg-map.jpg' %}')
{% endif %}
">
<div class="container--medium mx-auto px-4 ">
<h2 class="head-7xl xl:text-center mb-6 xl:mb-28">
{{ self.title }}
</h2>
<div class="flex flex-wrap justify-center">
<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>
{# <div class="w-12/12 lg:w-5/12">#}
{# <div class="flex flex-col justify-center">#}
{# <div class="select">#}
{# <select onchange="selectRegion(this)" class="select__control form-field__control" name="search-type">#}
{# <option value="VSK">Všechny kraje</option>#}
{# {% for region in regions %}#}
{# <option value="{{ region.0 }}">{{ region.1 }}</option>#}
{# {% endfor %}#}
{# </select>#}
{# </div>#}
{# <div id='searchResultWrapper'>#}
{# {% include 'main/includes/small_article_preview.html' with article_data_list=article_data_list %}#}
{# </div>#}
{# </div>#}
{# </div>#}
</div>
</div>
</div>
{#<script type="text/javascript">#}
{# function selectRegion(option) {#}
{# let resultWrappers = document.getElementById('searchResultWrapper');#}
{# let url = "{{ page_url }}?region=" + option.value;#}
{# fetch(url, {#}
{# method: "GET",#}
{# headers: {#}
{# "X-Requested-With": "XMLHttpRequest",#}
{# },#}
{# }).then((response) => response.json())#}
{# .then((data) => {#}
{# resultWrappers.innerHTML = data.html;#}
{# });#}
{# }#}
{#</script>#}
<div class="grid-container mb-2 lg:mb-12">
<div class="grid-content">
<div class="prose max-w-none 3xl:text-lg">
{{ self }}
</div>
</div>
</div>
{% load wagtailimages_tags %}
{% for article_item in article_carousel_list %}
<div>
<div class="flex max-w-md items-start xl:mr-2">
{% image article_item.image fill-144x144 as image %}
<a href="{{ article_item.get_url }}" {{ article_item.get_rel }} class="mr-4 shrink-0">
<img src="{{ image.url }}"
alt=""
class="w-16 xl:w-36">
</a>
<div class="flex flex-col justify-between items-start">
<span class="text-green-500 mb-2">{{ article_item.date | date }}</span>
<a href="{{ article_item.get_url }}" {{ article_item.get_rel }} class="font-alt leading-5 text-base uppercase lg:text-base mb-2">
{{ article_item.title }}
</a>
{% include 'main/includes/href_button.html' with btn_link=article_item.get_url noindex=article_item.get_no_index btn_text="Zjistit více" %}
</div>
</div>
</div>
{% endfor %}
<div
class="
{{ classes }}
flex flex-col gap-4 my-6
lg:mx-8 lg:my-4 lg:w-2/5
"
>
<img
class="my-0"
src="{{ image_url }}"
>
{% if image_source %}
<span class="text-grey-600 text-sm flex gap-2 items-center">
<span>⎯⎯</span>
<span>{{ image_source }}</span>
</span>
{% endif %}
</div>
<a
href="{{ url }}"
class="
flex items-center group rounded-full font-condensed uppercase font-semibold tracking-tight
hover:no-underline
{% if not classes %}
bg-black text-white
{% else %}
{{ classes }}
{% endif %}
{% block size_classes %}
pl-8 pr-3 py-3
xl:text-lg xl:pl-8 xl:pr-3 xl:py-4
{% endblock %}
"
>
<span class="group-hover:-translate-x-2 duration-200">{{ button_text }}</span>
<span class="opacity-0 group-hover:opacity-100 duration-200">{% include 'patterns/atoms/icons/arrow.html' %}</span>
</a>
{% extends 'patterns/atoms/buttons/round_button.html' %}
{% block size_classes %}text-sm pl-7 pr-2 py-2{% endblock %}
<button
class="btn btn--yellow-500 btn--to-yellow-600 btn--hoveractive"
aria-label="{{ label }}"
>
<div class="btn__body-wrap h-10 w-12 min-h-0 min-w-0 xl:h-14 xl:w-14">
<div class="btn__body p-0">
<i class="{{ icon }}"></i>
</div>
</div>
</button>
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment