Problem/Motivation

The global footer did not match the design. It rendered on a light background with a "Quicklinks" label, no tagline, no call to action, and "Powered by Vardot" where the design has a copyright line. The design is a dark band with three columns (logo, tagline and social icons; the four quick links; a "Join Our Mission" heading, a line of copy and a Subscribe button) over a bottom bar with the legal links on the left and the copyright on the right.

Steps to reproduce

  1. Install the Horizon Aid site template on Varbase 11.
  2. Load any page and scroll to the footer.
  3. Compare it against the design: light background instead of dark, a "Quicklinks" label above the sitemap links, no tagline or social icons, no "Join Our Mission" call to action, and "Powered by Vardot" instead of a copyright line.

Proposed resolution

  • Rebuilt canvas.page_region.vartheme_bs5_horizonaid.footer as 17 components: a dark edge-to-edge section in three columns (an inner section holding the logo card, the tagline text and the social menu block; the quick-links menu block; the heading, copy and Subscribe button), then a second dark section for the bottom bar with the legal menu block and the copyright.
  • Every component in that file now pins component_version: active instead of a hash. Canvas resolves active when the recipe imports the file, so the tree cannot go stale against a rebuilt component. The previous file pinned hashes.
  • The four quick links become top-level and the route:<nolink> wrapper they hung from is disabled, so the column shows the four links with no label, as the design does.
  • Terms and Conditions is weighted ahead of the privacy link in the bottom bar.

Verified on a Varbase 11 site in a browser: the band renders in the brand navy edge to edge with 48px of top padding; the logo, tagline and four gold social icons sit in the first column; Learn, Explore, Impact and Act render with no label; "Join Our Mission" and its copy render in white with the Subscribe button in the accent blue as a pill; the bottom bar shows Terms and Conditions and the privacy link on the left with the copyright on the right. The region config validates with zero violations and the page renders with zero errors.

Two limitations, stated plainly:

  1. The structure was modelled on the reference site's own footer region, read read-only from its production environment, then adjusted to the design: the Subscribe button uses the accent variant rather than the reference site's secondary variant, which would be navy on navy; the logo points at the theme's light logo under themes/contrib; and the copyright sits in its own bottom-bar column.
  2. The converted file has not yet been proven through a full fresh install, because a separate defect blocks that (Canvas component versions pinned in canvas.content_template.node.event.full through a config action do not exist at recipe-apply time; see #3614494). The file's shape matches the already-working canvas.content_template.node.event.card.yml, which uses the same flat format and the same active pinning, and it was structurally validated: 17 components, valid UUIDs, JSON-encoded inputs, no orphaned parents.

Also note: the design shows the privacy link as "Privacy Policy" while the page shipped by the upstream privacy recipe is titled "Privacy policy", and that page arrives unpublished from upstream, so on a stock install that link is inaccessible and does not render until the page is published. That is upstream behaviour, not changed here.

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

  • The global footer: dark background, logo with tagline and social icons, four quick links, a "Join Our Mission" call to action with a Subscribe button, and a copyright line replacing "Powered by Vardot".

API changes

  • N/A

Data model changes

  • N/A

Release notes snippet

  • The Horizon Aid global footer now matches the design: dark band with tagline and social icons, quick links, a "Join Our Mission" call to action, and a copyright line.

Issue fork horizonaid-3614664

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 c47d9421 on 1.0.x
    feat: #3614664 Build the global footer region in Canvas to the design
    
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.