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 · 2026-08-24T14:46:16Z

@@ -0,0 +1,6 @@
+<div class="listing-header grid__listing-header mb-spacerSmallPlus lg:mb-spacerMedium">
+    <h1 class="heading heading--mega">{{ item.title }}</h1>


I wonder - do we need to include the heading 1 and strapline in a special component here? The title-filters.html component needs to include the heading 1 because of the layout, but as the filters are laid out below the heading then we could just render the heading and strapline in the page template, and include the listing filters below. If we do need to keep it, can we add a yaml file for it.

I added this in just to reduce a bit of code duplication, so we don't necessarily need this - I've reverted the change here - 4805d19

Sorry for another nitpick but we now have the listing-header class outside of the listing-header component. If we do need a special class for the h1 here it should maybe return to the separate component after all.

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.

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?

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

		@@ -0,0 +1,6 @@
		<div class="listing-header grid__listing-header mb-spacerSmallPlus lg:mb-spacerMedium">
		<h1 class="heading heading--mega">{{ item.title }}</h1>

Uh oh!

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!

helenb Aug 24, 2026

Choose a reason for hiding this comment

Uh oh!

jhancock532 Aug 26, 2026

Choose a reason for hiding this comment

Uh oh!

helenb Aug 28, 2026

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!

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!

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!

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