diff --git a/elections2021/migrations/0021_elections2021homepage_carousel.py b/elections2021/migrations/0021_elections2021homepage_carousel.py
new file mode 100644
index 0000000000000000000000000000000000000000..94c1bca66c259b05dc68ee19bc2f64716f2175b1
--- /dev/null
+++ b/elections2021/migrations/0021_elections2021homepage_carousel.py
@@ -0,0 +1,68 @@
+# Generated by Django 3.2.2 on 2021-05-17 12:05
+
+import wagtail.core.blocks
+import wagtail.core.fields
+import wagtail.images.blocks
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+ dependencies = [
+ ("elections2021", "0020_auto_20210517_0235"),
+ ]
+
+ operations = [
+ migrations.AddField(
+ model_name="elections2021homepage",
+ name="carousel",
+ field=wagtail.core.fields.StreamField(
+ [
+ (
+ "slide",
+ wagtail.core.blocks.StructBlock(
+ [
+ (
+ "title",
+ wagtail.core.blocks.CharBlock(label="titulek"),
+ ),
+ (
+ "photo",
+ wagtail.images.blocks.ImageChooserBlock(
+ label="fotka"
+ ),
+ ),
+ (
+ "page",
+ wagtail.core.blocks.PageChooserBlock(
+ label="stránka do tlačítka",
+ page_type=[
+ "elections2021.Elections2021ArticlesPage",
+ "elections2021.Elections2021CandidatesListPage",
+ "elections2021.Elections2021CandidatesMapPage",
+ "elections2021.Elections2021ProgramPage",
+ "elections2021.Elections2021QuestionsPage",
+ "elections2021.Elections2021ProgramAppPage",
+ "elections2021.Elections2021TextPage",
+ "elections2021.Elections2021StrategicListPage",
+ "elections2021.Elections2021StrategicPage",
+ ],
+ required=False,
+ ),
+ ),
+ (
+ "raw_url",
+ wagtail.core.blocks.CharBlock(
+ label="ručně zadaný odkaz do tlačítka (místo stránky)",
+ required=False,
+ ),
+ ),
+ ]
+ ),
+ )
+ ],
+ blank=True,
+ verbose_name="obsah slideru",
+ ),
+ ),
+ ]
diff --git a/elections2021/models.py b/elections2021/models.py
index fd05eb1bfb05c25c3f0152390979b23fe32cbbcc..1998f237b4bdab083cbda8cc3b8676e5eed3569e 100644
--- a/elections2021/models.py
+++ b/elections2021/models.py
@@ -27,6 +27,7 @@ from wagtail.contrib.routable_page.models import RoutablePageMixin, route
from wagtail.core import blocks
from wagtail.core.fields import RichTextField, StreamField
from wagtail.core.models import Page
+from wagtail.images.blocks import ImageChooserBlock
from wagtail.images.edit_handlers import ImageChooserPanel
from wagtailmetadata.models import MetadataPageMixin
@@ -143,9 +144,41 @@ class MenuItemBlock(blocks.StructBlock):
label = "stránka"
+class SlideBlock(blocks.StructBlock):
+ title = blocks.CharBlock(label="titulek")
+ photo = ImageChooserBlock(label="fotka")
+ button_label = blocks.CharBlock(label="text tlačítka")
+ page = blocks.PageChooserBlock(
+ label="stránka do tlačítka",
+ page_type=[
+ "elections2021.Elections2021ArticlesPage",
+ "elections2021.Elections2021CandidatesListPage",
+ "elections2021.Elections2021CandidatesMapPage",
+ "elections2021.Elections2021ProgramPage",
+ "elections2021.Elections2021QuestionsPage",
+ "elections2021.Elections2021ProgramAppPage",
+ "elections2021.Elections2021TextPage",
+ "elections2021.Elections2021StrategicListPage",
+ "elections2021.Elections2021StrategicPage",
+ ],
+ required=False,
+ )
+ raw_url = blocks.CharBlock(
+ label="ručně zadaný odkaz do tlačítka (místo stránky)", required=False
+ )
+
+ class Meta:
+ label = "slide"
+ icon = "media"
+ template = "elections2021/_carousel_slide.html"
+
+
class Elections2021HomePage(Page, MetadataPageMixin):
### FIELDS
+ carousel = StreamField(
+ [("slide", SlideBlock())], verbose_name="obsah slideru", blank=True
+ )
header_links = StreamField(
[("link", LinkBlock())], verbose_name="odkazy v záhlaví", blank=True
)
@@ -179,6 +212,8 @@ class Elections2021HomePage(Page, MetadataPageMixin):
### PANELS
+ content_panels = Page.content_panels + [StreamFieldPanel("carousel")]
+
header_panels = [
StreamFieldPanel("header_links"),
PageChooserPanel(
@@ -213,7 +248,7 @@ class Elections2021HomePage(Page, MetadataPageMixin):
edit_handler = TabbedInterface(
[
- ObjectList(Page.content_panels, heading=gettext_lazy("Content")),
+ ObjectList(content_panels, heading=gettext_lazy("Content")),
ObjectList(promote_panels, heading=gettext_lazy("Promote")),
ObjectList(header_panels, heading="hlavička"),
ObjectList(footer_panels, heading="patička"),
diff --git a/elections2021/templates/elections2021/_carousel_slide.html b/elections2021/templates/elections2021/_carousel_slide.html
new file mode 100644
index 0000000000000000000000000000000000000000..c3181820c3d21fd563cb7d19c1d2bd336ce14660
--- /dev/null
+++ b/elections2021/templates/elections2021/_carousel_slide.html
@@ -0,0 +1,43 @@
+{% load wagtailcore_tags wagtailimages_tags %}
+<slide>
+ <div class="relative bg-lemon hero py-0 w-full bg-lemon flex flex-col-reverse md:flex-row">
+ <div class="md:w-7/12 h-96 md:h-full">
+ <picture class="flex w-full h-full">
+ {% image block.value.photo width-480 as img480 %}
+ {% image block.value.photo width-768 as img768 %}
+ {% image block.value.photo width-1120 as img1120 %}
+ {% image block.value.photo width-2240 as img2240 %}
+ <source srcset="{{ img480.url }} 480w, {{ img768.url }} 768w, {{ img1120.url }} 1120w, {{ img2240.url }} 2240w" sizes="(min-width: 768px) 50vw, 100vw" type="image/jpeg">
+ <img class="object-cover flex-grow" src="{{ img768.url }}" alt="{{ block.value.title }}" loading="lazy">
+ </picture>
+ </div>
+ <div class="md:w-5/12 px-5 md:px-8 xl:px-16 py-9 md:pt-12 xl:pt-16 md:relative h-full">
+ <h1 class="head-alt-md text-5xl xl:text-6xl pt-1 mb-5 max-w-xs md:max-w-sm">{{ block.value.title }}</h1>
+ <div class="md:absolute md:right-0 md:bottom-24 md:w-full md:px-8 xl:px-16 md:text-left">
+ {% if block.value.page %}
+ <a href="{% pageurl block.value.page %}">
+ <button class="btn btn--icon btn--hoveractive md:text-xl">
+ <div class="btn__body-wrap">
+ <div class="btn__body md:py-4 md:leading-5 hover:bg-grey-800">{{ block.value.button_label }}</div>
+ <div class="btn__icon bg-grey-800">
+ <i class="ico--chevron-right"></i>
+ </div>
+ </div>
+ </button>
+ </a>
+ {% elif block.value.raw_url %}
+ <a href="{{ block.value.raw_url }}">
+ <button class="btn btn--icon btn--hoveractive md:text-xl">
+ <div class="btn__body-wrap">
+ <div class="btn__body md:py-4 md:leading-5 hover:bg-grey-800">{{ block.value.button_label }}</div>
+ <div class="btn__icon bg-grey-800">
+ <i class="ico--chevron-right"></i>
+ </div>
+ </div>
+ </button>
+ </a>
+ {% endif %}
+ </div>
+ </div>
+ </div>
+</slide>
diff --git a/elections2021/templates/elections2021/elections2021_home_page.html b/elections2021/templates/elections2021/elections2021_home_page.html
index 6a7babc24779b0001deed8cdd14366a16e00daa6..c1a200e5d9ce84d855ab40d4e2094db6ebd90e7a 100644
--- a/elections2021/templates/elections2021/elections2021_home_page.html
+++ b/elections2021/templates/elections2021/elections2021_home_page.html
@@ -1,17 +1,21 @@
{% extends "elections2021/base.html" %}
-{% load wagtailcore_tags wagtailimages_tags %}
+{% load wagtailcore_tags %}
{% block content %}
-<article class="relative bg-lemon md:bg-split-color px-4 md:pl-8 md:pr-0 2xl:px-8 hero py-0 w-full ">
- <div class="2xl:container w-auto bg-lemon md:pl-20 pr-0 grid lg:grid-rows-1 h-64 lg:grid-cols-7 items-center 2xl:mx-auto">
- <div class="lg:row-span-1 lg:col-span-4 order-1 md:pr-20">
- <h1 class="head-alt-md sm:head-alt-lg pt-1 max-w-sm">Hodně<br>budeš někde</h1>
- </div>
- <div class="hidden lg:block lg:row-span-2 lg:col-span-3 order-2 h-full 2xl:absolute 2xl:right-0 2xl:w-1/3">
- </div>
- </div>
-</article>
-<div class="py-16">
+<div class="hero-slider __js-root">
+ <ui-app inline-template>
+ <ui-carousel>
+ <template v-slot:default="slotProps">
+ <!--<carousel :per-page=1 :autoplay="true" :autoplay-timeout="4000" :autoplay-hover-pause="false" :loop="true" :navigation-enabled="true" center-mode v-on:transition-end="slotProps.onthaslide" ref="homeCarrousel" class="pb-8">-->
+ <carousel :per-page=1 :autoplay="true" :autoplay-timeout="4000" :autoplay-hover-pause="false" :loop="true" :navigation-enabled="true" class="pb-8">
+ {% for block in page.carousel %}
+ {% include_block block %}
+ {% endfor %}
+ </carousel>
+ </template>
+ </ui-carousel>
+ </ui-app>
</div>
+
{% endblock %}