Problem/Motivation

Search on Horizon Aid is its own setup on the Drupal CMS search view: a page display with a keyword box and a list of titles and excerpts. Visitors cannot narrow results, and the template does not share the search the other Vardot site templates get from Varbase Search Base.

Steps to reproduce

  1. Install Horizon Aid.
  2. Open /search?keywords=water.
  3. The results are a plain title list, with no way to filter by category, content type or date.

Proposed resolution

  • Apply varbase_search_base in recipe.yml and require drupal/varbase_search_base.
  • Ship /search as a Canvas page: an h1, the keyword panel, a filter rail (Category, Content Type, then Date Published as a select), and the results. The view's page display is disabled. The header search form keeps working, it still submits keywords to /search.
  • Category combines the resource categories (News, Report, Policy brief) and the event categories (Summit, Webinar, Briefing, In-person). These are the labels visitors already see on the Resources and Events cards, and they cover 50 of the 70 demo items. Program types and countries are few and have their own listings.
  • Results are image cards with a content type badge, two per row, through a search_result Canvas template for every content type. The templates bind only the title, description, featured image and URL, so an item without an image or description still renders.
  • All search keys are ones the base recipe does not write, so applying it again keeps them.

Needs the theme change in vartheme_bs5_horizonaid #3631109 (merge that first) so the facet lists and the rail's date filter align.

The design file has no search page. The page follows the Resources listing: the filter panel, the "Showing x-y of n" summary, the image cards and the pager. A search results frame, facet checkbox states and a date filter control would let the design own this page.

Screenshots

Before (1440 and 390)

 a keyword box and a list of titles and excerpts

Search results before at 390

After (1440 and 390)

 keyword panel, rail with Category, Content Type, Date Published, result cards

Search at 390 Filter rail with Past Month selected and the focus ring

Header search open at 1440

Remaining tasks

  • ✅ File an issue
  • ❌ Addition/Change/Update/Fix
  • ❌ Testing to ensure no regression
  • ❌ Automated unit/functional testing coverage
  • ➖ Developer Documentation support
  • ➖ User Guide Documentation support
  • ❌ UX/UI designer responsibilities
  • ❌ Accessibility and Readability
  • ❌ Reviewed by a human
  • ❌ Code review by maintainers
  • ❌ Full testing and approval
  • ❌ Credit contributors
  • ❌ Review with the product owner
  • ❌ Update Release Notes
  • ❌ Release

User interface changes

  • /search gets a keyword panel, a filter rail and image result cards.

API changes

  • N/A

Data model changes

  • A category_name field in the content search index, and a Category facet.

Release notes snippet

  • Search now uses Varbase Search Base, with Category, Content Type and Date Published filters on /search.

AI-Generated: Yes. Drafted with an AI assistant and reviewed before posting.

CommentFileSizeAuthor
#8 horizonaid-search-date-after-390.png18.81 KBrajab natshah
#8 horizonaid-search-date-after-1440.png24.21 KBrajab natshah
#4 horizonaid-search-two-types-1440.png1.63 MBrajab natshah
#4 horizonaid-search-mixed-p1-390.png1.7 MBrajab natshah
#4 horizonaid-search-mixed-p1-1440.png2.54 MBrajab natshah
#4 horizonaid-search-type-program-1440.png898.42 KBrajab natshah
#4 horizonaid-search-type-page-1440.png340.17 KBrajab natshah
#4 horizonaid-search-type-event-1440.png2.11 MBrajab natshah
#4 horizonaid-search-type-country-1440.png576.61 KBrajab natshah
#4 horizonaid-search-type-blog-1440.png911.38 KBrajab natshah
#4 horizonaid-header-search-result-390-v2.png34 KBrajab natshah
#4 horizonaid-header-search-open-390-v2.png76 KBrajab natshah
#4 horizonaid-header-search-open-1440-v2.png724.16 KBrajab natshah
#4 horizonaid-search-rail-1440-v2.png20.42 KBrajab natshah
#4 horizonaid-search-after-390-v2.png1.16 MBrajab natshah
#4 horizonaid-search-after-1440-v2.png1.71 MBrajab natshah
#3 horizonaid-header-search-after-390.png77.19 KBrajab natshah
#3 horizonaid-header-search-before-390.png77.74 KBrajab natshah
#3 horizonaid-header-search-after-1440.png725.04 KBrajab natshah
#3 horizonaid-header-search-before-1440.png724.95 KBrajab natshah
#3 horizonaid-search-rail-390-past-month.png20.25 KBrajab natshah
#3 horizonaid-search-after-390.png1.16 MBrajab natshah
#3 horizonaid-search-after-1440.png1.7 MBrajab natshah
horizonaid-search-date-filter-1440-past-month-focused.png13.03 KBrajab natshah
horizonaid-search-after-390.png1.16 MBrajab natshah
horizonaid-search-after-1440.png1.71 MBrajab natshah
horizonaid-search-before-390.png306.2 KBrajab natshah
horizonaid-search-before-1440.png315.07 KBrajab natshah

Issue fork horizonaid-3631112

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

rajab natshah created an issue. See original summary.

rajab natshah’s picture

Date Published now sits in the filter rail, directly after Content Type, as a select. The keyword panel holds only the keyword field and the Search button. Each form carries the other's value as a hidden field, so a new keyword keeps the date and a new date keeps the keyword.

The theme MR (#3631109) now only aligns the facet lists and drops the rail date form's own panel; the phone stacking rule is no longer needed.

The header search was checked at 1440 and 390: it opens and closes by keyboard, the field has a label, Enter lands on /search with the keyword filled in and results shown, and the facets then narrow them. It looks the same as before. The 12-search tests pass (25 scenarios).

Screenshots

After (1440 and 390)

 keyword panel, filter rail with Category, Content Type and Date Published, image result cards

Search results at 390

Filter rail at 390 with Past Month selected

Header search, before / after

Header search open at 1440 before

Header search open at 1440 after

Header search open at 390 before Header search open at 390 after

rajab natshah’s picture

Fresh screenshots of the current MR state: horizonaid !112 at 8428bc6, vartheme_bs5_horizonaid !45 at 132f6cc (#3631109), varbase_search_base 1.0.x b5a9d13, caches cleared, logged out.

Every content type in the index was checked at 1440 and 390, one at a time through the Content Type facet and mixed:

Type Results for "the" Card
Blog post 4 OK
Country 3 OK
Event 15 OK
Utility page 1 OK
Program 4 OK

Each card uses the type's search_result template: right badge, title, working link, description, image loaded, same width and 4:3 image on every type. No template binds a delta of an optional field, and a node with no image or description still renders. Mixed pages (27 results for "the", across two pages) keep one grid, and ticking Country and Program together returns both types. No LogicException, no console errors. Nothing needed fixing.

Before

Search results before at 1440

Search results before at 390

After

 keyword panel, rail with Category, Content Type, Date Published, result cards

Search at 390 Filter rail with Past Month selected and the focus ring

Header search (open, then the result page)

Header search open at 1440 with a keyword

Header search open at 390 Result page at 390 after a header search

One content type at a time (1440)

Blog post results

Country results

Event results

Utility page result

Program results

Mixed types

Mixed results page 1 at 1440

Mixed results page 1 at 390 Country and Program ticked together

rajab natshah’s picture

Issue summary: View changes

  • rajab natshah committed 4f5d13ce on 1.0.x
    feat: #3631112 Use Varbase Search Base for search, with a Canvas search...

rajab natshah’s picture

New screenshots for MR !113: Date Published in the filter rail is now radios, and the Category facet shows 8 items with Show more.

After (1440 and 390)

Date Published radios in the rail at 1440 Date Published radios with Past Week chosen at 390

  • rajab natshah committed e40fe11f on 1.0.x
    feat: #3631112 Show Date Published as radio buttons in the search filter...
rajab natshah’s picture

Status: Needs review » Fixed
Issue tags: +horizonaid-1.0.8

✅ Released horizonaid-1.0.8

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.