Org Chart, reporting examples and internal/external buttons need a little bit of spacing

[dorothyyeager]

Summary

What we're after:
We'd like to include a bit of padding into elements like the Org Chart, reporting examples, the internal button and the external button, since those elements are often followed by other things like texts or images. Right now we can do workarounds using in-line styles in the html, or adding carriage returns in a paragraph block, but it would be good to build this padding into the elements.

Related issues

• Wagtail wish list: Add internal and external link buttons to Record and Example page templates #2935 (Wagtail button and reporting example work)
• Create org chart in HTML Block in Wagtail #3185 (Org chart work)

Screenshots

Internal button (external button and reporting examples do the same thing)

As rendered:

Our current workaround: Hit carriage return in the first line of the text block to add the space.

Current html for org chart (in html block, followed by second html block with footnotes):

Current workaround: Inserting this styling into the HTML for the chart: ul id="fec-orgchart" style="padding-bottom: 2rem;">

Completion criteria

• Verify that there will be space between a button, an example or a chart and any text blocks inserted below it.

Future work

After the new styling is deployed to prod, we may need to take out a bunch of extra carriage returns, etc.

[johnnyporkchops]

@dorothyyeager, Can you include a link to Reporting examples (or other )pages where this issue exists. I had trouble navigating (or searching )my way back to reporting example pages

[dorothyyeager]

@johnnyporkchops You may have fixed it in the reporting examples when you worked on the example template issue. When I tested that example, the issue seemed to be fixed on that template. Reporting example pages are usually in the filing reports part of each H4CC bucket. for example: https://www.fec.gov/help-candidates-and-committees/other-filers/#reporting-examples

For other types of pages, here's an example: https://www.fec.gov/help-candidates-and-committees/candidate-taking-receipts/partnership-llc-contributions/
This page was screenshot above and has a lot of buttons. It uses the resource template. We did a lot of workarounds (like <br> or hitting carriage returns) to make the buttons not hit the text below them.

The org chart is another example, where Pat gave me some html to use as a workaround. That page is at https://www.fec.gov/about/leadership-and-structure/fec-offices/.