elections2021: Homepage slider

elections2021/migrations/0021_elections2021homepage_carousel.py

+# 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",
+            ),
+        ),
+    ]

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"),

elections2021/templates/elections2021/_carousel_slide.html

+{% 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>

elections2021/templates/elections2021/elections2021_home_page.html

 {% 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 %}