Listing pages filtering by jhancock532 · Pull Request #451 · torchbox/torchbox.com

jhancock532 · 2026-08-24T08:48:38Z

Description of Changes Made

Adds sector / service filtering to the news and work listing pages, as well as timing / event type for the event listing page.

Shared listing-filter form and context helpers (tbx/core/listing/)
Shared filter UI: dropdowns, active-filter pills, clear-all, JS component and styles
slug field added on the EventType snippet, used in event-filter URLs

How to Test

Test locally by confirming news, work and event listing pages filter correctly. By default, the event listing page should only show upcoming events.

Confirm that the user can select multiple filter options from the drop-down checkboxes, and apply their filter choices with the filter button.

Confirm that when the page loads with filters applied, these filters are shown in the active filters session. Dismissing one of the active filters causes the page to reload with that filter no longer applied.

Confirm that with active filters applied, pressing the "Clear all filters" button then removes all the active filters from the page.

Check out the listing filters component in the pattern library: http://localhost:8000/pattern-library/pattern/patterns/molecules/listing-filters/listing-filters.html

Screenshots

Expand to see more

Event page, dark mode with event type filters.

New page, light mode with multiple filters

Work page, light mode with multiple filters, mobile

Pattern library component

MR Checklist

Add a description of your pull request and instructions for the reviewer to verify your work.
If your pull request is for a specific ticket, link to it in the description.
Stay on point and keep it small so the merge request can be easily reviewed.
Tests and linting passes.

Unit tests

Added
Not required

Documentation

Updated build docs
Updated editor guidelines (See https://intranet.torchbox.com/torchbox-com-project-docs for the private link, for Torchbox employees only)
Updated field spec (See https://intranet.torchbox.com/torchbox-com-project-docs for the private link, for Torchbox employees only)
Not required

Browser testing

I have tested in the following browsers and environments (edit the list as required)
- Latest version of Chrome on mac
- Latest version of Firefox on mac
- Latest version of Safari on mac
- Safari on last two versions of iOS
- Chrome on last two versions of Android
Not required

Data protection

Not relevant
This adds new sources of PII and documents it and modifies Birdbath processors accordingly

Light and dark mode

I have tested the changes in both light and dark mode
The change is not relevant to dark and light mode

Accessibility

Automated WCAG 2.1 tests pass
HTML validation passes
Manual WCAG 2.1 tests completed
I have tested in a screen reader
I have tested in high-contrast mode
Any animations removed for prefers-reduced-motion
Not required

Sustainability

Images are optimised and lazy-loading used where appropriate
SVGs have been optimised
Performance and transfer of data considered
If JavaScript is needed alternatives have been considered
Not required

Pattern library

The pattern library component for this template displays correctly, and does not break parent templates
The styleguide is updated if relevant
Changes are not relevant the pattern library

Reusable backend core for validating listing query params and building the shared filter UI context, used by the blog, work and events listings. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Filter dropdowns, active-filter pills and the clear-all control shared by the listing pages, plus the JS component and styles that drive them. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

The slug is used as the value in event-filter URLs. Includes a factory for test data. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Filters match both WorkPage and HistoricalWorkPage subtypes. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

- Improve high contrast mode accessibility for submit button - Remove excess comments - Standardise use of SCSS styles for listing filters component

…l_url

… 400% zoom

helenb

Thanks @jhancock532 this is looking really good. Most of my comments are pretty minor. Note I think my comments may come in two reviews as I had another tab open to look a the CSS and markup changes in tandem.

helenb

Remaining review comments.

zerolab · 2026-08-26T11:00:13Z

Q: does this supersede #438 ?

…of generic no results text

- Make focus styles for buttons consistent. - Use data attribute instead of matching on details element - Add comment reminder to update Jest markup - Revert change moving minor duplicate code to shared component

helenb

Thanks for all the fixes - this is looking great now - approving from a front-end perspective. It would be good if you can fix the one small remaining issue but it is non-blocking.

tm-kn · 2026-09-10T10:26:44Z

+            sector_choices=[(s.slug, s.name) for s in related_sectors],
+            service_choices=[(s.slug, s.name) for s in related_services],
+        )
+        form.is_valid()


Issue: I don't think you can access cleaned_data below if this is False. If the form is invalid, we should not apply filters. I can see the form is dropping incorrect values. Reading the calling code at this abstraction level I'd rather make it exhaustive based on values that is_valid may return.

I've updated this to the behaviour you describe, see ccb1b34

tm-kn · 2026-09-10T10:45:52Z

-        extra_url_params = {}
+        # Only offer Sectors and Services that are actually used on this listing.
+        related_sectors = Sector.objects.filter(
+            Q(pk__in=models.Subquery(self.works.values("workpage__related_sectors")))


Question: Just a quick double check, does the related models here return PKs of the sectors or PKs of the through model instances?

Should the code explicitly use values_list with the PK field only to make the query behaviour easier to understand just by reading it?

Does values() do some form of implicit behaviour here to join those tables up?

This returns the primary keys of the sectors, as Django resolves the query all the way to the target model. I've made this more readable by using values_list like you've suggested in this commit here - 60ea32d

jhancock532 · 2026-09-14T08:41:40Z

I've confirmed Lily's extra requirement that it's possible to create multiple listing pages that show distinct content. Two pages of type BlogIndexPage can be created with different page titles, and then child pages can be added to them that only show in the filtered content of these pages.

jhancock532 · 2026-09-14T11:40:36Z

Hello @helenb & @tm-kn, we overlooked updating the links that navigate to the filter pages. I've addressed this in the above commits, ae7f65f...c41ba8a and deleted some unused code that had been left behind in the recent work.

To test the above, please confirm the following:

Expand to see more

Tags should filter correctly across the site

Within listing item cards in BlogIndex pages

Under the title of a Blog page

Beside the title of a Work page

There should be no regression on the people page

The main filter works as normal

The tag on the Person page filters according to team

Links in the primary navigation should filter correctly, for both service and sector

helenb

Thanks @jhancock532 I had one small comment and a query. I am not 100% confident I understand the ways the menu links are generated but I have tested the scenarios you've laid out in your most recent comments and they seem to behave as expected.

jhancock532 and others added 14 commits August 24, 2026 09:27

Add shared listing-filter form and context helpers

5262497

Reusable backend core for validating listing query params and building the shared filter UI context, used by the blog, work and events listings. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Add shared listing-filter UI

917eb85

Filter dropdowns, active-filter pills and the clear-all control shared by the listing pages, plus the JS component and styles that drive them. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Add slug field to EventType snippet

0196c78

The slug is used as the value in event-filter URLs. Includes a factory for test data. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Add sector and service filters to the news listing

8a7dcd9

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Add sector and service filters to the work listing

cf36d06

Filters match both WorkPage and HistoricalWorkPage subtypes. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Add timing and type filters to the events listing

bcbe078

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Self code review fixes

c7c1a47

- Improve high contrast mode accessibility for submit button - Remove excess comments - Standardise use of SCSS styles for listing filters component

Update pattern library template context for listing filters

b62b44f

Fix bug with pattern library crash when base page doesn't provide ful…

35b52a8

…l_url

Fix apply filter button styling to use accessible colors

b5cfdb2

Remove unnecessary added apply filter button styles

ad7bf7a

Make minor change to apply filter button padding for consistency

4d7e4aa

Fix lint issue with listing filters YAML

db7847c

Remove scrollable container for listing filters that caused issues at…

4cb14b5

… 400% zoom

jhancock532 changed the title ~~Draft: Listing pages filtering~~ Listing pages filtering Aug 24, 2026

jhancock532 marked this pull request as ready for review August 24, 2026 10:21

jhancock532 requested a review from helenb August 24, 2026 10:21

jhancock532 self-assigned this Aug 24, 2026

jhancock532 requested a review from tm-kn August 24, 2026 10:21

helenb reviewed Aug 24, 2026

View reviewed changes

jhancock532 added 5 commits August 26, 2026 15:04

Rename listing filters class

7889473

Remove unused CSS, correct minor issues

ee1020c

When only showing upcoming events, display no_events_message instead …

8b4c69b

…of generic no results text

Minor code review fixes

4805d19

- Make focus styles for buttons consistent. - Use data attribute instead of matching on details element - Add comment reminder to update Jest markup - Revert change moving minor duplicate code to shared component

Update listing dropdown template with missing data attribute

bf75e9b

helenb mentioned this pull request Aug 28, 2026

Feature/listing rework #438

Closed

helenb approved these changes Aug 28, 2026

View reviewed changes

tm-kn reviewed Sep 10, 2026

View reviewed changes

jhancock532 added 3 commits September 14, 2026 08:29

Make form validation check exhaustive, reject invalid submission

ccb1b34

Make filter query code more readable

60ea32d

Restore shared listing header template

ae7f65f

jhancock532 added 7 commits September 14, 2026 12:11

Update filter navigation link generation to use new parameters

b6a3f44

Add new filter parameters to tag component & taxonomy model metadata

df349bd

Update pattern library templates

d4a6e92

Delete unused title-filters components

6319532

Remove unused filter_by support in see-more component

351305d

Update documentation

b83841a

Fix formatting of documentation tables

c41ba8a

jhancock532 force-pushed the feature/listing-filters branch from e4508a7 to c41ba8a Compare September 14, 2026 14:32

helenb reviewed Sep 15, 2026

View reviewed changes

Comment thread tbx/project_styleguide/templates/patterns/atoms/see-more/see-more.html

Comment thread tbx/project_styleguide/templates/patterns/molecules/title-filters/title-filters-team.html

helenb reviewed Sep 15, 2026

View reviewed changes

Comment thread tbx/project_styleguide/templates/patterns/pages/blog/blog_listing.html Outdated

James Hancock added 2 commits September 16, 2026 15:58

Rename title-filters--team component

622b2d1

Make filter result message copy more generic

1d267fc

Conversation

jhancock532 commented Aug 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description of Changes Made

How to Test

Screenshots

MR Checklist

Unit tests

Documentation

Browser testing

Data protection

Light and dark mode

Accessibility

Sustainability

Pattern library

Uh oh!

helenb left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

helenb left a comment

Choose a reason for hiding this comment

Uh oh!

zerolab commented Aug 26, 2026

Uh oh!

helenb left a comment

Choose a reason for hiding this comment

Uh oh!

tm-kn Sep 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jhancock532 Sep 14, 2026

Choose a reason for hiding this comment

Uh oh!

tm-kn Sep 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jhancock532 Sep 14, 2026

Choose a reason for hiding this comment

Uh oh!

jhancock532 commented Sep 14, 2026

Uh oh!

jhancock532 commented Sep 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

helenb left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

jhancock532 commented Aug 24, 2026 •

edited

Loading

tm-kn Sep 10, 2026 •

edited

Loading

tm-kn Sep 10, 2026 •

edited

Loading

jhancock532 commented Sep 14, 2026 •

edited

Loading