Skip to content
Snippets Groups Projects
Commit a63f601f authored by jan.bednarik's avatar jan.bednarik
Browse files

elections2021: Homepage slider

parent 84bc597b
No related branches found
No related tags found
2 merge requests!250Release,!249Volby
# 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",
),
),
]
......@@ -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"),
......
{% 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>
{% 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 %}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment