From e4abc32ede7417fbe46e62e1d58cdef4208842a1 Mon Sep 17 00:00:00 2001 From: Amanda Lim-Cabuloy Date: Wed, 18 Dec 2024 16:54:58 +0800 Subject: [PATCH 01/20] Move PartersBlock to core.blocks --- tbx/core/blocks.py | 11 +++++++++++ tbx/services/blocks.py | 15 +-------------- 2 files changed, 12 insertions(+), 14 deletions(-) diff --git a/tbx/core/blocks.py b/tbx/core/blocks.py index 9c3e5c909..42ea8c85b 100644 --- a/tbx/core/blocks.py +++ b/tbx/core/blocks.py @@ -262,6 +262,17 @@ class Meta: template = "patterns/molecules/streamfield/blocks/contact_call_to_action.html" +class PartnersBlock(blocks.StructBlock): + title = blocks.CharBlock(max_length=255, required=False) + partner_logos = blocks.ListBlock(CustomImageChooserBlock(), label="Logos") + + class Meta: + icon = "openquote" + label = "Partner logos" + template = "patterns/molecules/streamfield/blocks/partners_block.html" + group = "Custom" + + class ShowcaseBlock(blocks.StructBlock): """ This block is a standard ShowcaseBlock, available on the home page and diff --git a/tbx/services/blocks.py b/tbx/services/blocks.py index 82f47c280..600a13501 100644 --- a/tbx/services/blocks.py +++ b/tbx/services/blocks.py @@ -1,9 +1,9 @@ from tbx.core.blocks import ( BlogChooserBlock, - CustomImageChooserBlock, EventBlock, FeaturedCaseStudyBlock, ImageWithAltTextBlock, + PartnersBlock, PhotoCollageBlock, PromoBlock, ShowcaseBlock, @@ -14,19 +14,6 @@ from wagtail import blocks -class PartnersBlock(blocks.StructBlock): - title = blocks.CharBlock( - max_length=255, - ) - partner_logos = blocks.ListBlock(CustomImageChooserBlock(), label="Logos") - - class Meta: - icon = "openquote" - label = "Partner logos" - template = "patterns/molecules/streamfield/blocks/partners_block.html" - group = "Custom" - - class ValuesBlock(blocks.StructBlock): title = blocks.CharBlock(max_length=255) intro = blocks.TextBlock(label="Introduction") From 84a704853a4e0b98fc770dcbe9b3d8d430034270 Mon Sep 17 00:00:00 2001 From: Amanda Lim-Cabuloy Date: Thu, 19 Dec 2024 15:44:13 +0800 Subject: [PATCH 02/20] Add divisions app --- tbx/divisions/__init__.py | 0 tbx/divisions/migrations/__init__.py | 0 tbx/settings/base.py | 1 + 3 files changed, 1 insertion(+) create mode 100644 tbx/divisions/__init__.py create mode 100644 tbx/divisions/migrations/__init__.py diff --git a/tbx/divisions/__init__.py b/tbx/divisions/__init__.py new file mode 100644 index 000000000..e69de29bb diff --git a/tbx/divisions/migrations/__init__.py b/tbx/divisions/migrations/__init__.py new file mode 100644 index 000000000..e69de29bb diff --git a/tbx/settings/base.py b/tbx/settings/base.py index c7da504ca..19798e657 100644 --- a/tbx/settings/base.py +++ b/tbx/settings/base.py @@ -40,6 +40,7 @@ "scout_apm.django", "tbx.blog", "tbx.core.apps.TorchboxCoreAppConfig", + "tbx.divisions", "tbx.events", "tbx.impact_reports", "tbx.navigation", From 7144e992a429949c9d13eb0e77e86ca0fc6ca9f1 Mon Sep 17 00:00:00 2001 From: Amanda Lim-Cabuloy Date: Thu, 19 Dec 2024 15:45:18 +0800 Subject: [PATCH 03/20] Prepare division page blocks --- tbx/core/blocks.py | 63 +++++++++++++++++++ .../blocks/dynamic_hero_block.html | 10 +++ .../blocks/dynamic_hero_block.yaml | 7 +++ .../blocks/four_photo_collage_block.html | 6 ++ .../blocks/four_photo_collage_block.yaml | 13 ++++ .../introduction_with_images_block.html | 12 ++++ .../introduction_with_images_block.yaml | 13 ++++ tbx/settings/base.py | 1 + 8 files changed, 125 insertions(+) create mode 100644 tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/dynamic_hero_block.html create mode 100644 tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/dynamic_hero_block.yaml create mode 100644 tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/four_photo_collage_block.html create mode 100644 tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/four_photo_collage_block.yaml create mode 100644 tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/introduction_with_images_block.html create mode 100644 tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/introduction_with_images_block.yaml diff --git a/tbx/core/blocks.py b/tbx/core/blocks.py index 42ea8c85b..42f389c22 100644 --- a/tbx/core/blocks.py +++ b/tbx/core/blocks.py @@ -10,6 +10,7 @@ from django.utils import timezone from django.utils.functional import cached_property from django.utils.safestring import mark_safe +from django.utils.translation import gettext as _ from tbx.images.models import CustomImage from wagtail import blocks @@ -262,6 +263,68 @@ class Meta: template = "patterns/molecules/streamfield/blocks/contact_call_to_action.html" +class DynamicHeroBlock(blocks.StructBlock): + """ + This block displays text that will be cycled through. + """ + + static_text = blocks.CharBlock(required=False) + dynamic_text = blocks.ListBlock( + blocks.CharBlock(), + help_text=_( + "The hero will cycle through these texts on larger screen sizes " + "and only show the first text on smaller screen sizes." + ), + required=False, + ) + + class Meta: + icon = "title" + template = "patterns/molecules/streamfield/blocks/dynamic_hero_block.html" + + +class FourPhotoCollageBlock(blocks.StructBlock): + """Accepts 4 photos shown as a collage. Used on the division page.""" + + images = blocks.ListBlock( + ImageWithAltTextBlock(label="Photo"), + min_num=4, + max_num=4, + label="Photos", + help_text=_("Exactly four required."), + default=[{"image": None, "alt_text": ""}] * 4, + ) + + class Meta: + group = "Custom" + icon = "image" + template = "patterns/molecules/streamfield/blocks/four_photo_collage_block.html" + + +class IntroductionWithImagesBlock(blocks.StructBlock): + """Used on the division page.""" + + introduction = blocks.RichTextBlock(features=settings.PARAGRAPH_RICH_TEXT_FEATURES) + description = blocks.RichTextBlock( + blank=True, features=settings.NO_HEADING_RICH_TEXT_FEATURES + ) + images = blocks.ListBlock( + ImageWithAltTextBlock(label="Photo"), + min_num=2, + max_num=2, + label="Photos", + help_text=_("Exactly two required."), + default=[{"image": None, "alt_text": ""}] * 2, + ) + + class Meta: + group = "Custom" + icon = "pilcrow" + template = ( + "patterns/molecules/streamfield/blocks/introduction_with_images_block.html" + ) + + class PartnersBlock(blocks.StructBlock): title = blocks.CharBlock(max_length=255, required=False) partner_logos = blocks.ListBlock(CustomImageChooserBlock(), label="Logos") diff --git a/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/dynamic_hero_block.html b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/dynamic_hero_block.html new file mode 100644 index 000000000..13c4da304 --- /dev/null +++ b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/dynamic_hero_block.html @@ -0,0 +1,10 @@ +
+ {% if value.static_text %}{{ value.static_text }}{% endif %} + {% if value.dynamic_text %} +
    + {% for text in value.dynamic_text %} +
  • {{ text }}
    • + {% endfor %} +
+ {% endif %} +
diff --git a/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/dynamic_hero_block.yaml b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/dynamic_hero_block.yaml new file mode 100644 index 000000000..bd89cbbb3 --- /dev/null +++ b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/dynamic_hero_block.yaml @@ -0,0 +1,7 @@ +context: + value: + static_text: We help charities and nonprofits + dynamic_text: + - 'future-proof your funding streams.' + - 'transform lives through digital innovation.' + - 'increase supporter acquisition and retention.' diff --git a/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/four_photo_collage_block.html b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/four_photo_collage_block.html new file mode 100644 index 000000000..4ac08f874 --- /dev/null +++ b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/four_photo_collage_block.html @@ -0,0 +1,6 @@ +{% load wagtailcore_tags wagtailimages_tags %} +
+ {% for item in value.images %} + {% srcset_image item.image format-webp loading="lazy" fill-{100x100} alt=item.image.alt_text %} + {% endfor %} +
diff --git a/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/four_photo_collage_block.yaml b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/four_photo_collage_block.yaml new file mode 100644 index 000000000..68854cf28 --- /dev/null +++ b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/four_photo_collage_block.yaml @@ -0,0 +1,13 @@ +context: + value: + images: + - image: + - image: + - image: + - image: + +tags: + srcset_image: + item.image format-webp loading="lazy" fill-{100x100} alt=item.image.alt_text: + raw: | + diff --git a/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/introduction_with_images_block.html b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/introduction_with_images_block.html new file mode 100644 index 000000000..65607a656 --- /dev/null +++ b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/introduction_with_images_block.html @@ -0,0 +1,12 @@ +{% load wagtailcore_tags wagtailimages_tags %} +
+
+ {% for item in value.images %} + {% srcset_image item.image format-webp loading="lazy" fill-{100x100} alt=item.image.alt_text %} + {% endfor %} +
+
+ {{ value.introduction|richtext }} + {% if value.description %}{{ value.description|richtext }}{% endif %} +
+
diff --git a/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/introduction_with_images_block.yaml b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/introduction_with_images_block.yaml new file mode 100644 index 000000000..1ea955451 --- /dev/null +++ b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/introduction_with_images_block.yaml @@ -0,0 +1,13 @@ +context: + value: + introduction: '

Wagtail is the leading open-source Python/Django CMS, designed to empower teams to do their best work.

' + description: '

As its creators, we know Wagtail inside out and our specialist services can help you get the most out of it.

' + images: + - image: + - image: + +tags: + srcset_image: + item.image format-webp loading="lazy" fill-{100x100} alt=item.image.alt_text: + raw: | + diff --git a/tbx/settings/base.py b/tbx/settings/base.py index 19798e657..4103ce7cf 100644 --- a/tbx/settings/base.py +++ b/tbx/settings/base.py @@ -647,6 +647,7 @@ "document-link", ] NO_HEADING_RICH_TEXT_FEATURES = ["bold", "italic", "ul", "ol", "link", "document-link"] +PARAGRAPH_RICH_TEXT_FEATURES = ["bold", "italic", "link", "document-link"] WAGTAILADMIN_RICH_TEXT_EDITORS = { "default": { "WIDGET": "wagtail.admin.rich_text.DraftailRichTextArea", From 643ff22b7eb06c7e80902146db98e5564f066e53 Mon Sep 17 00:00:00 2001 From: Amanda Lim-Cabuloy Date: Thu, 19 Dec 2024 15:50:22 +0800 Subject: [PATCH 04/20] Add DivisionPage --- tbx/divisions/blocks.py | 12 +++++ tbx/divisions/models.py | 50 +++++++++++++++++++ .../streamfield/division_story_container.html | 2 + .../streamfield/division_story_container.yaml | 5 ++ .../streamfield/stream_block_division.html | 7 +++ .../streamfield/stream_block_division.yaml | 8 +++ .../pages/divisions/division_page.html | 14 ++++++ .../pages/divisions/division_page.yaml | 13 +++++ 8 files changed, 111 insertions(+) create mode 100644 tbx/divisions/blocks.py create mode 100644 tbx/divisions/models.py create mode 100644 tbx/project_styleguide/templates/patterns/_pattern_library_only/streamfield/division_story_container.html create mode 100644 tbx/project_styleguide/templates/patterns/_pattern_library_only/streamfield/division_story_container.yaml create mode 100644 tbx/project_styleguide/templates/patterns/molecules/streamfield/stream_block_division.html create mode 100644 tbx/project_styleguide/templates/patterns/molecules/streamfield/stream_block_division.yaml create mode 100644 tbx/project_styleguide/templates/patterns/pages/divisions/division_page.html create mode 100644 tbx/project_styleguide/templates/patterns/pages/divisions/division_page.yaml diff --git a/tbx/divisions/blocks.py b/tbx/divisions/blocks.py new file mode 100644 index 000000000..643f6a4b5 --- /dev/null +++ b/tbx/divisions/blocks.py @@ -0,0 +1,12 @@ +from tbx.core.blocks import ( + FourPhotoCollageBlock, + IntroductionWithImagesBlock, + PartnersBlock, + StoryBlock, +) + + +class DivisionStoryBlock(StoryBlock): + four_photo_collage = FourPhotoCollageBlock() + introduction_with_images = IntroductionWithImagesBlock() + partners_block = PartnersBlock() diff --git a/tbx/divisions/models.py b/tbx/divisions/models.py new file mode 100644 index 000000000..3a3804d61 --- /dev/null +++ b/tbx/divisions/models.py @@ -0,0 +1,50 @@ +from django.db import models + +from tbx.core.blocks import DynamicHeroBlock +from tbx.core.utils.fields import StreamField +from tbx.core.utils.models import ( + ColourThemeMixin, + NavigationFields, + SocialFields, +) +from tbx.people.models import ContactMixin +from wagtail.admin.panels import FieldPanel, MultiFieldPanel +from wagtail.models import Page + +from .blocks import DivisionStoryBlock + + +class DivisionPage( + ColourThemeMixin, ContactMixin, SocialFields, NavigationFields, Page +): + template = "patterns/pages/divisions/division_page.html" + + label = models.CharField(blank=True, max_length=50) + + hero = StreamField([("hero", DynamicHeroBlock())], max_num=1, min_num=1) + body = StreamField(DivisionStoryBlock(), blank=True) + + content_panels = Page.content_panels + [ + FieldPanel( + "label", + heading="Division label", + help_text=( + "Label displayed beside the logo for this page and any other pages" + " under this division. (e.g. Charity)" + ), + ), + FieldPanel("hero"), + FieldPanel("body"), + ] + + promote_panels = ( + [ + MultiFieldPanel(Page.promote_panels, "Common page configuration"), + ] + + NavigationFields.promote_panels + + ColourThemeMixin.promote_panels + + ContactMixin.promote_panels + + [ + MultiFieldPanel(SocialFields.promote_panels, "Social fields"), + ] + ) diff --git a/tbx/project_styleguide/templates/patterns/_pattern_library_only/streamfield/division_story_container.html b/tbx/project_styleguide/templates/patterns/_pattern_library_only/streamfield/division_story_container.html new file mode 100644 index 000000000..8b47d7a5f --- /dev/null +++ b/tbx/project_styleguide/templates/patterns/_pattern_library_only/streamfield/division_story_container.html @@ -0,0 +1,2 @@ + +{% include "patterns/molecules/streamfield/blocks/introduction_with_images_block.html" %} diff --git a/tbx/project_styleguide/templates/patterns/_pattern_library_only/streamfield/division_story_container.yaml b/tbx/project_styleguide/templates/patterns/_pattern_library_only/streamfield/division_story_container.yaml new file mode 100644 index 000000000..c24ff6b33 --- /dev/null +++ b/tbx/project_styleguide/templates/patterns/_pattern_library_only/streamfield/division_story_container.yaml @@ -0,0 +1,5 @@ +tags: + srcset_image: + item.image format-webp loading="lazy" fill-{100x100} alt=item.image.alt_text: + raw: | + diff --git a/tbx/project_styleguide/templates/patterns/molecules/streamfield/stream_block_division.html b/tbx/project_styleguide/templates/patterns/molecules/streamfield/stream_block_division.html new file mode 100644 index 000000000..2d497788d --- /dev/null +++ b/tbx/project_styleguide/templates/patterns/molecules/streamfield/stream_block_division.html @@ -0,0 +1,7 @@ +{% load wagtailcore_tags %} + +{% if value %} + {% for block in value %} + {% include_block block with unique_id=block.id %} + {% endfor %} +{% endif %} diff --git a/tbx/project_styleguide/templates/patterns/molecules/streamfield/stream_block_division.yaml b/tbx/project_styleguide/templates/patterns/molecules/streamfield/stream_block_division.yaml new file mode 100644 index 000000000..a84df542a --- /dev/null +++ b/tbx/project_styleguide/templates/patterns/molecules/streamfield/stream_block_division.yaml @@ -0,0 +1,8 @@ +context: + value: + - dummy + +tags: + include_block: + block with unique_id=block.id: + template_name: 'patterns/_pattern_library_only/streamfield/division_story_container.html' diff --git a/tbx/project_styleguide/templates/patterns/pages/divisions/division_page.html b/tbx/project_styleguide/templates/patterns/pages/divisions/division_page.html new file mode 100644 index 000000000..b455ff849 --- /dev/null +++ b/tbx/project_styleguide/templates/patterns/pages/divisions/division_page.html @@ -0,0 +1,14 @@ +{% extends "patterns/base_page.html" %} +{% load wagtailcore_tags %} + +{% block content %} + +

Title: {{ page.title }}

+ +

Label for logo: {{ page.label }}

+ + {% include_block page.hero %} + + {% include_block page.body %} + +{% endblock content %} diff --git a/tbx/project_styleguide/templates/patterns/pages/divisions/division_page.yaml b/tbx/project_styleguide/templates/patterns/pages/divisions/division_page.yaml new file mode 100644 index 000000000..652f254b2 --- /dev/null +++ b/tbx/project_styleguide/templates/patterns/pages/divisions/division_page.yaml @@ -0,0 +1,13 @@ +context: + page: + title: Charity + label: Charity + +tags: + include_block: + page.hero: + template_name: 'patterns/molecules/streamfield/blocks/dynamic_hero_block.html' + page.introduction: + template_name: 'patterns/molecules/streamfield/blocks/introduction_section_block.html' + page.body: + template_name: 'patterns/molecules/streamfield/stream_block_division.html' From a38b9d1619141e459615f8c67d4e3006a978651b Mon Sep 17 00:00:00 2001 From: Amanda Lim-Cabuloy Date: Thu, 19 Dec 2024 15:51:33 +0800 Subject: [PATCH 05/20] Make schema migration --- tbx/divisions/migrations/0001_initial.py | 89 ++++++++++++++++++++++++ 1 file changed, 89 insertions(+) create mode 100644 tbx/divisions/migrations/0001_initial.py diff --git a/tbx/divisions/migrations/0001_initial.py b/tbx/divisions/migrations/0001_initial.py new file mode 100644 index 000000000..42069f64e --- /dev/null +++ b/tbx/divisions/migrations/0001_initial.py @@ -0,0 +1,89 @@ +# Generated by Django 4.2.16 on 2024-12-18 08:18 + +from django.db import migrations, models +import django.db.models.deletion +import tbx.core.utils.fields + + +class Migration(migrations.Migration): + + initial = True + + dependencies = [ + ("wagtailcore", "0094_alter_page_locale"), + ("people", "0011_update_theme_colour_choices"), + ("images", "0001_initial"), + ] + + operations = [ + migrations.CreateModel( + name="DivisionPage", + fields=[ + ( + "page_ptr", + models.OneToOneField( + auto_created=True, + on_delete=django.db.models.deletion.CASCADE, + parent_link=True, + primary_key=True, + serialize=False, + to="wagtailcore.page", + ), + ), + ( + "navigation_text", + models.CharField( + blank=True, + help_text="\n Text entered here will appear instead of the page title in the navigation menu.\n For top-level menu items do this in the navigaiton settings instead.\n ", + max_length=255, + ), + ), + ("social_text", models.CharField(blank=True, max_length=255)), + ( + "theme", + models.CharField( + blank=True, + choices=[ + ("", "None"), + ("theme-coral", "Coral"), + ("theme-nebuline", "Nebuline"), + ("theme-lagoon", "Lagoon"), + ("theme-green", "Green"), + ], + max_length=25, + ), + ), + ("label", models.CharField(blank=True, max_length=50)), + ("hero", tbx.core.utils.fields.StreamField(block_lookup={})), + ( + "body", + tbx.core.utils.fields.StreamField(blank=True, block_lookup={}), + ), + ( + "contact", + models.ForeignKey( + blank=True, + help_text="The contact will be applied to this page's footer and all of its descendants.\nIf no contact is selected, it will be derived from this page's ancestors, eventually falling back to the default contact.", + null=True, + on_delete=django.db.models.deletion.SET_NULL, + related_name="+", + to="people.contact", + ), + ), + ( + "social_image", + models.ForeignKey( + blank=True, + null=True, + on_delete=django.db.models.deletion.SET_NULL, + related_name="+", + to="images.customimage", + ), + ), + ], + options={ + "abstract": False, + }, + bases=("wagtailcore.page", models.Model), + ), + ] From aa3dfd65443510f15becb7ce4995321b4ccdb94a Mon Sep 17 00:00:00 2001 From: Amanda Lim-Cabuloy Date: Thu, 19 Dec 2024 20:04:36 +0800 Subject: [PATCH 06/20] Add faker & factory-boy as explicit dependencies since we use them --- poetry.lock | 2 +- pyproject.toml | 2 ++ 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/poetry.lock b/poetry.lock index 7283684e7..2d22e17b2 100644 --- a/poetry.lock +++ b/poetry.lock @@ -2807,4 +2807,4 @@ gunicorn = ["gunicorn"] [metadata] lock-version = "2.0" python-versions = "^3.11" -content-hash = "d9d6169e366ec79c49f3c7d629a063e5d84f826df3379c23903203e07f96eee4" +content-hash = "bee797e229653ab172e11cdcad1196a4a88aa507259302fc857ff10a178691fd" diff --git a/pyproject.toml b/pyproject.toml index 1f651c7d6..17af4983a 100644 --- a/pyproject.toml +++ b/pyproject.toml @@ -66,6 +66,8 @@ mkdocs-material = "^9.5.41" pymdown-extensions = "^10.11.2" # Testing +factory-boy = "^3.3.0" +faker = "^24.11.0" wagtail-factories = "^4.2.1" From 6663d23008983521d7f05faea337ada103c8320e Mon Sep 17 00:00:00 2001 From: Amanda Lim-Cabuloy Date: Thu, 19 Dec 2024 20:05:18 +0800 Subject: [PATCH 07/20] Create DivisionPage factory --- tbx/core/factories.py | 23 +++++++++++++++++--- tbx/core/tests/test_models.py | 41 +++++++++++++++++++++++++++++------ tbx/divisions/factories.py | 36 ++++++++++++++++++++++++++++++ 3 files changed, 90 insertions(+), 10 deletions(-) create mode 100644 tbx/divisions/factories.py diff --git a/tbx/core/factories.py b/tbx/core/factories.py index f31a8b9b7..9ec00c80f 100644 --- a/tbx/core/factories.py +++ b/tbx/core/factories.py @@ -1,13 +1,30 @@ import factory import wagtail_factories -from tbx.core.blocks import StoryBlock +from faker import Faker +from tbx.core.blocks import DynamicHeroBlock, StoryBlock from tbx.core.models import HomePage, StandardPage -from wagtail.blocks import RichTextBlock +from wagtail import blocks + +fake = Faker() + + +class DynamicHeroBlockFactory(wagtail_factories.StructBlockFactory): + class Meta: + model = DynamicHeroBlock + + static_text = fake.sentence() + + @factory.post_generation + def dynamic_text(obj, create, extracted, **kwargs): + values = extracted or fake.sentences(nb=5) + obj["dynamic_text"] = blocks.list_block.ListValue( + blocks.ListBlock(blocks.CharBlock()), values + ) class RichTextBlockFactory(wagtail_factories.blocks.BlockFactory): class Meta: - model = RichTextBlock + model = blocks.RichTextBlock class StoryBlockFactory(wagtail_factories.StreamBlockFactory): diff --git a/tbx/core/tests/test_models.py b/tbx/core/tests/test_models.py index d80226088..57c9fabe6 100644 --- a/tbx/core/tests/test_models.py +++ b/tbx/core/tests/test_models.py @@ -1,6 +1,10 @@ +from django.apps import apps +from django.test import TestCase +from django.utils.module_loading import import_string, module_has_submodule + from tbx.core.factories import HomePageFactory, StandardPageFactory from tbx.core.models import HomePage, StandardPage -from wagtail.models import Site +from wagtail.models import Page, Site from wagtail.test.utils import WagtailPageTestCase from wagtail.test.utils.form_data import ( nested_form_data, @@ -9,14 +13,37 @@ ) -class TestHomePageFactory(WagtailPageTestCase): - def test_create(self): - HomePageFactory() +class TestPageFactory(TestCase): + """Sanity tests to make sure all pages have a factory.""" + + # Exclude these modules from the check. + # (They currently don't have factories. Un-exclude once they have factories.) + EXCLUDE = ["tbx.events", "tbx.impact_reports", "tbx.services"] + + def test_pages(self): + app_configs = apps.get_app_configs() + home_page = HomePageFactory() + + # Create one of every page type using their factory. + for app in app_configs: + for model in app.models.values(): + if issubclass(model, Page) and model not in [Page, HomePage]: + if app.name in self.EXCLUDE: + continue + + with self.subTest(model=model.__name__): + # Get the model's factory + assert module_has_submodule( + app.module, "factories" + ), f"App '{app.name}' does not have a factories module." + + page_factory = import_string( + f"{app.module.__name__}.factories.{model.__name__}Factory" + ) + page = page_factory(parent=home_page) -class TestStandardPageFactory(WagtailPageTestCase): - def test_create(self): - StandardPageFactory() + self.assertIsInstance(page, model) class TestStandardPage(WagtailPageTestCase): diff --git a/tbx/divisions/factories.py b/tbx/divisions/factories.py new file mode 100644 index 000000000..d606dbb61 --- /dev/null +++ b/tbx/divisions/factories.py @@ -0,0 +1,36 @@ +import factory +import wagtail_factories +from tbx.core.blocks import DynamicHeroBlock +from tbx.core.factories import DynamicHeroBlockFactory, StoryBlockFactory +from wagtail import blocks + +from .models import DivisionPage + + +class DynamicHeroStreamBlock(blocks.StreamBlock): + hero = DynamicHeroBlock() + + +class DynamicHeroStreamBlockFactory(wagtail_factories.StreamBlockFactory): + class Meta: + model = DynamicHeroStreamBlock + + hero = factory.SubFactory(DynamicHeroBlockFactory) + + +class DivisionPageFactory(wagtail_factories.PageFactory): + class Meta: + model = DivisionPage + + title = "Charity" + label = "Charity" + + @factory.post_generation + def hero(obj, create, extracted, **kwargs): + blocks = kwargs or {"0": "hero"} + obj.hero = DynamicHeroStreamBlockFactory(**blocks) + + @factory.post_generation + def body(obj, create, extracted, **kwargs): + blocks = kwargs or {"0": "paragraph"} + obj.body = StoryBlockFactory(**blocks) From bc24e99e07bab90651509b777715dd22530680b4 Mon Sep 17 00:00:00 2001 From: Amanda Lim-Cabuloy Date: Thu, 19 Dec 2024 20:28:31 +0800 Subject: [PATCH 08/20] Do something different if there's only 1 dynamic text --- .../streamfield/blocks/dynamic_hero_block.html | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/dynamic_hero_block.html b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/dynamic_hero_block.html index 13c4da304..60ff7d776 100644 --- a/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/dynamic_hero_block.html +++ b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/dynamic_hero_block.html @@ -1,10 +1,18 @@
{% if value.static_text %}{{ value.static_text }}{% endif %} {% if value.dynamic_text %} -
    + {% if value.dynamic_text|length > 1 %} + {# If there's more than one dynamic text, show the controls for the loop. #} +
      + {% for text in value.dynamic_text %} +
    • {{ text }}
      • + {% endfor %} +
    + {% else %} + {# If there's only one dynamic text, don't show the controls for the loop. #} {% for text in value.dynamic_text %} -
  • {{ text }}
    • + {{ text }} {% endfor %} -
+ {% endif %} {% endif %}
From 685f6ccfc56e16ae278b257c726077a575023a6d Mon Sep 17 00:00:00 2001 From: Amanda Lim-Cabuloy Date: Fri, 20 Dec 2024 17:00:00 +0800 Subject: [PATCH 09/20] Add 'caption' to four-photo collage --- tbx/core/blocks.py | 5 ++++- .../streamfield/blocks/four_photo_collage_block.html | 3 +++ .../streamfield/blocks/four_photo_collage_block.yaml | 1 + 3 files changed, 8 insertions(+), 1 deletion(-) diff --git a/tbx/core/blocks.py b/tbx/core/blocks.py index 42f389c22..754724ca7 100644 --- a/tbx/core/blocks.py +++ b/tbx/core/blocks.py @@ -284,7 +284,7 @@ class Meta: class FourPhotoCollageBlock(blocks.StructBlock): - """Accepts 4 photos shown as a collage. Used on the division page.""" + """Accepts 4 photos shown as a collage + text below. Used on the division page.""" images = blocks.ListBlock( ImageWithAltTextBlock(label="Photo"), @@ -294,6 +294,9 @@ class FourPhotoCollageBlock(blocks.StructBlock): help_text=_("Exactly four required."), default=[{"image": None, "alt_text": ""}] * 4, ) + caption = blocks.RichTextBlock( + features=settings.PARAGRAPH_RICH_TEXT_FEATURES, required=False + ) class Meta: group = "Custom" diff --git a/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/four_photo_collage_block.html b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/four_photo_collage_block.html index 4ac08f874..a03676623 100644 --- a/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/four_photo_collage_block.html +++ b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/four_photo_collage_block.html @@ -3,4 +3,7 @@ {% for item in value.images %} {% srcset_image item.image format-webp loading="lazy" fill-{100x100} alt=item.image.alt_text %} {% endfor %} + {% if value.caption %} + {{ value.caption|richtext }} + {% endif %} diff --git a/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/four_photo_collage_block.yaml b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/four_photo_collage_block.yaml index 68854cf28..e6aff3cc9 100644 --- a/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/four_photo_collage_block.yaml +++ b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/four_photo_collage_block.yaml @@ -1,5 +1,6 @@ context: value: + caption: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. images: - image: - image: From 2f380c1ca1ed1f08ff5d51ab33cab3bca66bcb4e Mon Sep 17 00:00:00 2001 From: Albina Starykova Date: Wed, 8 Jan 2025 17:20:30 +0100 Subject: [PATCH 10/20] Draft intro with images block --- .../blocks/four_photo_collage_block.html | 15 +++-- .../blocks/four_photo_collage_block.yaml | 4 +- .../introduction_with_images_block.html | 12 ++-- .../introduction_with_images_block.yaml | 4 +- .../pages/divisions/division_page.html | 12 ++-- .../sass/components/_four-photo-collage.scss | 12 ++++ tbx/static_src/sass/components/_grid.scss | 10 +++ .../sass/components/_intro-with-images.scss | 62 +++++++++++++++++++ tbx/static_src/sass/main.scss | 2 + 9 files changed, 113 insertions(+), 20 deletions(-) create mode 100644 tbx/static_src/sass/components/_four-photo-collage.scss create mode 100644 tbx/static_src/sass/components/_intro-with-images.scss diff --git a/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/four_photo_collage_block.html b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/four_photo_collage_block.html index a03676623..f7b8405e7 100644 --- a/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/four_photo_collage_block.html +++ b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/four_photo_collage_block.html @@ -1,9 +1,14 @@ {% load wagtailcore_tags wagtailimages_tags %} -
- {% for item in value.images %} - {% srcset_image item.image format-webp loading="lazy" fill-{100x100} alt=item.image.alt_text %} - {% endfor %} +
+ {# Note the tabindex is important here as it makes the div focussable, meaning that the scrollbar can be operated with the keyboard #} +
+
+ {% for item in value.images %} + {% srcset_image item.image format-webp loading="lazy" fill-{500x500} class="photo-collage__image" alt=item.image.alt_text %} + {% endfor %} +
+
{% if value.caption %} - {{ value.caption|richtext }} +
{{ value.caption|richtext }}
{% endif %}
diff --git a/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/four_photo_collage_block.yaml b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/four_photo_collage_block.yaml index e6aff3cc9..c70ef507b 100644 --- a/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/four_photo_collage_block.yaml +++ b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/four_photo_collage_block.yaml @@ -9,6 +9,6 @@ context: tags: srcset_image: - item.image format-webp loading="lazy" fill-{100x100} alt=item.image.alt_text: + item.image format-webp loading="lazy" fill-{500x500} alt=item.image.alt_text: raw: | - + diff --git a/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/introduction_with_images_block.html b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/introduction_with_images_block.html index 65607a656..ae49b6ec0 100644 --- a/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/introduction_with_images_block.html +++ b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/introduction_with_images_block.html @@ -1,12 +1,12 @@ {% load wagtailcore_tags wagtailimages_tags %} -
-
+
+
{% for item in value.images %} - {% srcset_image item.image format-webp loading="lazy" fill-{100x100} alt=item.image.alt_text %} + {% srcset_image item.image format-webp loading="lazy" fill-{200x300,300x460,400x610} sizes="(max-width: 598px) 150px, (max-width: 799px) 300px, (max-width: 1021px) 10px, (min-width: 1022px) 10px" class="intro-with-images__image" alt=item.image_alt_text %} {% endfor %}
-
- {{ value.introduction|richtext }} - {% if value.description %}{{ value.description|richtext }}{% endif %} +
+
{{ value.introduction|richtext }}
+ {% if value.description %}
{{ value.description|richtext }}
{% endif %}
diff --git a/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/introduction_with_images_block.yaml b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/introduction_with_images_block.yaml index 1ea955451..5459db90d 100644 --- a/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/introduction_with_images_block.yaml +++ b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/introduction_with_images_block.yaml @@ -8,6 +8,4 @@ context: tags: srcset_image: - item.image format-webp loading="lazy" fill-{100x100} alt=item.image.alt_text: - raw: | - + \ No newline at end of file diff --git a/tbx/project_styleguide/templates/patterns/pages/divisions/division_page.html b/tbx/project_styleguide/templates/patterns/pages/divisions/division_page.html index b455ff849..510baa7ea 100644 --- a/tbx/project_styleguide/templates/patterns/pages/divisions/division_page.html +++ b/tbx/project_styleguide/templates/patterns/pages/divisions/division_page.html @@ -3,12 +3,16 @@ {% block content %} -

Title: {{ page.title }}

+
+
+

{{ page.title }}

-

Label for logo: {{ page.label }}

+

{{ page.label }}

+
- {% include_block page.hero %} +
{% include_block page.hero %}
- {% include_block page.body %} + {% include_block page.body %} +
{% endblock content %} diff --git a/tbx/static_src/sass/components/_four-photo-collage.scss b/tbx/static_src/sass/components/_four-photo-collage.scss new file mode 100644 index 000000000..e9c77c017 --- /dev/null +++ b/tbx/static_src/sass/components/_four-photo-collage.scss @@ -0,0 +1,12 @@ +@use 'config' as *; + +.four-photo-collage { + &__container { + display: grid; + margin-bottom: $spacer-medium; + + @include media-query(large) { + margin-bottom: $spacer-small-plus; + } + } +} diff --git a/tbx/static_src/sass/components/_grid.scss b/tbx/static_src/sass/components/_grid.scss index 38a0705c7..b07872207 100644 --- a/tbx/static_src/sass/components/_grid.scss +++ b/tbx/static_src/sass/components/_grid.scss @@ -52,6 +52,16 @@ } } + &__intro-with-images { + grid-column: 1 / span 6; + margin-bottom: $spacer-small-plus; + + @include media-query(large) { + margin-bottom: $spacer-large; + grid-column: 2 / span 13; + } + } + &__quote { margin-bottom: $spacer-medium; grid-column: 2 / span 4; diff --git a/tbx/static_src/sass/components/_intro-with-images.scss b/tbx/static_src/sass/components/_intro-with-images.scss new file mode 100644 index 000000000..cc769bea6 --- /dev/null +++ b/tbx/static_src/sass/components/_intro-with-images.scss @@ -0,0 +1,62 @@ +@use 'config' as *; + +.intro-with-images { + display: flex; + flex-direction: column; + gap: $spacer-medium; + + @include media-query(large) { + flex-direction: row-reverse; + justify-content: flex-end; + } + + @include media-query(x-large) { + // gap: $spacer-large; + } + + &__collage { + flex-basis: 40%; + display: flex; + gap: $spacer-mini-plus; + margin-right: $spacer-mini-plus; + + + @include media-query(medium) { + max-width: 80vw; + } + } + + &__image { + width: 100%; + + &:first-child { + margin-top: $spacer-small-plus; + + + @include media-query(large) { + margin-top: $spacer-medium; + } + } + + &:last-child { + margin-bottom: $spacer-small-plus; + + + @include media-query(large) { + margin-bottom: $spacer-medium; + } + } + } + + &__text { + flex-basis: 40%; + margin: 0 $spacer-small; + display: flex; + flex-direction: column; + gap: $spacer-small-plus; + + @include media-query(large) { + margin: $spacer-half 0 0; + } + } +} diff --git a/tbx/static_src/sass/main.scss b/tbx/static_src/sass/main.scss index deafcf436..6e12c478f 100755 --- a/tbx/static_src/sass/main.scss +++ b/tbx/static_src/sass/main.scss @@ -25,12 +25,14 @@ @use 'components/footer'; @use 'components/footer-cta'; @use 'components/form'; +@use 'components/four-photo-collage'; @use 'components/grid'; @use 'components/header'; @use 'components/home-page-hero'; @use 'components/home-page-intro'; @use 'components/image'; @use 'components/instagram-gallery'; +@use 'components/intro-with-images'; @use 'components/link'; @use 'components/listing'; @use 'components/listing-avatar'; From aa1299924fdbdccacac5362312dec2a5e3383830 Mon Sep 17 00:00:00 2001 From: Amanda Lim-Cabuloy Date: Thu, 9 Jan 2025 15:44:41 +0800 Subject: [PATCH 11/20] Add small_caption to FourPhotoCollageBlock --- tbx/core/blocks.py | 3 +++ .../molecules/streamfield/blocks/four_photo_collage_block.html | 3 +++ .../molecules/streamfield/blocks/four_photo_collage_block.yaml | 3 ++- 3 files changed, 8 insertions(+), 1 deletion(-) diff --git a/tbx/core/blocks.py b/tbx/core/blocks.py index 754724ca7..77a8fa833 100644 --- a/tbx/core/blocks.py +++ b/tbx/core/blocks.py @@ -297,6 +297,9 @@ class FourPhotoCollageBlock(blocks.StructBlock): caption = blocks.RichTextBlock( features=settings.PARAGRAPH_RICH_TEXT_FEATURES, required=False ) + small_caption = blocks.RichTextBlock( + features=settings.PARAGRAPH_RICH_TEXT_FEATURES, required=False + ) class Meta: group = "Custom" diff --git a/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/four_photo_collage_block.html b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/four_photo_collage_block.html index a03676623..862188eb1 100644 --- a/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/four_photo_collage_block.html +++ b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/four_photo_collage_block.html @@ -6,4 +6,7 @@ {% if value.caption %} {{ value.caption|richtext }} {% endif %} + {% if value.small_caption %} + {{ value.small_caption|richtext }} + {% endif %}
diff --git a/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/four_photo_collage_block.yaml b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/four_photo_collage_block.yaml index e6aff3cc9..5acbd99fa 100644 --- a/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/four_photo_collage_block.yaml +++ b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/four_photo_collage_block.yaml @@ -1,6 +1,7 @@ context: value: - caption: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + caption: '

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

' + small_caption: '

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

' images: - image: - image: From 0fc85ec1d3ad3ba2e98ecc73d11a702b728da5ab Mon Sep 17 00:00:00 2001 From: Albina Starykova Date: Thu, 9 Jan 2025 12:29:04 +0100 Subject: [PATCH 12/20] Division page FE --- .../blocks/four_photo_collage_block.html | 8 +- .../blocks/four_photo_collage_block.yaml | 4 +- .../introduction_with_images_block.html | 4 +- .../introduction_with_images_block.yaml | 3 +- .../styleguide/components/components.html | 10 ++ .../styleguide/components/components.yaml | 8 ++ .../sass/components/_four-photo-collage.scss | 110 ++++++++++++++++-- tbx/static_src/sass/components/_grid.scss | 14 ++- .../sass/components/_intro-with-images.scss | 102 +++++++++------- 9 files changed, 200 insertions(+), 63 deletions(-) diff --git a/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/four_photo_collage_block.html b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/four_photo_collage_block.html index f7b8405e7..931d7951b 100644 --- a/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/four_photo_collage_block.html +++ b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/four_photo_collage_block.html @@ -1,10 +1,12 @@ {% load wagtailcore_tags wagtailimages_tags %} -
+
{# Note the tabindex is important here as it makes the div focussable, meaning that the scrollbar can be operated with the keyboard #} -
+
{% for item in value.images %} - {% srcset_image item.image format-webp loading="lazy" fill-{500x500} class="photo-collage__image" alt=item.image.alt_text %} +
+ {% srcset_image item.image format-webp loading="lazy" fill-{500x500,600x600} sizes="(max-width: 1022px) 600px, 500px" class="four-photo-collage__image" alt=item.image.alt_text %} +
{% endfor %}
diff --git a/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/four_photo_collage_block.yaml b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/four_photo_collage_block.yaml index c70ef507b..572127884 100644 --- a/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/four_photo_collage_block.yaml +++ b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/four_photo_collage_block.yaml @@ -9,6 +9,6 @@ context: tags: srcset_image: - item.image format-webp loading="lazy" fill-{500x500} alt=item.image.alt_text: + 'item.image format-webp loading="lazy" fill-{500x500,600x600} sizes="(max-width: 1022px) 600px, 500px" class="four-photo-collage__image" alt=item.image.alt_text': raw: | - + diff --git a/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/introduction_with_images_block.html b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/introduction_with_images_block.html index ae49b6ec0..82a2f08cc 100644 --- a/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/introduction_with_images_block.html +++ b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/introduction_with_images_block.html @@ -2,11 +2,11 @@
{% for item in value.images %} - {% srcset_image item.image format-webp loading="lazy" fill-{200x300,300x460,400x610} sizes="(max-width: 598px) 150px, (max-width: 799px) 300px, (max-width: 1021px) 10px, (min-width: 1022px) 10px" class="intro-with-images__image" alt=item.image_alt_text %} + {% srcset_image item.image format-webp loading="lazy" fill-{200x300,400x600,600x900} sizes="(max-width: 598px) 150px, (max-width: 799px) 300px, 700px" class="intro-with-images__image" alt=item.image_alt_text %} {% endfor %}
-
{{ value.introduction|richtext }}
+
{{ value.introduction|richtext }}
{% if value.description %}
{{ value.description|richtext }}
{% endif %}
diff --git a/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/introduction_with_images_block.yaml b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/introduction_with_images_block.yaml index 5459db90d..c80f90561 100644 --- a/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/introduction_with_images_block.yaml +++ b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/introduction_with_images_block.yaml @@ -8,4 +8,5 @@ context: tags: srcset_image: - \ No newline at end of file + 'item.image format-webp loading="lazy" fill-{200x300,400x600,600x900} sizes="(max-width: 598px) 150px, (max-width: 799px) 300px, 700px" class="intro-with-images__image" alt=item.image_alt_text': + raw: 'alt' diff --git a/tbx/project_styleguide/templates/patterns/styleguide/components/components.html b/tbx/project_styleguide/templates/patterns/styleguide/components/components.html index a08d43ba4..485b3390c 100644 --- a/tbx/project_styleguide/templates/patterns/styleguide/components/components.html +++ b/tbx/project_styleguide/templates/patterns/styleguide/components/components.html @@ -149,6 +149,16 @@

Photo collage block

{% include "patterns/molecules/streamfield/blocks/photo_collage_block.html" %}
+
+

Four photo collage block

+ {% include "patterns/molecules/streamfield/blocks/four_photo_collage_block.html" %} +
+ +
+

Introduction with images block

+ {% include "patterns/molecules/streamfield/blocks/introduction_with_images_block.html" %} +
+

Tabbed paragraph block

{% include "patterns/molecules/streamfield/blocks/tabbed_paragraph_block.html" %} diff --git a/tbx/project_styleguide/templates/patterns/styleguide/components/components.yaml b/tbx/project_styleguide/templates/patterns/styleguide/components/components.yaml index a11ec09e7..5cd04562f 100644 --- a/tbx/project_styleguide/templates/patterns/styleguide/components/components.yaml +++ b/tbx/project_styleguide/templates/patterns/styleguide/components/components.yaml @@ -107,6 +107,14 @@ tags: 'item.image format-webp loading="lazy" fill-{288x288,576x576} sizes="(max-width: 598px) 576px, (min-width: 599px) 288px" class="photo-collage__image" alt=item.image_alt_text': raw: | alt text + # four photo collage block + 'item.image format-webp loading="lazy" fill-{500x500,600x600} sizes="(max-width: 1022px) 600px, 500px" class="four-photo-collage__image" alt=item.image.alt_text': + raw: | + + # introduction with images block + 'item.image format-webp loading="lazy" fill-{200x300,400x600,600x900} sizes="(max-width: 598px) 150px, (max-width: 799px) 300px, 700px" class="intro-with-images__image" alt=item.image_alt_text': + raw: | + alt text # values block 'value_item.image.image format-webp width-{482,964} sizes="(max-width: 598px) 100vw, (min-width: 599px) 30vw" loading="lazy" class="values__image"': raw: 'test alt' diff --git a/tbx/static_src/sass/components/_four-photo-collage.scss b/tbx/static_src/sass/components/_four-photo-collage.scss index e9c77c017..eb8e18af7 100644 --- a/tbx/static_src/sass/components/_four-photo-collage.scss +++ b/tbx/static_src/sass/components/_four-photo-collage.scss @@ -1,12 +1,106 @@ @use 'config' as *; .four-photo-collage { - &__container { - display: grid; - margin-bottom: $spacer-medium; - - @include media-query(large) { - margin-bottom: $spacer-small-plus; - } - } + &__scroller { + width: 100%; + overflow-x: scroll; + margin-bottom: $spacer-medium; + + @include media-query(large) { + overflow-x: visible; + width: auto; + margin-bottom: $spacer-small-plus; + } + + &:focus { + @include focus-style(); + } + } + + &__container { + display: flex; + column-gap: 10px; + height: 270px; + + @include media-query(small) { + height: 370px; + } + + @include media-query(medium) { + height: 403px; + } + + @include media-query(large) { + display: grid; + height: auto; + // based on the size we want the images to render + grid-template-columns: + minmax(100px, 200px) minmax(60px, 120px) minmax(210px, 420px) + minmax(320px, 640px); + grid-template-rows: minmax(180px, 360px) minmax(230px, 460px) minmax( + 40px, + 80px + ); + gap: $spacer-mini-plus; + // ensures the individual images remain at the correct aspect ratio + aspect-ratio: 7 / 4; + } + } + + // These styles could just be applied direct to the images without a wrapper, + // but we do it on the wrapper to save having to mock loads of images with different + // classes in the pattern library + &__image-wrapper { + @include media-query(large) { + height: auto; + } + + // Some browsers seem to need the aspect ratio set explicitly on each image wrapper at mobile + // but this needs unsetting at desltop + &--1 { + aspect-ratio: 4 / 3; + + @include media-query(large) { + grid-column: 1 / span 2; + grid-row: 1 / span 1; + aspect-ratio: auto; + } + } + + &--2 { + aspect-ratio: 4 / 3; + + @include media-query(large) { + grid-column: 3 / span 1; + grid-row: 1 / span 1; + aspect-ratio: auto; + } + } + + &--3 { + aspect-ratio: 3 / 4; + + @include media-query(large) { + grid-column: 4 / span 1; + grid-row: 1 / span 3; + aspect-ratio: auto; + } + } + + &--4 { + aspect-ratio: 7 / 5; + + @include media-query(large) { + grid-column: 2 / span 2; + grid-row: 2 / span 1; + aspect-ratio: auto; + } + } + } + + &__image { + width: 100%; + height: 100%; + object-fit: cover; + } } diff --git a/tbx/static_src/sass/components/_grid.scss b/tbx/static_src/sass/components/_grid.scss index b07872207..24e866904 100644 --- a/tbx/static_src/sass/components/_grid.scss +++ b/tbx/static_src/sass/components/_grid.scss @@ -53,12 +53,12 @@ } &__intro-with-images { - grid-column: 1 / span 6; + grid-column: 1 / span 5; margin-bottom: $spacer-small-plus; @include media-query(large) { margin-bottom: $spacer-large; - grid-column: 2 / span 13; + grid-column: 2 / span 12; } } @@ -191,6 +191,16 @@ } } + &__four-photo-collage { + grid-column: 2 / span 5; + margin-bottom: $spacer-medium; + + @include media-query(large) { + grid-column: 3 / span 11; + margin-bottom: $spacer; + } + } + &__promo, &__event { grid-column: 2 / span 5; diff --git a/tbx/static_src/sass/components/_intro-with-images.scss b/tbx/static_src/sass/components/_intro-with-images.scss index cc769bea6..c0c5b35c9 100644 --- a/tbx/static_src/sass/components/_intro-with-images.scss +++ b/tbx/static_src/sass/components/_intro-with-images.scss @@ -1,62 +1,74 @@ @use 'config' as *; .intro-with-images { - display: flex; - flex-direction: column; - gap: $spacer-medium; + display: grid; + gap: $spacer-medium; - @include media-query(large) { - flex-direction: row-reverse; - justify-content: flex-end; - } + @include media-query(large) { + grid-template-columns: 1fr 1fr; + margin-right: -20px; // extend outside the grid + } - @include media-query(x-large) { - // gap: $spacer-large; - } + @include media-query(x-large) { + gap: $spacer-large; + } - &__collage { - flex-basis: 40%; - display: flex; - gap: $spacer-mini-plus; - margin-right: $spacer-mini-plus; + &__collage { + display: grid; + grid-template-columns: 1fr 1fr; + gap: $spacer-mini-plus; + @include media-query(medium) { + max-width: 80vw; + } - @include media-query(medium) { - max-width: 80vw; - } - } + @include media-query(large) { + grid-column: 2 / span 1; + } + } - &__image { - width: 100%; + &__image { + width: 100%; - &:first-child { - margin-top: $spacer-small-plus; + &:first-child { + margin-top: $spacer-small-plus; + @include media-query(large) { + margin-top: $spacer-medium; + } + } - @include media-query(large) { - margin-top: $spacer-medium; - } - } + &:last-child { + margin-bottom: $spacer-small-plus; - &:last-child { - margin-bottom: $spacer-small-plus; + @include media-query(large) { + margin-bottom: $spacer-medium; + } + } + } + &__text { + margin: 0 $spacer-small; + display: flex; + flex-direction: column; + gap: $spacer-small-plus; - @include media-query(large) { - margin-bottom: $spacer-medium; - } - } - } + @include media-query(large) { + margin: $spacer-half 0 0; + grid-column: 1 / span 1; + grid-row: 1; + } + } - &__text { - flex-basis: 40%; - margin: 0 $spacer-small; - display: flex; - flex-direction: column; - gap: $spacer-small-plus; - - @include media-query(large) { - margin: $spacer-half 0 0; - } - } + &__title { + a { + // override rich text link color styles + .rich-text & { + @include link-styles( + var(--color--heading), + var(--color--heading) + ); + } + } + } } From 7ba6958ed5a700c6727d6aac3de71038550b9efd Mon Sep 17 00:00:00 2001 From: Albina Starykova Date: Thu, 9 Jan 2025 13:25:30 +0100 Subject: [PATCH 13/20] Fine-tune layout --- .../blocks/four_photo_collage_block.html | 4 ++-- .../sass/components/_four-photo-collage.scss | 13 +++++++++++++ tbx/static_src/sass/components/_grid.scss | 2 +- 3 files changed, 16 insertions(+), 3 deletions(-) diff --git a/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/four_photo_collage_block.html b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/four_photo_collage_block.html index 931d7951b..fc0052d50 100644 --- a/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/four_photo_collage_block.html +++ b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/four_photo_collage_block.html @@ -1,5 +1,5 @@ {% load wagtailcore_tags wagtailimages_tags %} -
+
{# Note the tabindex is important here as it makes the div focussable, meaning that the scrollbar can be operated with the keyboard #}
@@ -11,6 +11,6 @@
{% if value.caption %} -
{{ value.caption|richtext }}
+
{{ value.caption|richtext }}
{% endif %}
diff --git a/tbx/static_src/sass/components/_four-photo-collage.scss b/tbx/static_src/sass/components/_four-photo-collage.scss index eb8e18af7..dca0c273d 100644 --- a/tbx/static_src/sass/components/_four-photo-collage.scss +++ b/tbx/static_src/sass/components/_four-photo-collage.scss @@ -1,15 +1,20 @@ @use 'config' as *; .four-photo-collage { + display: grid; + grid-template-columns: subgrid; + &__scroller { width: 100%; overflow-x: scroll; margin-bottom: $spacer-medium; + grid-column: 1 / span 5; @include media-query(large) { overflow-x: visible; width: auto; margin-bottom: $spacer-small-plus; + grid-column: 2 / span 11; } &:focus { @@ -103,4 +108,12 @@ height: 100%; object-fit: cover; } + + &__caption { + grid-column: 1 / span 4; + + @include media-query(large) { + grid-column: 1 / span 7; + } + } } diff --git a/tbx/static_src/sass/components/_grid.scss b/tbx/static_src/sass/components/_grid.scss index 24e866904..7b8e586b1 100644 --- a/tbx/static_src/sass/components/_grid.scss +++ b/tbx/static_src/sass/components/_grid.scss @@ -196,7 +196,7 @@ margin-bottom: $spacer-medium; @include media-query(large) { - grid-column: 3 / span 11; + grid-column: 2 / span 12; margin-bottom: $spacer; } } From 8010faa22a12ecf1687f75d230cec5c068f76428 Mon Sep 17 00:00:00 2001 From: Amanda Lim-Cabuloy Date: Mon, 13 Jan 2025 17:14:29 +0800 Subject: [PATCH 14/20] Remove gettext from tbx/core/blocks.py --- tbx/core/blocks.py | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/tbx/core/blocks.py b/tbx/core/blocks.py index 77a8fa833..70de8edfc 100644 --- a/tbx/core/blocks.py +++ b/tbx/core/blocks.py @@ -10,7 +10,6 @@ from django.utils import timezone from django.utils.functional import cached_property from django.utils.safestring import mark_safe -from django.utils.translation import gettext as _ from tbx.images.models import CustomImage from wagtail import blocks @@ -271,7 +270,7 @@ class DynamicHeroBlock(blocks.StructBlock): static_text = blocks.CharBlock(required=False) dynamic_text = blocks.ListBlock( blocks.CharBlock(), - help_text=_( + help_text=( "The hero will cycle through these texts on larger screen sizes " "and only show the first text on smaller screen sizes." ), @@ -291,7 +290,7 @@ class FourPhotoCollageBlock(blocks.StructBlock): min_num=4, max_num=4, label="Photos", - help_text=_("Exactly four required."), + help_text="Exactly four required.", default=[{"image": None, "alt_text": ""}] * 4, ) caption = blocks.RichTextBlock( @@ -319,7 +318,7 @@ class IntroductionWithImagesBlock(blocks.StructBlock): min_num=2, max_num=2, label="Photos", - help_text=_("Exactly two required."), + help_text="Exactly two required.", default=[{"image": None, "alt_text": ""}] * 2, ) From 958434bb29523e3600236d9eaf52ccba7dba3e17 Mon Sep 17 00:00:00 2001 From: Amanda Lim-Cabuloy Date: Mon, 13 Jan 2025 17:15:40 +0800 Subject: [PATCH 15/20] Rename small_caption to description --- tbx/core/blocks.py | 2 +- .../streamfield/blocks/four_photo_collage_block.html | 4 ++-- .../streamfield/blocks/four_photo_collage_block.yaml | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/tbx/core/blocks.py b/tbx/core/blocks.py index 70de8edfc..03b1ee3aa 100644 --- a/tbx/core/blocks.py +++ b/tbx/core/blocks.py @@ -296,7 +296,7 @@ class FourPhotoCollageBlock(blocks.StructBlock): caption = blocks.RichTextBlock( features=settings.PARAGRAPH_RICH_TEXT_FEATURES, required=False ) - small_caption = blocks.RichTextBlock( + description = blocks.RichTextBlock( features=settings.PARAGRAPH_RICH_TEXT_FEATURES, required=False ) diff --git a/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/four_photo_collage_block.html b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/four_photo_collage_block.html index 862188eb1..2896f4fc0 100644 --- a/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/four_photo_collage_block.html +++ b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/four_photo_collage_block.html @@ -6,7 +6,7 @@ {% if value.caption %} {{ value.caption|richtext }} {% endif %} - {% if value.small_caption %} - {{ value.small_caption|richtext }} + {% if value.description %} + {{ value.description|richtext }} {% endif %}
diff --git a/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/four_photo_collage_block.yaml b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/four_photo_collage_block.yaml index 5acbd99fa..2b7ece7e4 100644 --- a/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/four_photo_collage_block.yaml +++ b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/four_photo_collage_block.yaml @@ -1,7 +1,7 @@ context: value: caption: '

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

' - small_caption: '

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

' + description: '

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

' images: - image: - image: From 60249d24b02626e7005f1e96d2218144a1c714fd Mon Sep 17 00:00:00 2001 From: Amanda Lim-Cabuloy Date: Mon, 13 Jan 2025 17:16:11 +0800 Subject: [PATCH 16/20] Remove empty line --- .../streamfield/division_story_container.html | 1 - 1 file changed, 1 deletion(-) diff --git a/tbx/project_styleguide/templates/patterns/_pattern_library_only/streamfield/division_story_container.html b/tbx/project_styleguide/templates/patterns/_pattern_library_only/streamfield/division_story_container.html index 8b47d7a5f..a0f2edeb6 100644 --- a/tbx/project_styleguide/templates/patterns/_pattern_library_only/streamfield/division_story_container.html +++ b/tbx/project_styleguide/templates/patterns/_pattern_library_only/streamfield/division_story_container.html @@ -1,2 +1 @@ - {% include "patterns/molecules/streamfield/blocks/introduction_with_images_block.html" %} From d23d6c99aedeca9ea0d64d50bc40ec262f4b3c17 Mon Sep 17 00:00:00 2001 From: Amanda Lim-Cabuloy Date: Mon, 13 Jan 2025 17:17:55 +0800 Subject: [PATCH 17/20] Remove stream_block_division.html --- .../molecules/streamfield/stream_block_division.html | 7 ------- .../molecules/streamfield/stream_block_division.yaml | 8 -------- .../templates/patterns/pages/divisions/division_page.yaml | 2 +- 3 files changed, 1 insertion(+), 16 deletions(-) delete mode 100644 tbx/project_styleguide/templates/patterns/molecules/streamfield/stream_block_division.html delete mode 100644 tbx/project_styleguide/templates/patterns/molecules/streamfield/stream_block_division.yaml diff --git a/tbx/project_styleguide/templates/patterns/molecules/streamfield/stream_block_division.html b/tbx/project_styleguide/templates/patterns/molecules/streamfield/stream_block_division.html deleted file mode 100644 index 2d497788d..000000000 --- a/tbx/project_styleguide/templates/patterns/molecules/streamfield/stream_block_division.html +++ /dev/null @@ -1,7 +0,0 @@ -{% load wagtailcore_tags %} - -{% if value %} - {% for block in value %} - {% include_block block with unique_id=block.id %} - {% endfor %} -{% endif %} diff --git a/tbx/project_styleguide/templates/patterns/molecules/streamfield/stream_block_division.yaml b/tbx/project_styleguide/templates/patterns/molecules/streamfield/stream_block_division.yaml deleted file mode 100644 index a84df542a..000000000 --- a/tbx/project_styleguide/templates/patterns/molecules/streamfield/stream_block_division.yaml +++ /dev/null @@ -1,8 +0,0 @@ -context: - value: - - dummy - -tags: - include_block: - block with unique_id=block.id: - template_name: 'patterns/_pattern_library_only/streamfield/division_story_container.html' diff --git a/tbx/project_styleguide/templates/patterns/pages/divisions/division_page.yaml b/tbx/project_styleguide/templates/patterns/pages/divisions/division_page.yaml index 652f254b2..a3dd0464a 100644 --- a/tbx/project_styleguide/templates/patterns/pages/divisions/division_page.yaml +++ b/tbx/project_styleguide/templates/patterns/pages/divisions/division_page.yaml @@ -10,4 +10,4 @@ tags: page.introduction: template_name: 'patterns/molecules/streamfield/blocks/introduction_section_block.html' page.body: - template_name: 'patterns/molecules/streamfield/stream_block_division.html' + template_name: 'patterns/_pattern_library_only/streamfield/division_story_container.html' From 7d82a84d16e8c3a972540e2f49d0f5d2c8c649c9 Mon Sep 17 00:00:00 2001 From: Amanda Lim-Cabuloy Date: Mon, 13 Jan 2025 18:36:39 +0800 Subject: [PATCH 18/20] Add other blocks to the Division page story container --- .../streamfield/division_story_container.html | 2 ++ .../streamfield/division_story_container.yaml | 11 +++++++++++ 2 files changed, 13 insertions(+) diff --git a/tbx/project_styleguide/templates/patterns/_pattern_library_only/streamfield/division_story_container.html b/tbx/project_styleguide/templates/patterns/_pattern_library_only/streamfield/division_story_container.html index a0f2edeb6..0128ec31f 100644 --- a/tbx/project_styleguide/templates/patterns/_pattern_library_only/streamfield/division_story_container.html +++ b/tbx/project_styleguide/templates/patterns/_pattern_library_only/streamfield/division_story_container.html @@ -1 +1,3 @@ {% include "patterns/molecules/streamfield/blocks/introduction_with_images_block.html" %} +{% include "patterns/molecules/streamfield/blocks/partners_block.html" %} +{% include "patterns/molecules/streamfield/blocks/four_photo_collage_block.html" %} diff --git a/tbx/project_styleguide/templates/patterns/_pattern_library_only/streamfield/division_story_container.yaml b/tbx/project_styleguide/templates/patterns/_pattern_library_only/streamfield/division_story_container.yaml index c24ff6b33..e7ee95921 100644 --- a/tbx/project_styleguide/templates/patterns/_pattern_library_only/streamfield/division_story_container.yaml +++ b/tbx/project_styleguide/templates/patterns/_pattern_library_only/streamfield/division_story_container.yaml @@ -1,5 +1,16 @@ tags: + # Introduction with images block & Four photo collage block srcset_image: item.image format-webp loading="lazy" fill-{100x100} alt=item.image.alt_text: raw: | + # Partners block + image: + partner_logo max-107x107 format-webp as partner_logo_image: + target_var: partner_logo_image + raw: + url: 'https://picsum.photos/107/107.webp' + partner_logo max-214x214 format-webp as partner_logo_image_retina: + target_var: partner_logo_image_retina + raw: + url: 'https://picsum.photos/214/214.webp' From 0072a1ba737d76bb0e0ea995791d40af76113b6b Mon Sep 17 00:00:00 2001 From: Albina Starykova Date: Mon, 13 Jan 2025 17:19:59 +0100 Subject: [PATCH 19/20] Fix aspect ratio for mobile, alt text, and rich-text styles --- .../streamfield/blocks/four_photo_collage_block.html | 4 ++-- .../streamfield/blocks/four_photo_collage_block.yaml | 2 +- tbx/static_src/sass/components/_four-photo-collage.scss | 4 +++- tbx/static_src/sass/components/_photo-collage.scss | 2 +- 4 files changed, 7 insertions(+), 5 deletions(-) diff --git a/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/four_photo_collage_block.html b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/four_photo_collage_block.html index fc0052d50..f459f1199 100644 --- a/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/four_photo_collage_block.html +++ b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/four_photo_collage_block.html @@ -5,12 +5,12 @@
{% for item in value.images %}
- {% srcset_image item.image format-webp loading="lazy" fill-{500x500,600x600} sizes="(max-width: 1022px) 600px, 500px" class="four-photo-collage__image" alt=item.image.alt_text %} + {% srcset_image item.image format-webp loading="lazy" fill-{500x500,600x600} sizes="(max-width: 1022px) 600px, 500px" class="four-photo-collage__image" alt=item.alt_text %}
{% endfor %}
{% if value.caption %} -
{{ value.caption|richtext }}
+
{{ value.caption|richtext }}
{% endif %}
diff --git a/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/four_photo_collage_block.yaml b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/four_photo_collage_block.yaml index 572127884..a7d88165c 100644 --- a/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/four_photo_collage_block.yaml +++ b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/four_photo_collage_block.yaml @@ -9,6 +9,6 @@ context: tags: srcset_image: - 'item.image format-webp loading="lazy" fill-{500x500,600x600} sizes="(max-width: 1022px) 600px, 500px" class="four-photo-collage__image" alt=item.image.alt_text': + 'item.image format-webp loading="lazy" fill-{500x500,600x600} sizes="(max-width: 1022px) 600px, 500px" class="four-photo-collage__image" alt=item.alt_text': raw: | diff --git a/tbx/static_src/sass/components/_four-photo-collage.scss b/tbx/static_src/sass/components/_four-photo-collage.scss index dca0c273d..cdc8684b8 100644 --- a/tbx/static_src/sass/components/_four-photo-collage.scss +++ b/tbx/static_src/sass/components/_four-photo-collage.scss @@ -26,6 +26,8 @@ display: flex; column-gap: 10px; height: 270px; + // calculated based on the total width of the images rendered at the correct aspect ratio plus the 10px gap + aspect-ratio: 1946 / 403; @include media-query(small) { height: 370px; @@ -61,7 +63,7 @@ } // Some browsers seem to need the aspect ratio set explicitly on each image wrapper at mobile - // but this needs unsetting at desltop + // but this needs unsetting at desktop &--1 { aspect-ratio: 4 / 3; diff --git a/tbx/static_src/sass/components/_photo-collage.scss b/tbx/static_src/sass/components/_photo-collage.scss index 559eea553..5245f10eb 100644 --- a/tbx/static_src/sass/components/_photo-collage.scss +++ b/tbx/static_src/sass/components/_photo-collage.scss @@ -122,7 +122,7 @@ } // Some browsers seem to need the aspect ratio set explicitly on each image wrapper at mobile - // but this needs unsetting at desltop + // but this needs unsetting at desktop &--1 { aspect-ratio: 1 / 1; From 1e0359bee142b22f33f27274cd50b7db4f27e10b Mon Sep 17 00:00:00 2001 From: Amanda Lim-Cabuloy Date: Tue, 14 Jan 2025 11:08:59 +0800 Subject: [PATCH 20/20] Only allow creation of DivisionPage under HomePage And creation of HomePage under the Root Wagtail Page --- tbx/core/models.py | 3 +++ tbx/divisions/models.py | 2 ++ 2 files changed, 5 insertions(+) diff --git a/tbx/core/models.py b/tbx/core/models.py index b857d2c9c..578e1a8bb 100644 --- a/tbx/core/models.py +++ b/tbx/core/models.py @@ -135,6 +135,9 @@ class HomePagePartnerLogo(Orderable): # Home Page class HomePage(ColourThemeMixin, ContactMixin, SocialFields, NavigationFields, Page): template = "patterns/pages/home/home_page.html" + + parent_page_types = ["wagtailcore.Page"] + hero_heading_1 = models.CharField(max_length=255) hero_heading_2 = models.CharField(max_length=255) hero_introduction = RichTextField(blank=True, features=["bold", "italic", "link"]) diff --git a/tbx/divisions/models.py b/tbx/divisions/models.py index 3a3804d61..b30b623d2 100644 --- a/tbx/divisions/models.py +++ b/tbx/divisions/models.py @@ -19,6 +19,8 @@ class DivisionPage( ): template = "patterns/pages/divisions/division_page.html" + parent_page_types = ["torchbox.HomePage"] + label = models.CharField(blank=True, max_length=50) hero = StreamField([("hero", DynamicHeroBlock())], max_num=1, min_num=1)