reCAPTCHA: Spacing and template refactor

[machikoyasuda]

closes #2540

This ticket is mostly a code clean-up ticket, aside from the one actual CSS change in this PR (d671ec7 - which this in it of itself is only bumping something 2 pixels), made possible by all the changes already completed in #2585 #2584 #2573 #2538 #2586. This is mostly for optimizing developer experience in the templates.

What this PR does

• H1s: Are now all 72px from the bottom of the nav. As declared by CSS on the H1 element. This is used on all pages except for the Index page and Error/Logged Out pages.
• Base: Refactors the base template to combine some of the blocks into 1 wrapper div, instead of mulitple. Removes explanatory-info block to further simplify. There are 2 rows: the main content row, and the all to action row. Within the main content row, it's either headline or inner-content. That's it. There's 64px between these two rows.
• Naming Conventions: Renames the index templates to follow this new convention - index-base, index--agency-base, index--cst, index--mst... This makes it easier for developers to look at a file and see what template is inheriting from where.

Documentation

• How to decide whether to use the base template directly, whether to create a new template inheriting from base like error-base, or to create a new template that overrides almost everything.
• Is the entire page wrapped in a centered col-lg-6? Use base. Use headline, inner-content and call-to-action-button. Do not create any new parent blocks. Examples: Logged Out, Confirm.
• Is the entire page wrapped in a centered col-lg-6, but there are different templates varying by agency or flow? Create a new template that inherits from base, end the name of this file with base, like success-base. In this new file, use headline for the title and use the inner-content block for your content, and use call-to-action-button for the button. You can create blocks that are children of inner-content, but do not create any new parent blocks. When creating files for each agency or flow, try to make sure that the files are only content, like copy or images and basic HTML elements, and put all styling in the template. Examples: Elig Start, Elig Index.
• Does the page have a wider or narrower column-width? Create a new template and override main-content. If it feels hacky to use inner-content and call-to-action, create a new template. Examples: Help, Enrollment Success.

Notes

• If you have col-lg-6 you don't need col-12 col-sm-12. 12 is the default.

Ideals

• Do not send empty divs into the code. If the page does not have a call-to-action, add this:

{% block call-to-action %}
{% endblock call-to-action %}

[github-actions]

Coverage report

Click to see where and how coverage changed

File	Statements	Missing	Coverage	Coverage (new stmts)	Lines missing
benefits/core
views.py
Project Total

This report was generated by python-coverage-comment-action

[machikoyasuda]

Open question: Would it be useful to have information like #2588 (comment) and #2585 (comment) written up in docs somewhere? It would be documenting what base.html does, and how to override each block (or when to create a new sub-base template). @thekaveman