reCAPTCHA: Eligibility Start #2573
Conversation
github-actions
bot
added
front-end
Coverage report
This PR does not seem to contain any modification to coverable code. |
| {% include "core/includes/modal-trigger.html" with modal="modal--identity-verification" text=text period=True %} | ||
| </p> | ||
| <p>{% translate "For this process you will need:" %}</p> | ||
| <ul class="list-disc ms-lg-5 ms-0"> |
There was a problem hiding this comment.
Create a new utility class, list-disc, which turns an unordered list's bullets into the disc shape. Follows Bootstrap's style (list-unstyled).
ms-lg-5 ms-0: Adds a large margin-left on Desktop and none on Mobile, to make the unordered list look indented.
| /* Sign in with Login.gov (white logo) on System Enrollment Error */ | ||
|
|
||
| .system-enrollment-error .btn.btn-lg.btn-primary.login { | ||
| padding: 10px 0; | ||
| } | ||
|
|
There was a problem hiding this comment.
I decided to just keept his code as is, and will fix it if need be in #2545
Sidenote: This button CSS around the Login.gov buttons is really messy. Hard for me to tell which code is for which button (Modal button vs. Get started with vs. whatever else).. and I wrote it all! Needs a good look over after this is all settled.
…-items for each flow
machikoyasuda
force-pushed
the
feat/2542-recaptcha-elig-start
branch
from
278279f to
00cc296
Compare
machikoyasuda
force-pushed
the
feat/2542-recaptcha-elig-start
branch
from
066a239 to
00cc296
Compare
|
This is now ready for review @angela-tran |
| @@ -16,8 +16,8 @@ <h1>{% translate "You selected a CalFresh Cardholder transit benefit." %}</h1> | |||
| {% endblock media-item %} | |||
|
|
|||
| {% block call-to-action %} | |||
There was a problem hiding this comment.
Noting this for the #2540 ticket:
All of these can be {% block call-to-action-button %} instead of overriding all of {% call-to-action %}. {% call-to-action %} only needs to exist for the landing page/agency landing page.
|
These changes are looking great @machikoyasuda. Great work with keeping the scope focused - it's tricky with how Eligibility Start and Enrollment Index are a little entangled. After thinking about Kegan's comments, I noticed some further simplification we could do. Let me know what you think, thanks! |
closes #2542
What this PR does
Elig Start: Align everything to col-lg-6, changes bulleted list indent, some spacing
Actually changed visuals CSS:
Refactored code, no visual changes: Media Item
media-item.htmltemplate: Removed the now unusedheading_wrapperblock, which was previously allowing us to change h1/h2/h3 declarations (see more here 93293f8). We now no longer have an "intervening h2" on Eligibility Start, so all the media item headings can go be upgraded to h2s.media-item.htmltemplate: Removed themedia-bodydiv and class entirely. No CSS and no need.media-item--XXXX--start.htmltemplates, themedia-body--detailsdiv/class are removed. Now thebodyis a series of<p>s plus any modals.media-itemgives you a<li>with an<h2 class="h3 pb-1">Item heading</h1>and a body area that can be anything. In use, it is any number of<p>and some hidden modals.start.htmltemplate itself, where the items are displayed. It is a<ul>with<li>swithout the list bullet, displayed vertically, and a 16px vertical gap between them. This has been updated on both Elig Start and Enrollment Index/Enrollment Index CalFresh, via Bootstrap utility classes on the parent<ul>.A11y
Just to make sure I'm not going cross-eyed with all the H1, H2, H3s, I ran the Deque tool to make sure the Headings are in proper order:
Screenshots
Eligibility Start
Medicare Cardholder
Older Adult
CalFresh
Veteran
Agency Card