Add subtitle to variable height hero banner

#170

district/blocks.py

+from django.forms.utils import ErrorList
 from wagtail import blocks
 from wagtail.blocks import (
     BooleanBlock,
@@ -10,6 +11,7 @@ from wagtail.blocks import (
     TextBlock,
     URLBlock,
 )
+from wagtail.blocks.struct_block import StructBlockValidationError
 from wagtail.images.blocks import ImageChooserBlock
 
 from shared.blocks import (
@@ -311,10 +313,26 @@ class HeroBannerBlock(StructBlock):
     )
 
     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)
+    subtitle = CharBlock(label="Podtitulek", required=False)
+    button_text = CharBlock(label="Text tlačítka", required=False)
+    button_link = URLBlock(label="Odkaz tlačítka", required=False)
 
     def clean(self, value):
+        errors = {}
+
+        if value["button_link"] and not value["button_text"]:
+            errors["button_text"] = ErrorList(
+                ["Zadejte prosím text tlačítka, nebo smažte odkaz v tlačítku"]
+            )
+
+        if not value["button_link"] and value["button_text"]:
+            errors["button_link"] = ErrorList(
+                ["Zadejte prosím odkaz tlačítka, nebo smažte text v tlačítku"]
+            )
+
+        if errors:
+            raise StructBlockValidationError(errors)
+
         return super().clean(value)
 
     class Meta:

district/migrations/0109_alter_districthomepage_subheader.py

-# Generated by Django 4.1.8 on 2023-04-18 23:18
+# Generated by Django 4.1.8 on 2023-04-24 22:33
 
 import wagtail.blocks
 import wagtail.fields
@@ -227,16 +227,22 @@ class Migration(migrations.Migration):
                                         label="Titulek bloku", required=False
                                     ),
                                 ),
+                                (
+                                    "subtitle",
+                                    wagtail.blocks.CharBlock(
+                                        label="Podtitulek", required=False
+                                    ),
+                                ),
                                 (
                                     "button_text",
                                     wagtail.blocks.CharBlock(
-                                        label="Text tlačítka", required=True
+                                        label="Text tlačítka", required=False
                                     ),
                                 ),
                                 (
                                     "button_link",
                                     wagtail.blocks.URLBlock(
-                                        label="Odkaz tlačítka", required=True
+                                        label="Odkaz tlačítka", required=False
                                     ),
                                 ),
                             ]

district/templates/district/blocks/hero_banner_block.html

@@ -8,12 +8,12 @@
         {% 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 }}">
+        <source media="(min-width:1536px)" srcset="{{ xxl_image.full_url }}">
+        <source media="(min-width:1280px)" srcset="{{ xl_image.full_url }}">
+        <source media="(min-width:1024px)" srcset="{{ lg_image.full_url }}">
+        <source media="(min-width:768px)" srcset="{{ md_image.full_url }}">
 
-        <img src="{{ request.scheme }}://{{ request.get_host }}{{ sm_image.url }}" width="auto" class="w-full">
+        <img src="{{ sm_image.full_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">
@@ -21,6 +21,12 @@
                 <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>
+                {% if self.subtitle %}
+                    <h2 class="head-xs mt-2 text-shadow-lg">
+                        {{ self.subtitle }}
+                    </h2>
+                {% endif %}
+                {% if self.button_link and self.button_text %}
                 <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">
@@ -28,6 +34,7 @@
                         </a>
                     </div>
                 </div>
+                {% endif %}
             </div>
         </div>
     </div>