Feature/listing rework by nicklee · Pull Request #438 · torchbox/torchbox.com

nicklee · 2026-06-22T15:40:09Z

Replaces the legacy single-select tag cloud (title-filters + ?filter=) on Work, News, and Events index pages with a shared multi-select dropdown filter UI, progressive enhancement via htmx, and a centralised listing backend.

What changed

UI / templates

New filter UI with dropdown checkboxes (Sector, Service, Culture on Work/News; When + Event type on Events)
Active filter pills with remove links and “Clear all filters”
Badge counts per dropdown, synced from the URL
Dropdowns with no options and no selection stay hidden (including after other filters are applied)
Faceted options — dropdown choices narrow based on other active filters (zero-result options hidden)
Empty states for dropdowns with no matching options
Reusable listing panel structure: #listing-panel, partial templates, OOB swaps for meta, pills, and option lists
Mobile spacing improvements (tighter dropdown gaps, reduced gap before results)

Backend (tbx/core/listing/)

New shared module: filters.py, mixins.py, events.py
Work, Blog, and Events index pages refactored to use shared context builders
Multi-param filtering: ?sector=, ?service=, ?timing=, ?type= (legacy ?filter= still supported)
Filter logic: AND between dimensions, OR within a dimension
SEO rules: single filter indexable; 2+ filters noindex; dynamic title/canonical via OOB meta swaps
Culture split: UI-only separation of culture-related services via CULTURE_SERVICE_SLUGS (both submit as service)
EventType gains a slug field (migration 0044_eventtype_slug)

JavaScript (listing.js + listing-filters.js)

New webpack entry listing.js with htmx
Manual htmx.ajax filter requests (debounced 200ms) — avoids stale state vs form hx-trigger
Dropdown open/close, URL sync, badge counts, visibility management
Pagination scroll: anchors to top of results on all htmx-enabled listings
Non-JS fallback: standard GET form with visible “Apply filters” button

Tests

33 tests in tbx/core/listing/tests/ covering filter state, AND/OR logic, faceting, htmx partials/OOB, SEO, pagination, legacy params, culture split, and non-JS submission

Documentation

New docs/listing.md (full feature reference)
Updates to docs/navigation.md, docs/upgrading.md, mkdocs.yml

Other

Merges in feature/IA-new-nav changes (nav/header SCSS adjustments)
Adds htmx.org dependency

…on scroll logic

JakubMastalerz · 2026-06-25T15:37:20Z

Hi @nicklee, just wanted to flag that some merge conflicts came up on staging with my #440 changes. cb5807b removes canonical tags from your listing_meta.html since it's now included in base. If you don't think it's the right approach, I'm happy to discuss :)

helenb

Hey @nicklee thanks for this - there are a few changes to look at from a front-end perspective.

I am hoping @tm-kn can review the js as I am less familiar with htmx - and also I've run out of time today. I can take another look next week if not.

One final comment: it's a bit confusing that if you choose the work listing filtered by public from the parent drop down, you get the charity branding. I am not sure how we'd avoid something like this as presumably you need to select one theme overall for the work listing. But might be something that causes confusion / comments from Lily and Lisa I think.

I would also recommend running the tbx-pr-review skill on this. It picked up a bunch of performance issues and missing tests when i tried it. It might be easier for you to run it than for me to copy and past them all here, but I can share the output if that would be helpful.

helenb · 2026-07-03T07:23:19Z

+| **Service** | `Service` snippets (non-culture) | `service`   | Repeatable; excludes culture slugs (see below)                        |
+| **Culture** | `Service` snippets (culture set) | `service`   | UI-only split; same param as Service; badge counts culture selections |
+
+Dropdowns with **no options on the unfiltered listing** and **no active selection** in that dimension are hidden (for example, Culture on Work when no culture-tagged work exists). Dropdown visibility is fixed at page load and does not change when facet narrowing removes options after other filters are applied.


When I tested this on the news listing, I got a drop down for culture with a single checkbox labelled - would that not count as one with no options so should therefore be hidden?

helenb · 2026-07-03T07:27:39Z

+
+---
+
+## Filter dropdowns (Events)


For events I was unable to deselect past events once I had selected them. (Appears to be using a radio button not a checkbox)

Screen.Recording.2026-07-03.at.08.26.49.mov

helenb · 2026-07-03T07:33:06Z

+
+Without JavaScript:
+
+- The filter form submits via **GET** to the listing URL.


The dropdowns don't appear to function without JavaScript, so it's impossible to select any filters. If we are going to support non-JS here we need to do it fully.

helenb · 2026-07-03T07:39:23Z

@@ -0,0 +1,5 @@
+{% for option in listing_filters.culture %}
+    {% include "patterns/molecules/listing-filters/includes/filter-option.html" with param="service" value=option.value label=option.label selected=selected_culture %}


There only seemed to be one option here, as mentioned above, and it matches the name of the dropdown. Perhaps the whole filter should be hidden in this scenario.

helenb · 2026-07-03T07:41:13Z

+    data-listing-filter-dropdown
+    {% if not show_dropdown %}hidden{% endif %}
+>
+    <button


Is there a reason you've used buttons and a list here rather than a select dropdown? Select would have the benefit of working without JS.

helenb · 2026-07-03T08:59:22Z

+@use '../config' as *;
+
+.listing-header {
+    grid-column: 2 / span 4;


Could be moved to grid.scss

helenb · 2026-07-03T08:59:32Z

+}
+
+.listing-filters {
+    grid-column: 2 / span 4;


helenb · 2026-07-03T09:00:29Z

+        min-width: 0;
+
+        @include media-query(medium) {
+            min-width: 9rem;


Is there a logic to this value? Might be worth an explanatory comment as otherwise feels a bit arbitrary.

helenb · 2026-07-03T09:05:03Z

+        top: calc(100% + 6px);
+        left: 0;
+        width: max-content;
+        min-width: max(100%, 20rem);


I noticed at small mobile size that the panel is wider than the viewport - seems like the max-width isn't being applied for some reason:

helenb · 2026-07-03T09:05:57Z

+    }
+}
+
+[id='listing-panel'] {


Do we need this selector? Could it be done with a class instead?

helenb · 2026-07-03T10:23:16Z

@nicklee Could you use the mr template and tick off the relevant checks?

tm-kn · 2026-07-03T10:46:26Z

+| -------------- | --------------------------------- | ------------------- | ----------------------------------------------- |
+| 0              | Page title                        | (default)           | Base URL if `?page=` present; else page default |
+| 1              | `{title} filtered by {label}`     | indexable           | Current filtered URL                            |
+| 2+             | `{title} filtered by {a}, {b}, …` | `noindex, nofollow` | Base listing URL                                |


I'm triple checking with Beth if this is right. I think we usually don't want to do canonical URLs for pages that will repeat content.

https://torchbox.slack.com/archives/C0B955RKYVD/p1783078236153929?thread_ts=1783075343.718539&cid=C0B955RKYVD Yep!

tm-kn · 2026-07-03T10:49:23Z

+    return sorted(merged.values(), key=lambda item: item["label"].lower())
+
+
+@dataclass(frozen=True)


I think we should pivot and use django-filter instead as it's a more established framework for building filters. That would also avoid reading user input directly from request.GET, and use Django forms for sanitising and validating the values, rather than passing them straight to database.

tm-kn · 2026-07-03T10:51:19Z

@@ -0,0 +1,13 @@
+{% load wagtailcore_tags %}
+
+{# Always present so htmx OOB swaps can target these elements. #}


What's the signifance of using HTMX to swap those tags? Why is this needed?

nicklee added 11 commits June 22, 2026 11:09

Base listing and htmx update

cc36a0f

Styling dropdowns

7bac6e9

Adding tests and documentation

9290c39

Add filter dropdown transiition

07c1c8e

Ensure paginated users are anchored to top after htmlx click

0a8d9eb

Codex Code review

0774e29

Merge branch 'feature/IA-new-nav' into feature/listing-rework

d8d6085

Only show filters that yeild results

ea5a217

Adding two empty states for dropdowns, and fixing consistent paginati…

9cac43c

…on scroll logic

Codex code review

5f32537

Updating documentation

03ce3c8

nicklee added the on staging label Jun 22, 2026

nicklee marked this pull request as ready for review June 22, 2026 15:40

nicklee added 2 commits June 22, 2026 16:49

linting

9a339e4

Rework filters to always show all options

8e81bfc

tm-kn changed the base branch from main to migration-2026 July 2, 2026 14:13

helenb requested changes Jul 3, 2026

View reviewed changes

tm-kn reviewed Jul 3, 2026

View reviewed changes

helenb removed the on staging label Jul 20, 2026


		Without JavaScript:

		- The filter form submits via GET to the listing URL.

		@@ -0,0 +1,5 @@
		{% for option in listing_filters.culture %}
		{% include "patterns/molecules/listing-filters/includes/filter-option.html" with param="service" value=option.value label=option.label selected=selected_culture %}

		return sorted(merged.values(), key=lambda item: item["label"].lower())


		@dataclass(frozen=True)

		@@ -0,0 +1,13 @@
		{% load wagtailcore_tags %}

		{# Always present so htmx OOB swaps can target these elements. #}

Uh oh!

Conversation

nicklee commented Jun 22, 2026

Uh oh!

JakubMastalerz commented Jun 25, 2026

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!

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!

helenb commented Jul 3, 2026

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!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants