Rework the campaign page template to allow for the CTA to appear first on the page on mobile

[mtdenton]

Stakeholders: Audrey Hingle, Kevin Hill

This team is trying to build an appeal page similar to what other organizations use (examples given here and here)

After going back and forth a bit, seems like we want to adapt campaign_page.html for this purpose, mostly looking for the CTA to be above the fold in the appeal. There are a few things to consider here however:

• We can't magically spring the intro header (which is an h1 and should actually be an h2, we'll fix that too) into position above everything.
• The desktop layout should remain the same. We have to be careful changing the order of things using CSS since users utilizing screen readers won't have the same experience as others.
• We don't want to retroactively affect any of the other existing pages by changing this template.

To address the above, we need to make the following adjustments to the model and template:

• Allow for editing of the hard-coded "Donate now" header that appears on all of these pages (defaulting to "Donate now" for all of the existing pages). Leaving this blank will remove the markup.
• Create a settings flag to allow page creators to rearrange the layout of these pages so that the CTA will appear at the top when the page collapses on smaller sizes. Once again, this should default to unchecked to allow for existing pages to retain their current layout. This flag will set the order of the markup to include the CTA first. While not ideal, we can manipulate the position of these on tablet sizes and above with order CSS rules for the various rows that include the donate form, the "intro text", and the disclaimers without differing the experience for screen reader users too much.

Dev Tasks

• Create a cta_first boolean setting for the CampaignPage class. This should determine the order of the markup in campaign_page.html (Checked = cta->intro text->disclaimer, unchecked = intro text ->cta->disclaimer)
• Add a field for intro_header in CampaignPage, replace the hard-coded "Donate now" text
• Create order css rules that only apply for tablet/desktop sizes when cta_first is True
• Change the intro header h1 to a h2

Acceptance Criteria

• As a user, when "CTA first" setting is unchecked, the donation form stays at the bottom of the page on mobile and remains on the right side on tablet sizes and above.
• As a user, when "CTA first" setting is checked, the donation form goes to the top of the page on mobile and remains on the right side on tablet sizes and above
• As a user, when "CTA first" setting is checked, the "Intro header" text appears above the donation form on mobile sizes and disappears from below the form.
• As a user, when "Intro header" is filled out, an h2 appears above the "Intro" rich text on the page
• As a user, when "Intro header" is left blank, no h2 markup appears above the "Intro" rich text on the page

[mtdenton]

@kristinashu Ready for QA:

https://donate-wagtail.mofostaging.net/en-US/donate-to-help-us-learn-what-makes-tiktok-tick/
https://donate-wagtail.mofostaging.net/admin/pages/3/

[kristinashu]

w00t! https://donate-wagtail.mofostaging.net/en-US/donate-to-help-us-learn-what-makes-tiktok-tick/ looks great! Perhaps have Audrey & Kevin H review it as well?

I'm having trouble logging into the admin tho, will ping you.

[kristinashu]

Edited and tested out the page, approved!

[mtdenton]

I'll send it along to Audrey and Kevin for a quick review 👍

EDIT: Kevin is out this week and next lol