From d9882aa992abbfb403a8ecb88bd0c996301f0db7 Mon Sep 17 00:00:00 2001
From: "jindra12.underdark" <jindra12.underdark@gmail.com>
Date: Wed, 19 Apr 2023 01:19:47 +0200
Subject: [PATCH] Added full hero banner with dynamic images
#174
---
district/blocks.py | 35 ++-
.../0109_alter_districthomepage_subheader.py | 251 ++++++++++++++++++
district/models.py | 3 +-
.../district/blocks/hero_banner_block.html | 34 +++
4 files changed, 317 insertions(+), 6 deletions(-)
create mode 100644 district/migrations/0109_alter_districthomepage_subheader.py
create mode 100644 district/templates/district/blocks/hero_banner_block.html
diff --git a/district/blocks.py b/district/blocks.py
index f17fee7a..44e17e5f 100644
--- a/district/blocks.py
+++ b/district/blocks.py
@@ -1,5 +1,3 @@
-from django.db import models
-from django.forms.utils import ErrorList
from wagtail import blocks
from wagtail.blocks import (
BooleanBlock,
@@ -12,14 +10,11 @@ from wagtail.blocks import (
TextBlock,
URLBlock,
)
-from wagtail.blocks.struct_block import StructBlockValidationError
from wagtail.images.blocks import ImageChooserBlock
from shared.blocks import (
- ButtonBlock,
CardLinkBlockMixin,
CardLinkWithHeadlineBlockMixin,
- ChartBlock,
ProgramItemBlock,
)
@@ -296,3 +291,33 @@ class RedmineProgramBlock(StructBlock):
template = "district/blocks/program_block.html"
icon = "site"
label = "Blok programu stahovanĂ˝ z Redmine"
+
+
+class HeroBannerBlock(StructBlock):
+ sm_banner = ImageChooserBlock(
+ label="Obrázek pro zobrazenà menšà než 640px", required=True
+ )
+ md_banner = ImageChooserBlock(
+ label="Obrázek pro zobrazenà většà než 768px", required=True
+ )
+ lg_banner = ImageChooserBlock(
+ label="Obrázek pro zobrazenà většà než 1024px", required=True
+ )
+ xl_banner = ImageChooserBlock(
+ label="Obrázek pro zobrazenà většà než 1280px", required=True
+ )
+ xxl_banner = ImageChooserBlock(
+ label="Obrázek pro zobrazenà většà než 1536px", required=True
+ )
+
+ title = CharBlock(label="Titulek bloku", required=False)
+ button_text = CharBlock(label="Text tlaÄŤĂtka", required=True)
+ button_link = URLBlock(label="Odkaz tlaÄŤĂtka", required=True)
+
+ def clean(self, value):
+ return super().clean(value)
+
+ class Meta:
+ template = "district/blocks/hero_banner_block.html"
+ icon = "image"
+ label = "Hero banner"
diff --git a/district/migrations/0109_alter_districthomepage_subheader.py b/district/migrations/0109_alter_districthomepage_subheader.py
new file mode 100644
index 00000000..3c99d49e
--- /dev/null
+++ b/district/migrations/0109_alter_districthomepage_subheader.py
@@ -0,0 +1,251 @@
+# Generated by Django 4.1.8 on 2023-04-18 23:18
+
+import wagtail.blocks
+import wagtail.fields
+import wagtail.images.blocks
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+ dependencies = [
+ ("district", "0108_alter_districtcenterpage_content_and_more"),
+ ]
+
+ operations = [
+ migrations.AlterField(
+ model_name="districthomepage",
+ name="subheader",
+ field=wagtail.fields.StreamField(
+ [
+ (
+ "header_full_size",
+ wagtail.blocks.StructBlock(
+ [
+ (
+ "title",
+ wagtail.blocks.CharBlock(
+ label="Titulek", required=True
+ ),
+ ),
+ (
+ "image_background",
+ wagtail.images.blocks.ImageChooserBlock(
+ label="Obrázek v pozadĂ", required=True
+ ),
+ ),
+ (
+ "image_foreground",
+ wagtail.images.blocks.ImageChooserBlock(
+ label="Obrázek v popĹ™edĂ", required=False
+ ),
+ ),
+ (
+ "button_group",
+ wagtail.blocks.ListBlock(
+ wagtail.blocks.StructBlock(
+ [
+ (
+ "title",
+ wagtail.blocks.CharBlock(
+ label="Titulek",
+ max_length=128,
+ required=True,
+ ),
+ ),
+ (
+ "icon",
+ wagtail.blocks.CharBlock(
+ help_text="Identifikátor ikonky ze styleguide (https://styleguide.pirati.cz/latest/?p=viewall-atoms-icons), např. ico--key.",
+ label="Ikonka",
+ max_length=128,
+ required=False,
+ ),
+ ),
+ (
+ "size",
+ wagtail.blocks.ChoiceBlock(
+ choices=[
+ ("sm", "Malá"),
+ ("base", "StĹ™ednĂ"),
+ ("lg", "Velká"),
+ ],
+ label="Velikost",
+ ),
+ ),
+ (
+ "color",
+ wagtail.blocks.ChoiceBlock(
+ choices=[
+ ("black", "Černá"),
+ ("white", "BĂlá"),
+ ("grey-125", "Světle šedá"),
+ ("blue-300", "Modrá"),
+ ("cyan-200", "Tyrkysová"),
+ ("green-400", "Zelené"),
+ ("violet-400", "VĂnová"),
+ ("red-600", "Červená"),
+ ],
+ label="Barva",
+ ),
+ ),
+ (
+ "hoveractive",
+ wagtail.blocks.BooleanBlock(
+ default=True,
+ help_text="Pokud je zapnuto, tlaÄŤĂtko mÄ›nĂ barvu, kdyĹľ na nÄ›j uĹľivatel najede myšĂ.",
+ label="Animovat na hover",
+ required=False,
+ ),
+ ),
+ (
+ "mobile_fullwidth",
+ wagtail.blocks.BooleanBlock(
+ default=True,
+ help_text="Pokud je zapnuto, tlaÄŤĂtko se na mobilnĂch zaĹ™ĂzenĂch roztáhne na plnou šĂĹ™ku.",
+ label="Plná šĂĹ™ka na mobilnĂch zaĹ™ĂzenĂch",
+ required=False,
+ ),
+ ),
+ (
+ "page",
+ wagtail.blocks.PageChooserBlock(
+ label="Stránka", required=False
+ ),
+ ),
+ (
+ "link",
+ wagtail.blocks.URLBlock(
+ label="Odkaz", required=False
+ ),
+ ),
+ (
+ "align",
+ wagtail.blocks.ChoiceBlock(
+ choices=[
+ ("auto", "Automaticky"),
+ ("center", "Na střed"),
+ ],
+ label="ZarovnánĂ",
+ ),
+ ),
+ ]
+ ),
+ label="TlaÄŤĂtka",
+ ),
+ ),
+ ]
+ ),
+ ),
+ (
+ "header_simple",
+ wagtail.blocks.StructBlock(
+ [
+ (
+ "title",
+ wagtail.blocks.CharBlock(
+ label="Titulek", required=False
+ ),
+ ),
+ (
+ "subtitle",
+ wagtail.blocks.CharBlock(
+ label="Podtitulek", required=False
+ ),
+ ),
+ ("image", wagtail.images.blocks.ImageChooserBlock()),
+ ]
+ ),
+ ),
+ (
+ "header",
+ wagtail.blocks.StructBlock(
+ [
+ (
+ "title",
+ wagtail.blocks.CharBlock(
+ help_text="Nap", label="Titulek", required=False
+ ),
+ ),
+ ("image", wagtail.images.blocks.ImageChooserBlock()),
+ (
+ "button_text",
+ wagtail.blocks.CharBlock(
+ label="Text tlaÄŤĂtka", required=False
+ ),
+ ),
+ (
+ "button_link",
+ wagtail.blocks.URLBlock(
+ label="Odkaz tlaÄŤĂtka", required=False
+ ),
+ ),
+ ]
+ ),
+ ),
+ (
+ "hero_banner",
+ wagtail.blocks.StructBlock(
+ [
+ (
+ "sm_banner",
+ wagtail.images.blocks.ImageChooserBlock(
+ label="Obrázek pro zobrazenà menšà než 640px",
+ required=True,
+ ),
+ ),
+ (
+ "md_banner",
+ wagtail.images.blocks.ImageChooserBlock(
+ label="Obrázek pro zobrazenà většà než 768px",
+ required=True,
+ ),
+ ),
+ (
+ "lg_banner",
+ wagtail.images.blocks.ImageChooserBlock(
+ label="Obrázek pro zobrazenà většà než 1024px",
+ required=True,
+ ),
+ ),
+ (
+ "xl_banner",
+ wagtail.images.blocks.ImageChooserBlock(
+ label="Obrázek pro zobrazenà většà než 1280px",
+ required=True,
+ ),
+ ),
+ (
+ "xxl_banner",
+ wagtail.images.blocks.ImageChooserBlock(
+ label="Obrázek pro zobrazenà většà než 1536px",
+ required=True,
+ ),
+ ),
+ (
+ "title",
+ wagtail.blocks.CharBlock(
+ label="Titulek bloku", required=False
+ ),
+ ),
+ (
+ "button_text",
+ wagtail.blocks.CharBlock(
+ label="Text tlaÄŤĂtka", required=True
+ ),
+ ),
+ (
+ "button_link",
+ wagtail.blocks.URLBlock(
+ label="Odkaz tlaÄŤĂtka", required=True
+ ),
+ ),
+ ]
+ ),
+ ),
+ ],
+ blank=True,
+ use_json_field=True,
+ verbose_name="Blok pod headerem",
+ ),
+ ),
+ ]
diff --git a/district/models.py b/district/models.py
index 68270aba..cdd23804 100644
--- a/district/models.py
+++ b/district/models.py
@@ -59,7 +59,7 @@ from . import blocks
from .forms import JekyllImportForm
CONTENT_BLOCKS = DEFAULT_CONTENT_BLOCKS + [
- ("chart", ChartBlock(template="district/blocks/chart.html")),
+ ("chart", ChartBlock(template="district/blocks/chart.html"))
]
@@ -73,6 +73,7 @@ class DistrictHomePage(
("header_full_size", FullSizeHeaderBlock()),
("header_simple", blocks.HomepageSimpleHeaderBlock()),
("header", blocks.HomepageHeaderBlock()),
+ ("hero_banner", blocks.HeroBannerBlock()),
],
verbose_name="Blok pod headerem",
blank=True,
diff --git a/district/templates/district/blocks/hero_banner_block.html b/district/templates/district/blocks/hero_banner_block.html
new file mode 100644
index 00000000..732dab3c
--- /dev/null
+++ b/district/templates/district/blocks/hero_banner_block.html
@@ -0,0 +1,34 @@
+{% load wagtailimages_tags %}
+
+<div class="relative hero hero--image p-0 text-center md:text-left">
+ <picture aria-hidden="true">
+ {% image self.xxl_banner min-1280x1 as xxl_image %}
+ {% image self.xl_banner max-1280x2000 as xl_image %}
+ {% image self.lg_banner max-1024x2000 as lg_image %}
+ {% image self.md_banner max-768x2000 as md_image %}
+ {% image self.sm_banner max-640x2000 as sm_image %}
+
+ <source media="(min-width:1536px)" srcset="{{ request.scheme }}://{{ request.get_host }}{{ xxl_image.url }}">
+ <source media="(min-width:1280px)" srcset="{{ request.scheme }}://{{ request.get_host }}{{ xl_image.url }}">
+ <source media="(min-width:1024px)" srcset="{{ request.scheme }}://{{ request.get_host }}{{ lg_image.url }}">
+ <source media="(min-width:768px)" srcset="{{ request.scheme }}://{{ request.get_host }}{{ md_image.url }}">
+
+ <img src="{{ request.scheme }}://{{ request.get_host }}{{ sm_image.url }}" width="auto" class="w-full">
+ </picture>
+ <div class="absolute h-full w-full md:w-1/2" style="bottom: 0">{# TODO: Update style guide #}
+ <div class="flex h-full items-end md:items-center justify-center text-center lg:text-left">
+ <div class="mx-2 mb-10">
+ <h1 class="head-alt-lg md:head-alt-xl text-shadow-lg max-w-2xl mx-auto lg:mx-0">
+ {% firstof self.title page.title %}
+ </h1>
+ <div class="mt-4 md:mt-8 space-y-4">
+ <div class="w-100">
+ <a href="{{ self.button_link }}" class="btn btn--white btn--hoveractive text-base btn--fullwidth md:btn--autowidth">
+ <div class="btn__body ">{{ self.button_text }}</div>
+ </a>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+</div>
--
GitLab