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_showoption; 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
- Install the Horizon Aid 1.0.x site template and open
/events. - 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
quantityto 5. - Set the grid utility classes to
gy-grid gx-grid(the 32px step) on both the master display andblock_1. The/eventsCanvas page places theblock_1display, andblock_1overrides 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
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
Comment #4
rajab natshah✅ Released horizonaid-1.0.0-alpha1
Comment #5
rajab natshahComment #6
rajab natshah