Problem/Motivation

On the Horizon Aid search page the filter rail holds the Category and Content Type facets and the Date Published filter. The facet checkbox lists keep a list indent, so they sit to the right of their headings, and the Date Published form brings its own filter panel padding and background into the rail panel.

Steps to reproduce

  1. Install Horizon Aid with its Varbase Search Base search page (the related Horizon Aid issue).
  2. Open /search?keywords=water.

Proposed resolution

  • Drop the list indent and bullets of facet checkbox lists.
  • Drop the panel padding and background of the rail's Date Published form.

Two scoped rules in views-exposed-filters.scss. The header search and the listing filters are unchanged.

Screenshots

Before

 facet lists indented, date select inside its own panel Rail at 390 before

After

 facet lists and the date select aligned with their headings Rail at 390 after

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

  • Facet lists and the Date Published filter line up with their headings in the search rail.

API changes

  • N/A

Data model changes

  • N/A

Release notes snippet

  • N/A

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

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

Title: Stack the search filter panel on phones and align the facet lists » Align the search filter rail: facet lists and the Date Published filter
Issue summary: View changes
rajab natshah’s picture

Fresh screenshots of the current state: vartheme_bs5_horizonaid !45 at 132f6cc with horizonaid !112 at 8428bc6 (#3631112), caches cleared, logged out. Date Published now sits in the rail after Content Type, so the MR only aligns the facet lists and drops the rail date form's own panel; the earlier phone stacking rule was removed.

Before

 facet lists indented, date select inside its own panel Rail at 390 before

After

 facet lists and the date select aligned with their headings Rail at 390 after

rajab natshah’s picture

Issue summary: View changes

  • rajab natshah committed a36bb4b3 on 1.0.x
    fix: #3631109 Align the search filter rail: facet lists and the Date...

rajab natshah’s picture

New screenshots for MR !46: Date Published now shows radios styled like the facet lists, and at 390 the keyword field stacks above the Search button.

Before (1440)

Date Published radios inside a box at 1440

After (1440)

Date Published radios aligned like the facet lists at 1440

Before (390)

Keyword field beside the button at 390

After (390)

Keyword field above the button at 390

  • rajab natshah committed d33ee2fc on 1.0.x
    fix: #3631109 Search page: Date Published radios like the facet lists,...
rajab natshah’s picture

Status: Needs review » Fixed
Issue tags: +vartheme_bs5_horizonaid-1.0.7

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.