diff --git a/tbx/blog/migrations/0030_blogindexpage_introduction_and_page_links.py b/tbx/blog/migrations/0030_blogindexpage_introduction_and_page_links.py new file mode 100644 index 000000000..0ebc84c92 --- /dev/null +++ b/tbx/blog/migrations/0030_blogindexpage_introduction_and_page_links.py @@ -0,0 +1,26 @@ +# Generated by Django 5.2.5 on 2025-10-22 09:34 + +from django.db import migrations, models + +import tbx.core.utils.fields + + +class Migration(migrations.Migration): + dependencies = [ + ("blog", "0029_relatedblogpage"), + ] + + operations = [ + migrations.AddField( + model_name="blogindexpage", + name="introduction", + field=models.TextField(blank=True), + ), + migrations.AddField( + model_name="blogindexpage", + name="page_links", + field=tbx.core.utils.fields.StreamField( + blank=True, block_lookup={}, help_text="Add up to 3 styled page links." + ), + ), + ] diff --git a/tbx/blog/models.py b/tbx/blog/models.py index ae127df5e..dc69b859a 100644 --- a/tbx/blog/models.py +++ b/tbx/blog/models.py @@ -23,7 +23,7 @@ from bs4 import BeautifulSoup -from tbx.core.blocks import StoryBlock +from tbx.core.blocks import StoryBlock, StyledPageLinkBlock from tbx.core.models import BasePage from tbx.core.utils.fields import StreamField from tbx.core.utils.models import ( @@ -37,9 +37,26 @@ class BlogIndexPage(BasePage): template = "patterns/pages/blog/blog_listing.html" - subpage_types = ["BlogPage"] + introduction = models.TextField( + blank=True, + ) + + page_links = StreamField( + [ + ("styled_page_link", StyledPageLinkBlock()), + ], + blank=True, + max_num=3, + help_text="Add up to 3 styled page links.", + ) + + content_panels = BasePage.content_panels + [ + FieldPanel("introduction"), + FieldPanel("page_links"), + ] + @cached_property def taxonomy_slugs(self): services = Service.objects.values_list("slug", flat=True) diff --git a/tbx/core/blocks.py b/tbx/core/blocks.py index 22cbca4dc..e2d92f29b 100644 --- a/tbx/core/blocks.py +++ b/tbx/core/blocks.py @@ -32,6 +32,12 @@ logger = logging.getLogger(__name__) +class ColourTheme(models.TextChoices): + CORAL = "theme-coral", "Coral" + NEBULINE = "theme-nebuline", "Nebuline" + LAGOON = "theme-lagoon", "Lagoon" + + class LinkStructValue(blocks.StructValue): @cached_property def url(self): @@ -48,6 +54,28 @@ def text(self): return page.title +class StyledPageLinkBlock(blocks.StructBlock): + """ + A styled page link block with optional title and style choices. + """ + + page = blocks.PageChooserBlock() + title = blocks.CharBlock( + required=False, + help_text="Optional custom title. If not provided, the page title will be used.", + ) + style = blocks.ChoiceBlock( + choices=ColourTheme.choices, + default=ColourTheme.CORAL, + help_text="Choose the visual style for this link.", + ) + + class Meta: + icon = "link" + label = "Styled Page Link" + template = "patterns/molecules/streamfield/blocks/styled_page_link_block.html" + + class InternalLinkBlock(blocks.StructBlock): page = blocks.PageChooserBlock() link_text = blocks.CharBlock(required=False) @@ -553,11 +581,6 @@ class IconChoice(models.TextChoices): class DivisionSignpostCardBlock(blocks.StructBlock): - class ColourTheme(models.TextChoices): - CORAL = "theme-coral", "Coral" - NEBULINE = "theme-nebuline", "Nebuline" - LAGOON = "theme-lagoon", "Lagoon" - card_colour = blocks.ChoiceBlock( choices=ColourTheme.choices, default=ColourTheme.CORAL, max_length=20 ) diff --git a/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/styled_page_link_block.html b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/styled_page_link_block.html new file mode 100644 index 000000000..c541e4136 --- /dev/null +++ b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/styled_page_link_block.html @@ -0,0 +1,9 @@ +{% load wagtailcore_tags %} + + + {% if value.title %} + {{ value.title }} + {% else %} + {{ value.page.title }} + {% endif %} + diff --git a/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/styled_page_link_block.yaml b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/styled_page_link_block.yaml new file mode 100644 index 000000000..6f3ce47e9 --- /dev/null +++ b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/styled_page_link_block.yaml @@ -0,0 +1,12 @@ +context: + value: + page: + title: Charity + url: '#' + title: Charity + style: charity + +tags: + pageurl: + value.page: + raw: '#' diff --git a/tbx/project_styleguide/templates/patterns/molecules/title-filters/title-filters.html b/tbx/project_styleguide/templates/patterns/molecules/title-filters/title-filters.html index 29f82ddec..cc1fb3260 100644 --- a/tbx/project_styleguide/templates/patterns/molecules/title-filters/title-filters.html +++ b/tbx/project_styleguide/templates/patterns/molecules/title-filters/title-filters.html @@ -1,11 +1,29 @@ {% load wagtailcore_tags %} -
+

{{ item.title }}

- {% if tags and not hide_tags %} + {% if introduction or page_links %} +
+ {% if introduction %} +
+

{{ introduction|linebreaksbr }}

+
+ {% endif %} + + {% if page_links %} +
+ {% for block in page_links %} + {% include_block block %} + {% endfor %} +
+ {% endif %} +
+ {% endif %} + + {% if tags and not introduction and not page_links %}

Filter by category

diff --git a/tbx/project_styleguide/templates/patterns/pages/blog/blog_listing.html b/tbx/project_styleguide/templates/patterns/pages/blog/blog_listing.html index b82a2fabd..3f9ca4494 100644 --- a/tbx/project_styleguide/templates/patterns/pages/blog/blog_listing.html +++ b/tbx/project_styleguide/templates/patterns/pages/blog/blog_listing.html @@ -10,7 +10,8 @@ {% block content %}
- {% include "patterns/molecules/title-filters/title-filters.html" with item=page tags=tags %} + + {% include "patterns/molecules/title-filters/title-filters.html" with item=page tags=tags introduction=page.introduction page_links=page.page_links %}
    {% for post in blog_posts %} diff --git a/tbx/static_src/sass/components/_four-photo-collage.scss b/tbx/static_src/sass/components/_four-photo-collage.scss index 081ecbd3b..c28e2f586 100644 --- a/tbx/static_src/sass/components/_four-photo-collage.scss +++ b/tbx/static_src/sass/components/_four-photo-collage.scss @@ -44,10 +44,9 @@ 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 - ); + 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; diff --git a/tbx/static_src/sass/components/_grid.scss b/tbx/static_src/sass/components/_grid.scss index e965a4809..a837fc81a 100644 --- a/tbx/static_src/sass/components/_grid.scss +++ b/tbx/static_src/sass/components/_grid.scss @@ -8,11 +8,15 @@ margin: 0 auto; @include media-query(large) { - grid-template-columns: $grid-gutters-large repeat(12, 1fr) $grid-gutters-large; + grid-template-columns: + $grid-gutters-large repeat(12, 1fr) + $grid-gutters-large; } @include media-query(x-large) { - grid-template-columns: $grid-gutters-x-large repeat(12, 1fr) $grid-gutters-x-large; + grid-template-columns: + $grid-gutters-x-large repeat(12, 1fr) + $grid-gutters-x-large; } &--spacer-large { diff --git a/tbx/static_src/sass/components/_styled-page-links.scss b/tbx/static_src/sass/components/_styled-page-links.scss new file mode 100644 index 000000000..290d3b2a7 --- /dev/null +++ b/tbx/static_src/sass/components/_styled-page-links.scss @@ -0,0 +1,33 @@ +@use 'config' as *; + +.styled-page-links { + display: flex; + flex-wrap: wrap; + gap: $spacer-mini; + + &__button { + &--theme-coral { + &:focus, + &:hover { + background-color: var(--color--coral); + color: var(--color--white); + } + } + + &--theme-nebuline { + &:focus, + &:hover { + background-color: var(--color--nebuline); + color: var(--color--white); + } + } + + &--theme-lagoon { + &:focus, + &:hover { + background-color: var(--color--lagoon); + color: var(--color--white); + } + } + } +} diff --git a/tbx/static_src/sass/components/_title-filters.scss b/tbx/static_src/sass/components/_title-filters.scss index d2a0069e4..1e2f98b87 100644 --- a/tbx/static_src/sass/components/_title-filters.scss +++ b/tbx/static_src/sass/components/_title-filters.scss @@ -48,13 +48,43 @@ } &--no-tags { + @include media-query(large) { + flex-direction: column; + display: grid; + grid-template-columns: auto 1fr; + grid-template-rows: auto auto; + } + #{$root}__title { @include media-query(large) { - flex-grow: 1; + flex-grow: 0; + } + } + + &::before { + @include media-query(large) { + grid-column: 1; + grid-row: 1; } } } + &__introduction { + @include font-size('size-four'); + font-weight: $weight--light; + } + + &__styled-page-links { + margin-top: $spacer-small-plus; + } + + &__info { + @include media-query(large) { + grid-column: 2; + grid-row: 2; + } + } + &__title { margin-bottom: $spacer-small; @@ -66,6 +96,12 @@ #{$root}--team & { flex-basis: 50%; } + + #{$root}--no-tags & { + grid-column: 2; + grid-row: 1; + margin-bottom: $spacer-small-plus; + } } } diff --git a/tbx/static_src/sass/main.scss b/tbx/static_src/sass/main.scss index d7a8c2d59..2e1e6a13f 100755 --- a/tbx/static_src/sass/main.scss +++ b/tbx/static_src/sass/main.scss @@ -66,6 +66,7 @@ @use 'components/sprites-preview-icons'; @use 'components/stats'; @use 'components/streamfield'; +@use 'components/styled-page-links'; @use 'components/swirls'; @use 'components/team-page-meta'; @use 'components/tabbed-paragraph';