feat: #3623379 Style the search results page listing and filter rail (!23) · Merge requests · project / vartheme_bs5_rightup

Issue: #3623379 Style the search results page listing and filter rail

No new component

An earlier revision of this MR added a horizontal-text-image-card component. That is gone. The search result row is built from the theme's existing Featured Card (sdc.vartheme_bs5_rightup.card-featured), which is already a horizontal image-and-text row: media_position: start|end, media_image, ratio, fit, stretched_link, a content slot, and no icon. At columns_*_size: 04_08 it renders the image at 261x196 against the design's 260x195 — one pixel, from rounding, with no hard-coded width.

Neither other candidate can do it: Impressed Card is media_position: top|bottom only, and Horizontal Text Icon Card forces a play icon, which is why #3621523 was closed won't fix for trying to extend it.

Exposed filters are styled by view and display, never by form id

A site runs many exposed filters at once, and each page's filters have their own needs. hook_form_alter() now adds two classes to every exposed form:

views-exposed-form--<view>
views-exposed-form--<view>--<display>

An ID selector is brittle and unshareable, and exposed_block renders the form outside the .view-… wrapper, so the view classes are not available as ancestors — which is what otherwise drives a theme to the ID. Core provides no theme suggestions for views_exposed_form either. The views-exposed-filters component already said as much in its README; this gives it the hook it needed.

Three layers, so a page can be retuned rather than re-written

.vb-filter-bar — the shared filter bar, the hook Vartheme BS5 defines and the Educare and Horizon Aid search templates already emit. Rightup carried only the legacy #views-exposed-form-blog-all ID selector; the shared selector is now beside it, and the blog row renders unchanged.
.vb-filter-options — one token set (--vb-filter-option-*) for the option rows. A page can render filter groups from different things — Facets draws checkboxes, a Views grouped exposed filter draws radios — and the design gives them one appearance, so both opt into the same tokens instead of each being styled where it happens to live.
views-exposed-form--<view>--<display> — per-page needs, by retuning those custom properties rather than adding a second set of rules.

Measured against the design

Filter options (VBN Stylesheet, Search-Listing 13058:23852):

	design	before	after
box	16x16, square, 1px black	18x18, radius 4.5px, `#e6e6e9`	16x16, radius 0, 1px black
label	Rubik 14px black	18px `#242424`	14px `#000`
count	`#4f46e1`	same colour as the label	`rgb(79,70,225)`
row	29px	27px	29px

The count colour is $tertiary, which is already #4F46E1 in this theme, so it is a token rather than a hex literal copied from Figma.

Search field group: 864x46, field 762, submit 103, flush and square.

One deliberate deviation from the design

The design draws every filter as a square box. The Date Published group is single-select (core's Date filter reads group_info['type'], which only exists for a single-select group), so its radios keep their circle: a square radio reads as a checkbox and hides that choosing one clears the others.

Also

32px and a hairline rule between listing rows — listing rhythm, rather than anything a card should carry.
A facet widget is a list of filters, not a bulleted list, so it loses the 32px list indent that left the Category and Content Type groups offset from their own headings.

Testing

Verified on a fresh Drupal CMS build and install (not only in place): the results page renders 10 rows and 42 facet items with zero errors, and every metric above was measured in the browser rather than read off the stylesheet.

Checkpoints

Edited Sep 16, 2026 by Rajab Natshah

feat: #3623379 Style the search results page listing and filter rail