Problem/Motivation

On the events listing (/events), five things don't match the design:

  • The Reset link never appears next to Apply Filters. The exposed-form plugin reads its own reset_button_always_show option; the view only set Better Exposed Filters' bef.general.reset_button_always_show, and core hides the reset action when there is no exposed input, so it stayed hidden.
  • The result summary renders at 18px in the body colour with no emphasis. The design shows 16px in the navy text tone, the result range in bold, and 40px of space before the list.
  • The listing grid uses 24px gutters against the design's 32px.
  • The pager lists nine page links where the design shows a five-link window.
  • The event card uses a 16px corner radius against the design's 20px.

Steps to reproduce

  1. Install the Horizon Aid 1.0.x site template and open /events.
  2. Compare the exposed filters, the result summary, the grid spacing, the pager and the event card corners against the design.

Proposed resolution

All on views.view.events unless noted:

  • Set the exposed form's own reset_button_always_show.
  • Set pager quantity to 5.
  • Set the grid utility classes to gy-grid gx-grid (the 32px step) on both the master display and block_1. The /events Canvas page places the block_1 display, and block_1 overrides the master's style options, so the master alone would change nothing on the page.
  • Update the result summary markup: 16px, navy tone, the range in bold, 40px below.
  • config/canvas.content_template.node.event.card.yml: move the event card's corner style to the 20px step.

Depends on a matching change to the vartheme_bs5_horizonaid theme, which defines the 32px gutter step and the 20px corner-radius step. That theme change should land first.

Verified on a Varbase 11 dev site in a real browser: Reset renders beside Apply Filters, the summary reads 16px in the navy tone with the range bold and 40px below, the grid measures 32px between columns and rows, the card corner radius is 20px, the page shows zero render errors, and the Canvas card template validates with zero violations.

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

  • Events listing (/events): the Reset link now shows beside Apply Filters when a filter is exposed; the result summary is smaller, in the navy tone, with the range in bold; the grid gutters match the design's 32px step; the pager shows a 5-link window.
  • Event card: the corner radius matches the design's 20px step.

API changes

  • N/A

Data model changes

  • N/A

Release notes snippet

  • Fixed the missing filter Reset link and matched the events listing spacing, summary and event card corners to the design.

Issue fork horizonaid-3614639

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 committed 22a7dfd7 on 1.0.x
    feat: #3614639 Show the filter reset, and match the listing spacing and...
rajab natshah’s picture

Assigned: Unassigned » josebc
Status: Active » Needs review
Issue tags: +horizonaid-1.0.0-alpha1
rajab natshah’s picture

Assigned: josebc » mohammed j. razem
rajab natshah’s picture

Assigned: mohammed j. razem » Unassigned
Status: Needs review » Fixed

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.