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

helenb · 2026-08-24T15:35:58Z

+progressive enhancement.
+{% endcomment %}
+<form method="get" class="listing-filters" data-listing-filters>
+    <div class="listing-filters__groups">


Super nitpick: I believe we only have one group per page? So could name this listing-filters__group

Updated this here: 7889473

helenb · 2026-08-24T15:38:53Z

+        @include media-query(medium) {
+            flex-direction: row;
+            flex-wrap: wrap;
+            align-items: center;


Nitpick: I'm not sure the align-items: center is necessary here as the dropdown text never wraps.

Correct, I've fixed this here ee1020c

helenb · 2026-08-24T15:39:08Z

+
+    &__dropdown {
+        position: relative;
+        flex: 0 1 auto;


Query: what do the flex and min-width rules add here?

These don't meaningfully change the styles, I think they were copied from the previous MR unnecessarily - removed here ee1020c

helenb · 2026-08-24T16:02:58Z

+                            </li>
+                        {% empty %}
+                            <li class="listing-filters__option listing-filters__option--empty">
+                                No options available.


Query: what's the logic for having this text rather than just hiding the whole drop-down if there are no options?

There isn't good logic for this, it's much better UX to hide the whole drop-down instead - I've corrected this here - ee1020c#diff-bcf5b9fd7ffbe3ca1c03c6eec959269d99c16129f435e7b9c7a02a3545e12d4bR12

helenb · 2026-08-24T16:06:19Z

                <li class="grid__paragraph rich-text">
-                    {% if request.GET.filter == "past" %}
-                        <p>There are no past events.</p>
+                    {% if has_active_filters %}


A small improvement here might be to check if the current active filter is only to show upcoming events and nothing else - in that scenario we could display the no_events_message rather than "No events match the selected filters".

That's a good recommendation, I've implemented this here - 8b4c69b

helenb · 2026-08-24T16:09:03Z

+
+    constructor(node) {
+        this.node = node;
+        this.dropdowns = Array.from(node.querySelectorAll('details'));


Nitpick: it might be nice to add a data-attribute rather than querying the details element.

Thank you, I've corrected this here - 4805d19

helenb · 2026-08-24T16:12:43Z

+<form method="get" class="listing-filters" data-listing-filters>
+    <div class="listing-filters__groups">
+        {% for dropdown in filter_dropdowns %}
+            <details class="listing-filters__dropdown">


I would suggest adding a comment here to say the dropdowns jest test will need updating if this markup structure changes.

I've added the comment - 4805d19 - I also managed to immediately forget to update my Jest test since I updated the data attribute for this dropdown, so I corrected it in bf75e9b when I saw the pipeline failure

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

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

		@@ -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!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jhancock532 Aug 26, 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!

helenb left a comment

Choose a reason for hiding this comment

Uh oh!

zerolab commented Aug 26, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

jhancock532 commented Aug 24, 2026 •

edited

Loading

jhancock532 Aug 26, 2026 •

edited

Loading